/* HR Analytics Suite - Custom Styles & Power BI / Excel Aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary-accent: #d97706;
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #475569;
}

html.dark {
  --bg-main: #0f172a;
  --card-bg: #1e293b;
  --border-color: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Strict Text Contrast Rules: Light BG = Dark Text, Dark BG = Light/White Text */
html:not(.dark) body {
  color: #0f172a;
}
html.dark body {
  color: #f8fafc;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Slim scrollbar for sidebar navigation */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
html.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background: #334155;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Form Controls Strict Contrast */
select, input, textarea {
  color: #0f172a !important;
  background-color: #ffffff !important;
}
select option {
  color: #0f172a !important;
  background-color: #ffffff !important;
}

html.dark select, 
html.dark input, 
html.dark textarea {
  color: #f8fafc !important;
  background-color: #1e293b !important;
}
html.dark select option {
  color: #f8fafc !important;
  background-color: #1e293b !important;
}

/* KPI Cards */
.kpi-card {
  min-width: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Chart Cards - STRICT CONTAINMENT to prevent Grid blowout */
.chart-card {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chart-card:hover {
  border-color: #cbd5e1;
}
html.dark .chart-card:hover {
  border-color: #475569;
}

/* Direct child containers inside chart-card */
.chart-card > div {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* ApexCharts Canvas Strict Width & Responsive Override */
.apexcharts-canvas {
  margin: 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  direction: ltr !important;
}

.apexcharts-canvas svg {
  max-width: 100% !important;
}

/* Ensure chart containers always have minimum height for ApexCharts calculation */
.chart-card > div[id^="chart_"],
.chart-card > div[id^="battery_"],
.chart-card > div[id^="map_"] {
  min-height: 280px;
  width: 100%;
}

/* ========================================================
   APEXCHARTS TOOLBAR & HAMBURGER MENU STRICT TEXT CONTRAST 
   (Fixes white-text-on-white-bg bug in dark mode)
   ======================================================== */
.apexcharts-menu {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
  padding: 6px !important;
  z-index: 9999 !important;
  min-width: 140px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;
}

.apexcharts-menu.apexcharts-menu-open {
  opacity: 1 !important;
  pointer-events: all !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.apexcharts-menu-item {
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.apexcharts-menu-item:hover {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

/* Dark mode menu dropdown */
html.dark .apexcharts-menu {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

html.dark .apexcharts-menu-item {
  color: #f8fafc !important;
}

html.dark .apexcharts-menu-item:hover {
  background: #334155 !important;
  color: #fbbf24 !important;
}

/* Toolbar icons */
.apexcharts-toolbar {
  z-index: 10 !important;
}
.apexcharts-toolbar svg {
  fill: #64748b !important;
  transition: fill 0.15s ease !important;
}
.apexcharts-toolbar svg:hover {
  fill: #d97706 !important;
}
html.dark .apexcharts-toolbar svg {
  fill: #94a3b8 !important;
}
html.dark .apexcharts-toolbar svg:hover {
  fill: #fbbf24 !important;
}

/* ========================================================
   APEXCHARTS TOOLTIP STRICT TEXT CONTRAST 
   ======================================================== */
.apexcharts-tooltip {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  z-index: 100 !important;
}

.apexcharts-tooltip-title {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.apexcharts-tooltip-series-group {
  color: #0f172a !important;
}

.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.dark .apexcharts-tooltip {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

html.dark .apexcharts-tooltip-title {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #334155 !important;
}

html.dark .apexcharts-tooltip-series-group {
  color: #f8fafc !important;
}

html.dark .apexcharts-tooltip-text-y-label,
html.dark .apexcharts-tooltip-text-y-value {
  color: #f8fafc !important;
}

/* ========================================================
   APEXCHARTS AXIS LABELS, TITLES, LEGENDS & DATA LABELS
   Strict Contrast: Dark mode = Bright White/Slate (#f8fafc)
                   Light mode = Deep Charcoal (#0f172a)
   ======================================================== */
.apexcharts-text {
  font-family: inherit !important;
}

/* Base text color in dark mode */
html.dark .apexcharts-text,
html.dark .apexcharts-text tspan,
html.dark .apexcharts-xaxis text,
html.dark .apexcharts-xaxis tspan,
html.dark .apexcharts-yaxis text,
html.dark .apexcharts-yaxis tspan,
html.dark .apexcharts-xaxis-label,
html.dark .apexcharts-yaxis-label,
html.dark .apexcharts-xaxis-texts-g text,
html.dark .apexcharts-xaxis-texts-g tspan,
html.dark .apexcharts-yaxis-texts-g text,
html.dark .apexcharts-yaxis-texts-g tspan,
html.dark .apexcharts-xaxis-title text,
html.dark .apexcharts-yaxis-title text,
html.dark .apexcharts-title-text,
html.dark .apexcharts-subtitle-text,
html.dark .apexcharts-legend-text,
html.dark .apexcharts-pie-label,
html.dark .apexcharts-datalabels-group text {
  fill: #f8fafc !important;
  color: #f8fafc !important;
}

/* Base text color in light mode */
html:not(.dark) .apexcharts-text,
html:not(.dark) .apexcharts-text tspan,
html:not(.dark) .apexcharts-xaxis text,
html:not(.dark) .apexcharts-xaxis tspan,
html:not(.dark) .apexcharts-yaxis text,
html:not(.dark) .apexcharts-yaxis tspan,
html:not(.dark) .apexcharts-xaxis-label,
html:not(.dark) .apexcharts-yaxis-label,
html:not(.dark) .apexcharts-xaxis-texts-g text,
html:not(.dark) .apexcharts-xaxis-texts-g tspan,
html:not(.dark) .apexcharts-yaxis-texts-g text,
html:not(.dark) .apexcharts-yaxis-texts-g tspan,
html:not(.dark) .apexcharts-xaxis-title text,
html:not(.dark) .apexcharts-yaxis-title text,
html:not(.dark) .apexcharts-title-text,
html:not(.dark) .apexcharts-subtitle-text,
html:not(.dark) .apexcharts-legend-text,
html:not(.dark) .apexcharts-datalabels-group text {
  fill: #0f172a !important;
  color: #0f172a !important;
}

/* Axis border & tick lines contrast */
html.dark .apexcharts-xaxis line,
html.dark .apexcharts-yaxis line,
html.dark .apexcharts-xaxis-tick {
  stroke: #475569 !important;
}

html.dark .apexcharts-gridline,
html.dark .apexcharts-grid-borders line {
  stroke: #334155 !important;
}

html:not(.dark) .apexcharts-xaxis line,
html:not(.dark) .apexcharts-yaxis line,
html:not(.dark) .apexcharts-xaxis-tick {
  stroke: #cbd5e1 !important;
}

html:not(.dark) .apexcharts-gridline,
html:not(.dark) .apexcharts-grid-borders line {
  stroke: #e2e8f0 !important;
}

/* Slicer Box */
.slicer-box {
  min-width: 0;
  transition: box-shadow 0.2s ease;
}

/* ========================================================
   LEAFLET MAP & TOOLTIPS (INDIAN POLITICAL MAP)
   ======================================================== */
.leaflet-container {
  font-family: inherit !important;
  z-index: 10;
  max-width: 100% !important;
  width: 100% !important;
  background: #e0f2fe !important; /* Soft ocean background */
  outline: none;
}

html.dark .leaflet-container {
  background: #0a0f1d !important; /* Deep dark ocean background */
}

/* Indian State Hover Tooltip */
.map-state-tooltip {
  background: rgba(15, 23, 42, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid #475569 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  border-top-color: rgba(15, 23, 42, 0.95) !important;
}

/* Leaflet City Marker Popup */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
}

.leaflet-popup-content {
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 12px 14px !important;
}

html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

html.dark .leaflet-popup-content {
  color: #f8fafc !important;
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile responsive fine-tuning */
@media (max-width: 640px) {
  .chart-card {
    padding: 0.75rem !important;
  }
}

/* ========================================================
   METABASE-INSPIRED ANALYTICS UPGRADES
   ======================================================== */
.badge-pulse {
  position: relative;
}
.badge-pulse::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background-color: #f59e0b;
  border-radius: 9999px;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Metabase Data Model & Query Builder Table Styling */
#qbTableContainer table tr:hover td,
.data-profiler-table tr:hover td {
  background-color: rgba(99, 102, 241, 0.04);
}
html.dark #qbTableContainer table tr:hover td,
html.dark .data-profiler-table tr:hover td {
  background-color: rgba(99, 102, 241, 0.12);
}