/**
 * Typography & UX/UI Accessibility Enhancements
 * 
 * Standards applied:
 * 1. Prompt Thai Font Legibility: Thai script uses loopless geometry.
 *    Font weight >= 800 causes closed counters and blurred diacritics.
 *    Optimized to: 700 (Bold headings), 600 (Labels/actions), 400-500 (Body).
 *    Weight 900 is reserved strictly for large display numbers/digits.
 * 2. WCAG 2.1 AA Font Size Compliance: Minimum font size >= 12.5px (0.78rem).
 * 3. Line-Height & Vertical Rhythm: >= 1.35 to prevent Thai tone mark clipping.
 * 4. Contrast & Theme Readability: Contrast ratio >= 4.5:1 on light and dark themes.
 */

:root {
  --th-line-height-heading: 1.35;
  --th-line-height-body: 1.5;
  --min-font-size-xs: 0.78rem; /* 12.5px */
  --min-font-size-sm: 0.82rem; /* 13.1px */
  
  /* High-contrast accessible text colors */
  --text-muted-light: #4A5568; /* 5.8:1 on white */
  --text-dim-light: #5A6A80;   /* 4.7:1 on white */
  --text-muted-dark: #CBD5E1;  /* 9.2:1 on dark bg */
  --text-dim-dark: #94A3B8;    /* 6.3:1 on dark bg */
}

/* 1. THAI PROMPT FONT WEIGHT OPTIMIZATION (Prevent counter collapse & blurred tone marks) */
body, input, select, textarea, button {
  font-family: 'Prompt', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Headings: replace weight 900/800 with readable 700 Bold + generous line-height */
.header-title,
.admin-title,
.today-title,
.section-title-wrap h2,
.card-header h3,
.dialog-header h3,
.error-title,
.login-event-title,
.role-title-group h3,
.users-table-head h3,
.logs-title-group h3,
h1, h2, h3, h4 {
  font-weight: 700 !important;
  line-height: var(--th-line-height-heading) !important;
  letter-spacing: normal !important;
}

.header-title {
  padding: 3px 0 !important;
}

/* Team names & Standings text */
.team-name-label,
.standing-team-name,
.team-form-name,
.mcard-team-name,
.pod-team-name,
.current-user-name,
.dossier-display-name,
.mini-team-home,
.mini-team-away,
.match-team-name,
.winrate-text,
.filter-pill-btn,
.winner-label,
.winner-name,
.selected-team-text,
.dash-card-header,
.dash-card-header > span,
.meter-score-row {
  font-weight: 700 !important;
  line-height: var(--th-line-height-heading) !important;
}

.banner-trend-tag,
.banner-winrate-tag,
.banner-winrate-prefix,
.dash-card-points,
.match-wl-badge {
  font-weight: 600 !important;
}

.mini-match-row,
.mini-match-row span {
  font-weight: 500 !important;
}

.mini-match-row strong,
.mini-match-row b {
  font-weight: 600 !important;
}

.banner-pt-label,
.dash-pt-label {
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  opacity: 0.9 !important;
}

/* Action buttons: 700 weight for clear button readability */
.action-btn-primary,
.action-btn-danger,
.action-btn-cancel,
.admin-action-btn,
.admin-submit-btn,
.admin-reset-btn,
.login-submit-btn,
.more-pill-btn,
.btn-role-save,
.btn-role-delete {
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* Form labels, Table headers, Filter labels: 600 SemiBold for clean hierarchy */
th,
.data-table th,
.users-table th,
.logs-table th,
.leaderboard-table th,
.form-group label,
.toolbar-field label,
.score-input-group label,
.form-label-bold,
.filter-group-label,
.perm-group-title,
.switch-title,
.telemetry-card-title h4,
.status-badge,
.tab-label,
.tab-label-th,
.tab-label-en,
.filter-chip,
.mini-sport-tag,
.color-option-pill,
.log-filter-pill,
.user-pill-name,
.admin-user-pill,
.admin-sync-pill,
.admin-logout-btn,
.access-denied-content h3,
.wheel-live-pill,
.role-item-name,
.role-subtab-btn,
.perm-switch-row,
.btn-mob-status,
.team-breakdown-row strong,
.team-breakdown-row span,
.chip-actions button,
.btn-glass-action,
.day-pill,
.day-pill *,
.mcard-sport-pill,
.mcard-sport-pill *,
.live-sync-badge,
.live-sync-badge *,
.mood-pill-btn,
.mood-pill-btn *,
.wheel-controls-group,
.wheel-controls-group *,
.wheel-result-card,
.wheel-result-card *,
#adminWheelCard h3,
#adminWheelCard div,
#adminWheelCard span,
#capsuleSettingsCard h3,
#capsuleSettingsCard div,
#capsuleSettingsCard span,
.day-tab-pill,
.day-tab-pill *,
.mood-pill,
.mood-pill *,
.mood-pill-preview,
.mood-pill-preview *,
.dossier-cred-title,
.dossier-perm-head,
.chart-card-head h3,
.wheel-settings-panel h3,
.perm-category-header,
.match-sport-badge,
.match-sport-badge *,
.btn-add-member-to-role,
.btn-dossier-toggle-pwd,
.btn-dossier-copy,
.preview-username,
.chart-footer-legends .legend-item,
html[data-theme="dark"] .chart-footer-legends .legend-item,
html[data-theme="light"] .chart-footer-legends .legend-item,
.wheel-toggle-row,
.wheel-toggle-row *,
.wheel-winner-display,
.wheel-winner-display *,
strong {
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

html[data-theme="light"] #capsuleSettingsCard .capsule-admin-preview-wrap > div:first-child {
  color: #3F4650 !important;
}

html[data-theme="light"] #capsuleSettingsCard .mood-pill-btn,
#capsuleSettingsCard .mood-pill-btn {
  color: #000000 !important;
  background: #F3F4F6 !important;
  border-color: #9CA3AF !important;
}

html[data-theme="light"] #capsuleSettingsCard .mood-pill-btn span,
#capsuleSettingsCard .mood-pill-btn span {
  color: inherit !important;
}

