/* ============================================================
   Base Styles — Jama Dashboard
   Applies tokens to global elements, typography, resets
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html, body, [class*="dash-"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Typography utilities */
.text-right { text-align: right; }
.text-center { text-align: center; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Reset Dash defaults */
._dash-loading-callback {
  opacity: 0.4;
  transition: opacity var(--transition-normal);
}

/* Dash dropdown fix for dark mode */
[data-bs-theme="dark"] .Select-control,
[data-bs-theme="dark"] .Select-menu-outer {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
}
[data-bs-theme="dark"] .Select-value-label,
[data-bs-theme="dark"] .Select-placeholder {
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .VirtualizedSelectOption {
  background: var(--bg-surface);
  color: var(--text-primary);
}
[data-bs-theme="dark"] .VirtualizedSelectFocusedOption {
  background: var(--bg-muted);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-full);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--slate-600);
}

/* dbc Alert dark mode fix */
[data-bs-theme="dark"] .alert {
  color: var(--text-primary);
}