@layer components {
/* Patient Dashboard Styles */
/* Layout Containers */
.dashboard-title { 
  font-weight: var(--font-weight-bold); 
  color: var(--color-heading); 
  margin-bottom: var(--space-5); 
  font-size: var(--font-size-base); /* Closer to original 1.1rem heading size */
}

/* Unified row horizontal spacing to ensure equal left/right gutters across dashboard sections */
/* Override Bootstrap row gutters for consistent left/right spacing irrespective of nested card padding */
.dashboard-row {
  margin-left: 0 !important; /* neutralize -0.75rem default */
  margin-right: 0 !important;
}
.dashboard-row > [class^="col"],
.dashboard-row > .col-12,
.dashboard-row > .col-lg-4,
.dashboard-row > .col-lg-8,
.dashboard-row > .col-md-12 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (max-width: 768px) {
  .dashboard-row > [class^="col"],
  .dashboard-row > .col-12 { padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (max-width: 576px) {
  .dashboard-row > [class^="col"],
  .dashboard-row > .col-12 { padding-left: var(--space-2); padding-right: var(--space-2); }
}

.patient-dashboard-card, .charts { 
  background: var(--color-surface); 
  border-radius: var(--radius-md); /* Original was ~12px (0.75rem); using radius-md (8px) for design consistency */ 
  box-shadow: var(--elevation-card); 
  padding: var(--space-5); 
  margin-bottom: var(--space-5); 
  color: var(--color-text-body); 
  position: relative; 
  border: 1px solid var(--color-border-decorative); /* Reinstate subtle card border for clearer separation */
}

.patient-dashboard-card a:not(.btn):not(.btn-primary-token) { 
  color: var(--color-text-body); 
  display: block; 
  margin-top: var(--space-1); 
  font-size: var(--font-size-sm); 
  text-decoration: none; 
  transition: color var(--transition-base); 
}
.patient-dashboard-card a:not(.btn):not(.btn-primary-token):hover { color: var(--color-primary); }

.charts h3 { 
  font-weight: var(--font-weight-bold); /* closer to original bold */ 
  color: var(--color-heading); 
  text-align: center; 
  font-size: var(--font-size-base); /* 18px vs original ~17.6px */
  margin-bottom: var(--space-4); 
  letter-spacing: .5px; 
}

/* Chart Containers */
#dexterity-score-chart,
#rom-score-chart,
#pain-score-chart,
#overall-score-chart { 
  width: 100%; 
  min-height: var(--pd-chart-min-height); 
}

/* Score Circle */
.score-circle, .score-circle-empty { 
  width: var(--pd-score-diameter); 
  height: var(--pd-score-diameter); 
  border: var(--score-ring-thickness) solid var(--color-primary); 
  border-radius: var(--radius-round); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  margin: 0 auto var(--space-4); 
  background: var(--color-surface); 
  position: relative; 
  font-family: var(--font-family-sans); 
  transition: border-color var(--transition-base); 
}
.score-circle-empty { border-color: var(--color-border-decorative); }

.score-value { 
  font-size: var(--font-size-lg); /* Increase prominence (36px) for readability */
  font-weight: var(--font-weight-bold); 
  line-height: 1; 
  color: var(--color-heading); 
}

.score-label { 
  font-size: var(--font-size-sm); /* More legible than 9px for 50+ demographic */
  color: var(--color-text-muted); 
  letter-spacing: .5px; 
  text-transform: uppercase; 
}

.no-score-text { 
  font-size: var(--font-size-base); /* Elevate for readability */
  color: var(--color-text-muted); 
  font-weight: var(--font-weight-bold); 
}

.score-description { 
  font-size: var(--font-size-sm); 
  color: var(--color-text-muted); 
  text-align: center; 
  margin: 0; 
}

/* Assessment Alerts */
.assessment-required-display .alert { 
  border-radius: var(--radius-md); 
  padding: var(--space-2) var(--space-3); 
  margin: var(--space-2) 0; 
}
.assessment-required-display .btn { 
  font-size: var(--font-size-xs); 
  padding: var(--space-2) var(--space-3); 
  border-radius: var(--radius-sm); 
}
.assessment-status { 
  border-top: 1px solid var(--color-border-decorative); 
  padding-top: var(--space-2); 
  margin-top: var(--space-2); 
}
.assessment-status div { margin: 2px 0; }

/* Chips and Delta Badges */
.chips { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.chip { 
  display: inline-flex; align-items: center; gap: 6px; 
  padding: 2px 8px; border-radius: var(--radius-pill, 9999px); 
  font-size: var(--font-size-xs); border: 1px solid var(--color-border-decorative);
}
.chip-success { background: rgba(40, 167, 69, .08); color: var(--color-heading); border-color: rgba(40,167,69,.25); }
.chip-missing { background: rgba(220, 53, 69, .06); color: var(--color-heading); border-color: rgba(220,53,69,.25); }
.delta-badge { 
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); 
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
}
.delta-badge-up { background: rgba(40,167,69,.1); color: #198754; }
.delta-badge-down { background: rgba(220,53,69,.1); color: #dc3545; }
.delta-badge-stable { background: rgba(108,117,125,.1); color: #6c757d; }

/* Chart Header & Filters */
.chart-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: var(--space-4); 
}
.chart-header h3 { 
  margin-bottom: 0; 
  text-align: left; 
}
.chart-filters { 
  display: flex; 
  gap: var(--space-2); 
}
.chart-filters .form-select { min-width: 120px; }

a {
    color: var(--color-text-body);
    text-decoration: none !important;
}

/* Custom Assessment Button */

/* Avatar */
.avatar-circle { 
  width: var(--pd-avatar-size); 
  height: var(--pd-avatar-size); 
  border-radius: var(--radius-round); 
  background: var(--color-heading); 
  color: var(--color-page-bg); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 2rem; 
  font-weight: var(--font-weight-bold); 
  margin: 0 auto; 
}

/* Calendar Styles (disabled until calendar re-enablement) */
/* .week-schedule-con { 
  background: var(--color-surface); 
  border-radius: var(--radius-md); 
  width: 100%; 
  border: 1px solid var(--color-border-decorative); 
  box-shadow: var(--elevation-card); 
}
.week-schedule-con h4 { 
  background: var(--color-heading); 
  color: var(--color-surface); 
  padding: var(--space-4); 
  margin: 0; 
  text-align: center; 
  font-size: var(--font-size-md); 
  font-weight: var(--font-weight-bold); 
} */

/* FullCalendar overrides (disabled until calendar re-enablement) */
/* .fc .fc-toolbar { 
  background: var(--color-surface); 
  padding: var(--space-3) var(--space-4); 
  border-bottom: 1px solid var(--color-border-decorative); 
}
.fc .fc-toolbar-title { 
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold); 
  color: var(--color-heading); 
  text-transform: uppercase; 
  letter-spacing: .06em; 
}
.fc .fc-button, .fc .fc-button-primary { 
  background: rgba(0,0,0,0.05) !important; 
  border: 1px solid rgba(0,0,0,0.1) !important; 
  color: var(--color-heading) !important; 
  width: var(--pd-calendar-button-size) !important; 
  height: var(--pd-calendar-button-size) !important; 
  border-radius: var(--radius-sm) !important; 
  font-size: var(--font-size-sm) !important; 
  transition: background var(--transition-base) !important; 
}
.fc .fc-button:hover { background: rgba(0,0,0,0.12) !important; }
.fc th { 
  padding: var(--space-3) 0; 
  font-size: var(--font-size-sm); 
  font-weight: var(--font-weight-bold); 
  background: var(--color-surface); 
  border: 1px solid var(--color-border-decorative); 
}
.fc td { border: 1px solid var(--color-border-decorative); background: var(--color-surface); }
.fc .fc-daygrid-day-number { padding: 4px 8px; font-size: var(--font-size-xs); }
.fc .fc-day-today .fc-daygrid-day-number { 
  background: var(--color-heading); 
  color: var(--color-surface); 
  width: 24px; height: 24px; border-radius: var(--radius-round); 
  display: flex; align-items: center; justify-content: center; 
} */

/* Event Items (disabled until calendar re-enablement) */
/* .event-item { 
  display: flex; align-items: center; gap: 4px; 
  font-size: var(--font-size-sm);
  padding: 2px 6px; 
  border: 1px solid var(--color-border-decorative); 
  border-radius: var(--radius-sm); 
  background: var(--color-surface); 
  width: var(--pd-event-item-width); 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.event-item span { color: var(--color-text-body); } */

/* Responsive Tweaks */
@media (max-width: 768px) { 
  .event-item { width: 100%; font-size: var(--font-size-xs); padding: 1px 2px; border: none; } 
  .patient-dashboard-card, .charts { padding: var(--space-4); }
}
@media (max-width: 480px) { 
  .event-item { font-size: var(--font-size-xs); } 
  .score-circle { width: var(--pd-score-diameter-sm); height: var(--pd-score-diameter-sm); }
}
@media (max-width: 360px) { 
  .event-item { font-size: var(--font-size-xs); } 
}

/* Utility */
.muted { color: var(--color-text-muted); }
.divider { border-top: 1px solid var(--color-border-decorative); margin: var(--space-4) 0; }

/* Global ApexCharts typography fallback (ensures charts inherit design tokens even if JS options miss some labels) */
.apexcharts-text, 
.apexcharts-legend-text, 
.apexcharts-tooltip, 
.apexcharts-xaxis-label, 
.apexcharts-yaxis-label { 
  font-family: var(--font-family-sans) !important; 
  font-size: var(--font-size-sm) !important; 
}

/* Ensure tooltip contrast and readability */
.apexcharts-tooltip {
  line-height: var(--line-height-normal);
}

/* Overall Hand Score State Styles (semantic, token-driven) */
.hand-score-display.score-excellent { --score-color: var(--color-success); }
.hand-score-display.score-good { --score-color: var(--color-primary); }
.hand-score-display.score-fair { --score-color: var(--color-warning); }
.hand-score-display.score-needs { --score-color: var(--color-alert); }

/* Bind score circle & value color to --score-color variable (set by state class above) */
.hand-score-display .score-circle { border-color: var(--score-color); }
.hand-score-display .score-value { color: var(--score-color); }

/* Meaning badge for qualitative band (Excellent, Good, Fair, Needs improvement) */
.meaning-badge {
  background: var(--score-color);
  color: var(--color-surface);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-pill, 9999px);
  letter-spacing: .5px;
}

/* Delta badge unified (existing classes kept; ensure text contrast with tokens) */
.delta-badge-up { background: rgba(40,167,69,.12); color: var(--color-success); }
.delta-badge-down { background: rgba(220,53,69,.12); color: var(--color-alert); }
.delta-badge-stable { background: rgba(108,117,125,.12); color: var(--color-text-muted); }

/* Next action container styling */
.hand-score-display .next-action { text-align: center; }
.hand-score-display .next-action .btn-secondary-token { margin-top: var(--space-3); }

/* Center primary token buttons inside dashboard cards & chart panels */
.patient-dashboard-card .btn-primary-token,
.charts .btn-primary-token {
  display: block;               /* ensure block for auto margins */
  margin-left: auto;            /* center horizontally */
  margin-right: auto;           /* center horizontally */
  margin-top: var(--space-4);   /* preserve vertical rhythm */
  margin-bottom: var(--space-4);
}

/* When full-width utility (w-100) is applied, keep vertical spacing but no need for auto margins */
.patient-dashboard-card .btn-primary-token.w-100,
.charts .btn-primary-token.w-100 {
  margin-left: 0;
  margin-right: 0;
}
}