/*
 * Kit v2 - bibliotecas de terceiros usadas pelas paginas no tema tki,
 * legiveis no claro e no escuro. Aqui: ApexCharts (eixos, grade, legenda,
 * dica, menu) e o simple-datatables. SweetAlert2 fica em modais.css,
 * flatpickr em formularios.css, DataTables/paginacao em tabelas.css.
 * Nas paginas da v2, prefira as cores de TKI.kit.coresGrafico() nas opcoes
 * do grafico; estas regras garantem o minimo quando a pagina fixa cores.
 */

/* ---------------------------------------------------------- ApexCharts */

html.tki-layout .apexcharts-canvas { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important; }
html.tki-layout .apexcharts-legend-text { color: var(--tki-fg-2) !important; font-family: inherit !important; }
html.tki-layout .apexcharts-title-text,
html.tki-layout .apexcharts-subtitle-text { fill: var(--tki-fg); }
html.tki-layout .apexcharts-menu {
  background: var(--tki-card) !important;
  border: 1px solid var(--tki-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--tki-shadow-pop);
  color: var(--tki-fg);
}
html.tki-layout .apexcharts-menu-item:hover { background: var(--tki-hover) !important; }
html.tki-layout .apexcharts-toolbar svg { fill: var(--tki-muted); }

/* Dica padrao (sem o .tki-tip do dashboard) */
html.tki-layout .apexcharts-tooltip {
  border-radius: 10px !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.25) !important;
}
html.tki-layout .apexcharts-tooltip-title {
  font-family: inherit !important;
  font-weight: 600;
}

/* Escuro: eixos, grade e dica na superficie escura. Os graficos gravam a
   cor como atributo fill; CSS vence o atributo. */
html.tki-layout[data-bs-theme='dark'] :is(.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-xaxis-title-text, .apexcharts-yaxis-title-text) {
  fill: #9aa3b2;
}
html.tki-layout[data-bs-theme='dark'] .apexcharts-gridline,
html.tki-layout[data-bs-theme='dark'] .apexcharts-xaxis-tick { stroke: rgba(255, 255, 255, 0.08); }
html.tki-layout[data-bs-theme='dark'] :is(.apexcharts-datalabel-label, .apexcharts-datalabel-value, .apexcharts-pie-label) { fill: #f3f4f6; }
html.tki-layout[data-bs-theme='dark'] .apexcharts-tooltip,
html.tki-layout[data-bs-theme='dark'] .apexcharts-tooltip.apexcharts-theme-light,
html.tki-layout[data-bs-theme='dark'] .apexcharts-tooltip.apexcharts-theme-dark {
  background: #1c1f25 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f3f4f6 !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7) !important;
}
html.tki-layout[data-bs-theme='dark'] .apexcharts-tooltip-title {
  background: #23262d !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}
html.tki-layout[data-bs-theme='dark'] .apexcharts-tooltip-text,
html.tki-layout[data-bs-theme='dark'] .apexcharts-tooltip-text-y-label,
html.tki-layout[data-bs-theme='dark'] .apexcharts-tooltip-text-y-value { color: #f3f4f6 !important; }

/* ---------------------------------------------------- simple-datatables */

html.tki-layout .datatable-table > thead > tr > th {
  background: var(--tki-surface-2);
  color: var(--tki-muted);
  border-bottom: 1px solid var(--tki-border);
}
html.tki-layout .datatable-table > tbody > tr > td { border-bottom: 1px solid var(--tki-border); color: var(--tki-fg-2); }
html.tki-layout .datatable-sorter::before { border-top-color: var(--tki-muted); }
html.tki-layout .datatable-sorter::after { border-bottom-color: var(--tki-muted); }
html.tki-layout .datatable-empty { color: var(--tki-muted); }