* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   General Text & Layout Utilities
   -------------------------------------------------------------------------- */
.fsh-center-text {
  text-align: center !important;
}

.app-text-blue {
  color: #283593 !important;
}

.app-text-red {
  color: #d32f2f !important;
}

/* --------------------------------------------------------------------------
   MudBlazor Component Overrides - Buttons
   -------------------------------------------------------------------------- */
.mud-button-filled {
  box-shadow:
    0 3px 1px -2px rgb(0 0 0 / 30%),
    0 2px 2px 0 rgb(0 0 0 / 0),
    0 1px 5px 0 rgb(0 0 0 / 10%) !important;
}

/* --------------------------------------------------------------------------
   MudBlazor Component Overrides - Dialogs
   -------------------------------------------------------------------------- */
.mud-dialog {
  box-shadow:
    0 3px 1px -2px rgb(0 0 0 / 10%),
    0 2px 2px 0 rgb(0 0 0 / 0),
    0 10px 10px 0 rgb(0 0 0 / 5%) !important;
}

.mud-dialog-content {
  max-height: 75vh !important;
  overflow: auto !important;
  padding: 0px !important;
  margin: 0px !important;
}

.my-dialog-max-width-height {
  max-height: 90vh;
  padding: 20px 20px 20px 20px!important;
  height: 100%;
  width: 100%;
}

/* --------------------------------------------------------------------------
   MudBlazor Stepper - Completed step icon green
   Uses sibling combinator trick: v7.16.0 has no "completed" class, so we
   color ALL icons green, then override active (primary) and future (gray).
   -------------------------------------------------------------------------- */
/* 1. All step icons → green (completed state by default) */
.mud-stepper-nav .mud-step .mud-step-label-icon {
  background-color: var(--mud-palette-success) !important;
  color: var(--mud-palette-white) !important;
}

/* 2. Active step icon → primary color (higher specificity wins) */
.mud-stepper-nav .mud-step.active .mud-step-label-icon.mud-primary {
  background-color: var(--mud-palette-primary) !important;
  color: var(--mud-palette-white) !important;
}

/* 3. Steps AFTER active → revert to default gray (future/unreached) */
.mud-stepper-nav .mud-step.active~.mud-step .mud-step-label-icon {
  background-color: var(--mud-palette-text-disabled) !important;
  color: var(--mud-palette-white) !important;
}

/* --------------------------------------------------------------------------
   MudBlazor Component Overrides - Tables
   -------------------------------------------------------------------------- */
