/* custom.css — Tabler/Bootstrap theme overrides */

/* =========================================================
   1) Base theme variables
   ========================================================= */
:root {
  /* Primary (AXING) */
  --tblr-primary: #239592;
  --tblr-primary-rgb: 35, 149, 146; /* MUST match the hex above */
  --tblr-primary-fg: #ffffff;

  /* Other theme colors */
  --tblr-secondary: #64748b;

  --tblr-success: #22c55e;
  --tblr-success-rgb: 34, 197, 94;
  --tblr-success-fg: #ffffff;

  --tblr-info: #06b6d4;
  --tblr-info-rgb: 6, 182, 212;
  --tblr-info-fg: #ffffff;

  --tblr-warning: #f59e0b;
  --tblr-warning-rgb: 245, 158, 11;
  --tblr-warning-fg: #111827; /* better contrast */

  --tblr-danger: #ef4444;
  --tblr-danger-rgb: 239, 68, 68;
  --tblr-danger-fg: #ffffff;
}

/* Optional custom theme key */
[data-bs-theme-primary="axing"] {
  --tblr-primary: #239592;
  --tblr-primary-rgb: 35, 149, 146;
  --tblr-primary-fg: #ffffff;
}

/* =========================================================
   2) Dark mode tuning (Tabler + your theme-dark class)
   ========================================================= */
body.theme-dark,
[data-bs-theme="dark"] {
  --tblr-primary: #239592;
  --tblr-primary-rgb: 35, 149, 146;
  --tblr-primary-fg: #ffffff;

  /* Surfaces */
  --tblr-bg-surface: #1e293b;
  --tblr-bg-surface-secondary: #0f172a;
  --tblr-bg-surface-tertiary: #334155;

  /* Borders / cards */
  --tblr-card-bg: #1e293b;
  --tblr-card-border-color: #334155;

  /* If Tabler uses these */
  --tblr-border-color: #334155;
  --tblr-border-color-dark: #475569;

  /* Text */
  --tblr-body-color: #e5e7eb;
}

/* Navbar in dark mode */
body.theme-dark .navbar,
[data-bs-theme="dark"] .navbar {
  background-color: #0f172a;
  border-bottom: 1px solid #334155;
}

/* Card shadow in dark mode */
body.theme-dark .card,
[data-bs-theme="dark"] .card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/* =========================================================
   3) Badge readability fixes (your main issue)
   ========================================================= */

/* Default: ensure badges always have a readable foreground */
.badge {
  color: #fff;
}

/* Contextual background badges -> use matching fg vars */
.badge.bg-primary     { color: var(--tblr-primary-fg, #fff); }
.badge.bg-success     { color: var(--tblr-success-fg, #fff); }
.badge.bg-info        { color: var(--tblr-info-fg, #fff); }
.badge.bg-danger      { color: var(--tblr-danger-fg, #fff); }
.badge.bg-warning     { color: var(--tblr-warning-fg, #111827); }
.badge.bg-secondary   { color: #fff; }
.badge.bg-dark        { color: #fff; }
.badge.bg-light       { color: #111827; }

/* If you use text-bg-* utilities */
.badge.text-bg-primary   { color: var(--tblr-primary-fg, #fff) !important; }
.badge.text-bg-success   { color: var(--tblr-success-fg, #fff) !important; }
.badge.text-bg-info      { color: var(--tblr-info-fg, #fff) !important; }
.badge.text-bg-danger    { color: var(--tblr-danger-fg, #fff) !important; }
.badge.text-bg-warning   { color: var(--tblr-warning-fg, #111827) !important; }
.badge.text-bg-secondary { color: #fff !important; }
.badge.text-bg-light     { color: #111827 !important; }
.badge.text-bg-dark      { color: #fff !important; }

/* Dark mode: keep consistent */
body.theme-dark .badge,
[data-bs-theme="dark"] .badge {
  color: #fff;
}
body.theme-dark .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning {
  color: #111827;
}

/* =========================================================
   4) ApexCharts tooltip styling
   ========================================================= */
.apexcharts-tooltip {
  background: var(--tblr-bg-surface) !important;
  border: 1px solid var(--tblr-border-color) !important;
  box-shadow: var(--tblr-box-shadow) !important;
  color: var(--tblr-body-color) !important;
}

.apexcharts-tooltip-title {
  background: var(--tblr-bg-surface-tertiary) !important;
  border-bottom: 1px solid var(--tblr-border-color) !important;
  color: var(--tblr-body-color) !important;
}

.apexcharts-tooltip-series-group {
  background: transparent !important;
}

/* Extra dark theme support */
[data-bs-theme="dark"] .apexcharts-tooltip,
.theme-dark .apexcharts-tooltip {
  background: var(--tblr-bg-surface) !important;
  border-color: var(--tblr-border-color-dark) !important;
}