html[data-theme="light"] #capsuleSettingsCard .mood-pill-btn[data-mood="happy"].is-active {
  color: #0055FF !important;
  background: #E8F1FF !important;
  border-color: #007AFF !important;
}

html[data-theme="light"] #capsuleSettingsCard .mood-pill-btn[data-mood="cheer"].is-active {
  color: #B56500 !important;
  background: #FFF1D6 !important;
  border-color: #FF9500 !important;
}

html[data-theme="light"] #capsuleSettingsCard .mood-pill-btn[data-mood="fire"].is-active {
  color: #C43B33 !important;
  background: #FDE8E7 !important;
  border-color: #FF3B30 !important;
}

html[data-theme="light"] #capsuleSettingsCard .mood-pill-btn[data-mood="relax"].is-active {
  color: #176B36 !important;
  background: #E3F5E8 !important;
  border-color: #34C759 !important;
}

html[data-theme="light"] #capsuleSettingsCard #btnTranslateToEn {
  color: #0757A6 !important;
  background: #E8F1FF !important;
  border-color: #91B9EF !important;
}

html[data-theme="light"] #capsuleSettingsCard #btnTranslateToTh {
  color: #176B36 !important;
  background: #E3F5E8 !important;
  border-color: #8AC99B !important;
}

html[data-theme="dark"] #capsuleSettingsCard .capsule-admin-preview-wrap > div:first-child {
  color: #E5E7EB !important;
}

html[data-theme="dark"] #capsuleSettingsCard .mood-pill-btn {
  color: #F5F7FA !important;
  background: #24262B !important;
  border-color: #626975 !important;
}

html[data-theme="dark"] #capsuleSettingsCard .mood-pill-btn[data-mood="happy"].is-active {
  background: #173B68 !important;
  border-color: #60A5FA !important;
}

html[data-theme="dark"] #capsuleSettingsCard .mood-pill-btn[data-mood="cheer"].is-active {
  background: #553B16 !important;
  border-color: #F5A623 !important;
}

html[data-theme="dark"] #capsuleSettingsCard .mood-pill-btn[data-mood="fire"].is-active {
  background: #572725 !important;
  border-color: #F87171 !important;
}

html[data-theme="dark"] #capsuleSettingsCard .mood-pill-btn[data-mood="relax"].is-active {
  background: #1C4B2D !important;
  border-color: #4ADE80 !important;
}