.sticky-action-column {
  position: sticky !important;
  right: 0;
  z-index: 1050 !important;
  background-color: var(--mud-palette-surface, #ffffff) !important;
}

.mud-table-head .mud-table-cell {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.mud-table-body .mud-table-cell {
  font-size: 0.8rem !important;
}

/* Ensure row hover effect is solid (MudBlazor's variable may be transparent) */
.mud-table-body .mud-table-row:hover,
.mud-table-body .mud-table-row:hover .mud-table-cell {
  background-color: #e8f5e9 !important;
  /* Solid light green */
  opacity: 1 !important;
}

/* Ensure sticky column has a solid background during horizontal scroll */
.mud-table-striped .mud-table-row:nth-of-type(odd) .sticky-action-column {
  background-color: var(--mud-palette-background-grey, #f5f5f5) !important;
}

.mud-table-body .mud-table-row:hover .sticky-action-column {
  background-color: #e8f5e9 !important;
  /* Solid light green */
}

/* Ensure action column header stays on top of rows during vertical scroll */
.mud-table-head th.sticky-action-column {
  top: 0 !important;
  z-index: 30 !important;
  background-color: var(--mud-palette-surface, #ffffff) !important;
}

/* --------------------------------------------------------------------------
   MudBlazor Component Overrides - Cards
   -------------------------------------------------------------------------- */
.mud-card {
  margin-bottom: 20px !important;
}

.mud-card-header .mud-card-header-avatar {
  margin-inline-end: 10px !important;
}

/* --------------------------------------------------------------------------
   MudBlazor Component Overrides - Grid
   -------------------------------------------------------------------------- */
.mud-grid-spacing-xs-3 {
  margin: 0px !important;
  margin-left: -12px !important;
}

/* --------------------------------------------------------------------------
   MudBlazor Component Overrides - Overlay
   -------------------------------------------------------------------------- */
.mud-overlay-dark {
  backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   Blazor Error UI
   -------------------------------------------------------------------------- */
#blazor-error-ui {
  color: var(--mud-palette-drawer-text);
  background: var(--mud-palette-drawer-background);
}

/* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 2px !important;
  height: 6px !important;
}

/* --------------------------------------------------------------------------
   Custom Fonts - Sarabun (Thai)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Width Utilities
   -------------------------------------------------------------------------- */
.w-100 {
  width: 100%;
}

.w-120 {
  width: 120px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

.w-220 {
  width: 220px;
}

.custom-expansion-panel-title {
  background-color: var(--fsh-table-row-hover, #00ff90);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Cell Utilities
   -------------------------------------------------------------------------- */
.cell-nowrap {
  white-space: nowrap;
}

.cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-center {
  text-align: center;
}

.cell-right {
  text-align: right;
}

.cell-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* removed duplicate table styles */

/* --------------------------------------------------------------------------
   Status Chip Styling
   -------------------------------------------------------------------------- */
.status-chip {
  font-size: 0.75rem !important;
  height: 24px !important;
  padding: 4px 8px !important;
}

.status-distributed {
  background-color: #4caf50 !important;
  color: #ffffff !important;
}

.status-survey {
  background-color: #2196f3 !important;
  color: #ffffff !important;
}

.status-pending {
  background-color: #ff9800 !important;
  color: #ffffff !important;
}

.status-cancelled {
  background-color: #f44336 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Dense Form Controls
   -------------------------------------------------------------------------- */
.form-field-dense .mud-input-slot {
  font-size: 0.8rem !important;
}

.form-field-dense {
  margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
   Compact Button Styling
   -------------------------------------------------------------------------- */
.btn-compact {
  padding: 4px 12px !important;
  font-size: 0.8rem !important;
  height: 32px !important;
}

/* --------------------------------------------------------------------------
   Filter Panel Styling
   -------------------------------------------------------------------------- */
.filter-panel {
  /* border-radius: 4px;
    border: 1px solid var(--mud-palette-divider); */
  background-color: var(--mud-palette-surface);
}

/* Compact filter panel with reduced spacing */
.filter-panel .mud-grid {
  margin: -12px !important;
}

.filter-panel .mud-grid>.mud-grid-item {
  padding: 8px !important;
}

.filter-panel.pa-4 {
  padding: 12px !important;
}

/* --------------------------------------------------------------------------
   Compact Expansion Panel
   -------------------------------------------------------------------------- */
.mud-expansion-panels .mud-expand-panel {
  margin-bottom: 0 !important;
}

.mud-expansion-panels .mud-expand-panel-header {
  padding: 2px 2px 8px 0px !important;
  min-height: 40px !important;
}

.mud-expansion-panels .mud-expand-panel-content {
  padding: 2px 26px 0px 0px !important;
}

/* --------------------------------------------------------------------------
   Disabled Menu Styling
   -------------------------------------------------------------------------- */
.disabled-menu-gray .mud-icon-button {
  background-color: #9e9e9e !important;
  opacity: 0.6;
}

.disabled-menu-gray .mud-icon-button:hover {
  background-color: #9e9e9e !important;
}

.disabled-menu-gray .mud-icon-button.mud-button-filled-primary {
  background-color: #9e9e9e !important;
}

.disabled-menu-gray .mud-icon-button.mud-button-filled-primary:hover {
  background-color: #9e9e9e !important;
}

/* --------------------------------------------------------------------------
   Radio Group - Aligned with Outlined Text Fields
   -------------------------------------------------------------------------- */
.radio-group-aligned {
  border: 1px solid var(--mud-palette-lines-inputs);
  border-radius: 4px;
  padding: 8px 12px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background-color: transparent;
  margin-top: 0;
}

.radio-group-aligned .mud-input-label {
  font-size: 0.75rem;
  color: var(--mud-palette-text-secondary);
  position: absolute;
  top: -9px;
  left: 8px;
  background-color: var(--mud-palette-surface);
  padding: 0 4px;
  line-height: 1;
}

.radio-group-aligned .mud-radio-group {
  margin: 0;
  padding: 0;
}

.radio-group-aligned .mud-radio {
  margin: 0 8px 0 0;
}

.radio-group-aligned .mud-radio .mud-button-root {
  padding: 4px;
}

.radio-group-aligned .mud-radio .mud-typography {
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Radio Group - Dense Variant (No Border)
   -------------------------------------------------------------------------- */
.radio-group-dense {
  position: relative;
  padding: 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.radio-group-dense>label.radio-label {
  font-size: 0.75rem;
  color: var(--mud-palette-text-secondary);
  margin-bottom: 4px;
  line-height: 1;
}

.radio-group-dense .mud-radio-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin: 0;
}

.radio-group-dense .mud-radio {
  margin: 0;
}

.radio-group-dense .mud-radio .mud-button-root {
  padding: 2px;
}

.radio-group-dense .mud-radio .mud-icon-root {
  font-size: 1.25rem;
}

.radio-group-dense .mud-radio .mud-typography {
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Modern NavMenu Customization
   -------------------------------------------------------------------------- */

/* NavMenu Search Bar */
.fsh-nav-search {
  padding: 6px 6px !important;
}

.fsh-nav-search .mud-input-outlined {
  border-radius: 12px !important;
  background-color: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  transition: all 0.2s ease;
}

.fsh-nav-search .mud-input-outlined.mud-input-outlined-focus {
  border-color: var(--mud-palette-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.1);
}

/* Nav Menu Container */
.fsh-nav-menu {
  padding: 0 12px !important;
}

/* Nav Link Item */
.fsh-nav-menu .mud-nav-link {
  margin: 2px 0 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease;
  padding: 6px 6px !important;
  overflow: hidden !important;
}

.fsh-nav-menu .mud-nav-link-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Active Link State */
.fsh-nav-menu .mud-nav-link.active:not(.mud-nav-link-disabled) {
  background-color: #f0fdf4 !important;
  /* light green */
  color: #15803d !important;
  /* emerald 700 */
  font-weight: 600 !important;
}

.fsh-nav-menu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon-default {
  color: #15803d !important;
}

/* Nav Group Header (Parent items) */
.fsh-nav-menu .mud-nav-group-header {
  border-radius: 10px !important;
  margin: 2px 0 !important;
  padding: 6px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Reordering: Expand Icon -> Main Icon -> Title */
.fsh-nav-menu .mud-nav-group-header .mud-nav-group-expand-icon {
  order: 1 !important;
  margin-right: 0 !important;
  font-size: 1.1rem !important;
  color: #64748b !important;
  transition: transform 0.3s ease;
}

.fsh-nav-menu .mud-nav-group-header .mud-nav-link-icon-default {
  order: 2 !important;
  margin-right: 0 !important;
}

.fsh-nav-menu .mud-nav-group-header .mud-nav-link-text {
  order: 3 !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Sub-menu vertical line indicator */
.fsh-nav-menu .mud-nav-group .mud-collapse-container {
  border-left: 2px solid #e2e8f0 !important;
  margin-left: 20px !important;
  padding-left: 8px !important;
  transition: border-color 0.3s ease;
}

.fsh-nav-menu .mud-nav-group.mud-nav-group-expanded>.mud-collapse-container {
  border-left-color: #cbd5e1 !important;
}

/* Nav Headers (Labels like "Reports", "Personal") */
.fsh-nav-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  padding-left: 20px !important;
}

/* --------------------------------------------------------------------------
   Thai Text Display Adjustments (Fix Clipping)
   -------------------------------------------------------------------------- */
/* Fix for Thai characters (diacritics/tone marks) being clipped in dense Outlined fields */
.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol {
  transform: translate(14px, -12px) scale(0.75) !important;
}

/* Ensure input content doesn't clip lower Thai vowels (e.g., สระอุ, สระอู) */
.mud-input-outlined.mud-input-margin-dense .mud-input-slot {
  padding-top: 10px !important;
  padding-bottom: 6px !important;
}

/* Adjust the legend gap for the floating label to ensure it doesn't clip Thai text */
.mud-input-outlined-border legend {
  line-height: 1.2 !important;
}

.mud-input-control>.mud-input-control-input-container>.mud-input-label-outlined.mud-input-label-inputcontrol {
  line-height: 24px;
}

/* --------------------------------------------------------------------------
   Breadcrumb Customization
   -------------------------------------------------------------------------- */
.mud-breadcrumbs .mud-breadcrumb-item a {
  transition: all 0.2s ease;
  border-radius: 4px;
  padding: 4px 8px;
  /* Added padding for hover effect */
  color: inherit;
  /* Default text color */
}

/* Hover style for non-disabled links */
.mud-breadcrumbs .mud-breadcrumb-item:not(.mud-disabled) a:hover {
  background-color: rgba(var(--mud-palette-primary-rgb),
      0.08);
  /* Highlight background */
  color: var(--mud-palette-primary) !important;
  /* Ensure highlight color */
  text-decoration: none !important;
}

/* Keep disabled link colors the same as normal but remove hover */
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled a {
  color: inherit !important;
  /* Same font color as normal */
  pointer-events: none;
  /* No hover effect */
}

/* Ensure current active route is primary color */
.mud-breadcrumbs .mud-breadcrumb-item:last-child a {
  color: var(--mud-palette-primary) !important;
  font-weight: 500;
}

.mud-input-control>.mud-input-control-input-container>.mud-input-label-outlined.mud-input-label-inputcontrol {
  line-height: 24px;
}

/* App's Lineheight  */
.app-lh {
  line-height: 2.5em;
  align-items: center;
  padding: 0.5rem;
}

.app-dialog-content {
  overflow-y: auto !important;
  width: 100%;
}

.app-dialog-tab-content {
  margin: 1rem;
  width: 98% !important;
}

/* On tablet/mobile, replace margin with padding to prevent edge overflow */
@media (max-width: 959.98px) {
  .app-dialog-tab-content {
    margin: 0 !important;
    padding: 8px 12px !important;
    width: 100% !important;
  }
}

.app-dialog-tab-title {
  position: sticky;
  top: 0;
  z-index: 1;
}

.app-dialog-grid-item {
  padding: 0.25rem !important;
}

.mud-tabs-tabbar {
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.mud-tabs-panels {
  padding: 15px !important;
}

.app-font-bold {
  font-weight: bold !important;
}

.mud-dialog-actions {
  border-top: 1px solid #e2e8f0;
}

/* --------------------------------------------------------------------------
   Auth & Stepper Customization
   -------------------------------------------------------------------------- */
.mud-stepper-label-ellipsis {
  display: inline-block;
  max-width: 80px;
  text-align: center;
  word-wrap: break-word;
  white-space: normal !important;
  vertical-align: bottom;
}

/* Fix for overlapping stepper labels */
.registration-stepper-container .mud-step-header {
  min-width: 80px;
  /* Give some breathing room */
}

.registration-stepper-container .mud-step-label-content {
  max-width: 80px;
  text-align: center;
  word-wrap: break-word;
  white-space: normal !important;
  /* Force wrapping */
  line-height: 1.2;
  font-size: 0.8rem !important;
}

.registration-stepper-container .mud-step-label-string {
  display: block;
  max-width: 80px;
  text-align: center;
  word-wrap: break-word;
  white-space: normal !important;
  font-size: 0.8rem !important;
}

/* Ensure step titles are constrained */
.registration-stepper-container .mud-step-header .mud-typography {
  max-width: 80px;
  text-align: center;
  word-wrap: break-word;
  white-space: normal !important;
  font-size: 0.8rem !important;
}

/* Authentication Page Wrapper adjustments */
.auth-wrapper {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Dashboard Stats Cards
   -------------------------------------------------------------------------- */
.stats-card {
  border-radius: 12px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-top-width: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 12px !important;
  min-height: 60px !important;
  height: 100% !important;
}

.stats-card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: auto !important;
}

.stats-card .stats-value {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-top: 6px;
  align-self: flex-end !important;
}

.stats-card .stats-label {
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
  font-weight: 500;
  color: var(--mud-palette-text-secondary);
}

/* Red tone - Households */
.stats-card.card-red {
  border-color: #f44336 !important;
}

.stats-card.card-red .stats-value,
.stats-card.card-red .mud-icon-root {
  color: #f44336 !important;
}

/* Teal tone - Total Blood Exam */
.stats-card.card-teal {
  border-color: #00838f !important;
}

.stats-card.card-teal .stats-value,
.stats-card.card-teal .mud-icon-root {
  color: #00838f !important;
}

/* Orange tone - Population */
.stats-card.card-orange {
  border-color: #F4511E !important;
}

.stats-card.card-orange .stats-value,
.stats-card.card-orange .mud-icon-root {
  color: #F4511E !important;
}

/* Yellow/Amber tone - LLIN */
.stats-card.card-yellow {
  border-color: #F57C00 !important;
}

.stats-card.card-yellow .stats-value,
.stats-card.card-yellow .mud-icon-root {
  color: #F57C00 !important;
}

/* Blue tone - ITN */
.stats-card.card-blue {
  border-color: #0097A7 !important;
}

.stats-card.card-blue .stats-value,
.stats-card.card-blue .mud-icon-root {
  color: #0097A7 !important;
}

/* Green tone - Spray */
.stats-card.card-green {
  border-color: #4caf50 !important;
}

.stats-card.card-green .stats-value,
.stats-card.card-green .mud-icon-root {
  color: #4caf50 !important;
}

/* Pink tone */
.stats-card.card-pink {
  border-color: #e91e63 !important;
}

.stats-card.card-pink .stats-value,
.stats-card.card-pink .mud-icon-root {
  color: #e91e63 !important;
}

/* Skyblue tone */
.stats-card.card-skyblue {
  border-color: #546E7A !important;
}

.stats-card.card-skyblue .stats-value,
.stats-card.card-skyblue .mud-icon-root {
  color: #546E7A !important;
}

/* --------------------------------------------------------------------------
   Chart Customizations
   -------------------------------------------------------------------------- */
/* Rotate X-Axis Labels */
.chart-xaxis-rotate-90 svg {
  overflow: visible !important;
}

.chart-xaxis-rotate-90 .mud-charts-xaxis text {
  transform-box: fill-box !important;
  transform-origin: center right !important;
  transform: rotate(-90deg) translate(-15px, 0px) !important;
  text-anchor: end !important;
}

/* Random Bar Colors for Single Series
   MudBlazor BarChart paints all bars in a single series with the same color. 
   We apply CSS nth-of-type to recolor them uniquely. */
.random-bar-colors .mud-chart-serie-0 path:nth-of-type(1) {
  fill: #594ae2 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(2) {
  fill: #00c853 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(3) {
  fill: #ff9800 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(4) {
  fill: #f44336 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(5) {
  fill: #00bcd4 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(6) {
  fill: #9c27b0 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(7) {
  fill: #e91e63 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(8) {
  fill: #4caf50 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(9) {
  fill: #ffeb3b !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(10) {
  fill: #795548 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(11) {
  fill: #607d8b !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(12) {
  fill: #8bc34a !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(13) {
  fill: #03a9f4 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(14) {
  fill: #ff5722 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(15) {
  fill: #3f51b5 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(16) {
  fill: #e040fb !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(17) {
  fill: #c2185b !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(18) {
  fill: #fbc02d !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(19) {
  fill: #8d6e63 !important;
}

.random-bar-colors .mud-chart-serie-0 path:nth-of-type(20) {
  fill: #009688 !important;
}

/* BarChartWithLabels – custom bar chart showing value labels above each bar */
.bcwl-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.bcwl-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 4px 0;
  overflow-x: auto;
  flex-shrink: 0;
}

.bcwl-bar-group {
  flex: 1;
  min-width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.bcwl-bar-value {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}

.bcwl-bar {
  width: 62%;
  min-width: 10px;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  flex-shrink: 0;
  transition: height 0.35s ease;
}

.bcwl-x-axis {
  display: flex;
  gap: 4px;
  padding: 5px 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.bcwl-x-label {
  flex: 1;
  min-width: 28px;
  text-align: center;
  font-size: 11px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rotated labels (e.g. occupation names) */
.bcwl-x-rotate {
  height: 90px;
  align-items: flex-start;
}

.bcwl-x-rotate .bcwl-x-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  height: 85px;
  line-height: 1;
}

.mud-icon-button {
  padding: 8px !important;
}

.mud-radio-group {
  display: flex;
}

/* --------------------------------------------------------------------------
   VectorControl - Responsive Checkbox / Radio Group Boxes
   On desktop: renders transparent (flex-row, matches existing layout).
   On tablet/mobile (< 960px): renders as a labelled bordered group box.
   -------------------------------------------------------------------------- */
.vc-group-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 959.98px) {
  .vc-group-box {
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    gap: 4px;
    background: rgba(0, 0, 0, 0.01);
  }

  .vc-group-box .mud-radio-group,
  .vc-group-box .vc-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* Always-bordered variant — used for side-by-side group panels on desktop */
.vc-group-box-bordered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 6px;
  padding: 8px 12px;
  width: 100%;
  gap: 4px;
  background: rgba(0, 0, 0, 0.01);
}

/* Radio groups inside bordered panels: horizontal on desktop, vertical on mobile */
.vc-group-box-bordered .mud-radio-group {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

@media (max-width: 959.98px) {
  .vc-group-box-bordered .mud-radio-group {
    flex-direction: column !important;
    gap: 4px;
  }
}

/* Ep03 patient info: label and value stack vertically on tablet/mobile */
@media (max-width: 959.98px) {
  .ep-patient-info .mud-typography {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   VectorControl List Pages - Responsive Action Column
   On tablet/mobile (< 960px), disable sticky positioning that causes overlap
   in MudTable's stacked row view. Allow buttons to wrap inside the cell.
   -------------------------------------------------------------------------- */
@media (max-width: 959.98px) {
  .sticky-action-column {
    position: static !important;
    z-index: auto !important;
    background: transparent !important;
    white-space: normal !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile AppBar height compensation
   On small mobile screens, the AppBar 2-line logo/title wraps taller than
   the default 64px. Override --mud-appbar-height so MudMainContent padding
   clears the taller bar automatically on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  :root {
    --mud-appbar-height: 80px;
  }
}

/* --------------------------------------------------------------------------
   Epidemiology list pages – action button row
   On mobile, make buttons expand to fill 50% each so the 4 buttons
   form a 2×2 grid instead of stacking one-per-row.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .ep-action-buttons .mud-button-root {
    flex: 1 1 40%;
    min-width: 0 !important;
  }
}

/* ============================================================
   MudBlazor Modal Fixes
   ระบบ: Malaria Information System
   ============================================================

   1. ระยะขอบของกรอบ Modal → 20px ทุกมุม
   2. จัดเนื้อหาให้ตรงกับโลโก้

   Created by: Pheeraphon_P
   Date: 2024-06-20
   ============================================================ */


/* ─────────────────────────────────────────────
   1. MODAL PADDING — 20px ทุกมุม ทุก Modal
   ───────────────────────────────────────────── */

/* Dialog content wrapper */
.mud-dialog .mud-dialog-content,
.app-dialog-content {
  padding: 20px;
}

/* Dialog title / header */
.mud-dialog .mud-dialog-title {
  padding: 20px 20px 12px 20px;
  margin: 0;
}

/* Dialog action bar (footer buttons) */
.mud-dialog .mud-dialog-actions {
  padding: 12px 20px 20px 20px;
  margin: 0;
}


/* ─────────────────────────────────────────────
   2. จัดตำแหน่งเนื้อหาให้ตรงกับโลโก้
      (align ซ้ายของเนื้อหาตรงกับ icon/logo ใน header)
   ───────────────────────────────────────────── */

/* ให้ title icon และ content เริ่มที่ระยะเดียวกัน */
.mud-dialog .mud-dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* เนื้อหาภายใน content ให้ indent ตรงกับ text ของ title
   (icon width ≈ 24px + gap 8px = 32px) */
.mud-dialog .mud-dialog-content {
  padding-left: 20px !important;
}

/* ─────────────────────────────────────────────
   SCROLLBAR สำหรับ content ที่ยาว
   ───────────────────────────────────────────── */

.mud-dialog .mud-dialog-content {
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* vc-group-box-modifiy By Pheeraphon_P Date: 2024-06-20 */

.vc-group-box-modifiy {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 6px;
  padding: 8px 12px;
  width: 100%;
  gap: 4px;
  background: rgba(0, 0, 0, 0.01);
}

/* ใน app.css หรือ _custom.css Add By Pheeraphon_P Date: 2024-06-20 */

/* TextField / Input */
.mud-input.mud-disabled {
    color: rgba(0, 0, 0, 0.5) !important;
    background-color: #f5f5f5 !important;
}

/* Label ของ disabled input */
.mud-input-label.mud-disabled {
    color: rgba(0, 0, 0, 0.38) !important;
}

/* Checkbox / Radio */
.mud-checkbox .mud-button-root.Mui-disabled,
.mud-checkbox.mud-disabled .mud-icon-root {
    color: rgba(0, 0, 0, 0.26) !important;
}