.perf-title {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.winrate-prefix,
.points-pt-label,
.stat-label,
.user-kpi-label,
.telemetry-label,
.submetric-key,
.formula-label,
.filter-pill-btn,
.filter-group-label,
.wheel-header-tag {
  font-weight: 600 !important;
}

/* Empty state / notice cards: clean 500 weight */
.empty-state-text,
.no-data-notice,
.no-matches-text,
.mini-no-matches,
.mini-match-row-empty,
.mini-match-row-empty span,
.notice-chip-desc {
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.wheel-header-title h3 {
  font-weight: 700 !important;
}

h4,
.telemetry-card-title h4,
.profile-avatar-title,
.roles-selection-title,
.legend-item,
.perm-switch-row strong {
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.wheel-header-tag,
.wheel-header-tag span,
.wheel-spin-center-badge,
.wheel-spin-center-badge span,
.text-muted,
.confirm-modal-subtitle,
.settings-card-tag,
.roles-hierarchy-hint span,
.perm-switch-row span {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.status-pill {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* 2. MINIMUM FONT SIZE ENFORCEMENT (Eliminate unreadable < 12px text) */
.admin-subtitle {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
}

.user-role-pill,
.role-badge,
.role-id-badge,
.discord-role-pill {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.capsule-tag {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  padding: 3px 8px !important;
}

.match-team-current-pts {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 600 !important;
}

.mobile-vs-tag,
.stat-label,
.day-count,
.chip-current-tag,
.current-user-badge-online,
.obs-mvp-star-tag,
.perf-chip-name {
  font-size: var(--min-font-size-xs) !important;
  font-weight: 600 !important;
}

.btn-status-pill,
.telemetry-label,
.chart-tag,
.log-cat-badge,
.log-level-pill,
.user-kpi-label,
.perm-pill,
.dossier-audit-tag,
.dossier-perm-granted,
.dossier-perm-denied,
.preview-label,
.btn-perm-group-toggle,
.btn-xs-glass {
  font-size: var(--min-font-size-sm) !important;
  font-weight: 600 !important;
}

.theme-btn,
.lang-btn,
.circle-action-btn {
  font-size: var(--min-font-size-sm) !important;
  font-weight: 700 !important;
}

/* 3. COLOR CONTRAST & WCAG COMPLIANCE */
/* Light theme accessible text colors */
html[data-theme="light"] .perf-title,
html[data-theme="light"] .perf-chip-name,
html[data-theme="light"] .formula-label,
html[data-theme="light"] .quick-score-title,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .submetric-key,
html[data-theme="light"] .admin-footer-copy,
html[data-theme="light"] .confirm-warning-note,
html[data-theme="light"] .telemetry-label,
html[data-theme="light"] .user-kpi-label,
html[data-theme="light"] .dossier-username,
html[data-theme="light"] .mobile-match-venue-row,
html[data-theme="light"] .match-sport-text,
html[data-theme="light"] .status-upcoming {
  color: var(--text-muted-light) !important;
}

html[data-theme="light"] .mobile-vs-tag,
html[data-theme="light"] .pod-vs-label {
  color: var(--text-dim-light) !important;
}

/* Dark theme accessible text colors */
html[data-theme="dark"] .perf-title,
html[data-theme="dark"] .perf-chip-name,
html[data-theme="dark"] .formula-label,
html[data-theme="dark"] .quick-score-title,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .submetric-key,
html[data-theme="dark"] .admin-footer-copy,
html[data-theme="dark"] .confirm-warning-note,
html[data-theme="dark"] .telemetry-label,
html[data-theme="dark"] .user-kpi-label,
html[data-theme="dark"] .dossier-username,
html[data-theme="dark"] .mobile-match-venue-row,
html[data-theme="dark"] .match-sport-text,
html[data-theme="dark"] .admin-subtitle {
  color: var(--text-muted-dark) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .theme-btn,
html[data-theme="dark"] .lang-btn,
html[data-theme="dark"] .mobile-vs-tag,
html[data-theme="dark"] .pod-vs-label,
html[data-theme="dark"] .btn-status-pill {
  color: #F1F5F9 !important;
}

/* 4. PRESERVE NUMERIC DISPLAY WEIGHT (Score numbers stay heavy & impactful) */
.banner-rank-number,
.banner-points-number,
.mcard-score-num,
.scorepad-score-val,
.pod-score-number,
.mobile-big-score,
.score-number,
.rank-square-box,
.standing-rank-pill,
.standing-total-pts,
.dash-card-points,
.stat-num,
.clock-digits {
  font-weight: 900 !important;
  font-family: 'Outfit', 'Prompt', sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* 5. TRUE OLED BLACK BACKGROUND (Eliminate murky gray backgrounds in dark theme) */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .scorepad-app-container,
html[data-theme="dark"] .admin-container,
html[data-theme="dark"] .app-container {
  background: #000000 !important;
  background-color: #000000 !important;
}