/*
╔══════════════════════════════════════════════════════════════════════════════╗
║ AIDEV-NOTE: dashboard-charts.css - Budget Charts Grid Layout (TASK-039)     ║
║ Purpose: Responsive 2×2 grid layout for budget waterfall charts             ║
║ Features: Grid layout, chart card styling, responsive breakpoints           ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/

/* ========================================================================== */
/* Budget Charts Grid (2×2)                                                   */
/* ========================================================================== */

.budget-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 2.5rem; /* Space between cards - increased 25% from 2rem */
  margin-top: 1.5rem;
}

/* AIDEV-NOTE: TASK-067 - Scenario comparison section grid layout (2x2 grid, identical to budget-charts-grid) */
.scenario-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 2.5rem; /* Space between cards - matches budget-charts-grid */
  margin-top: 1.5rem;
}

/* ========================================================================== */
/* Chart Card Styling                                                         */
/* ========================================================================== */

/* AIDEV-NOTE: chart-card is reusable container for all chart types */
.chart-card {
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* Hover effect for interactivity */
.chart-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Chart title styling */
.chart-card .chart-title {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  border-bottom: 2px solid var(--border-color, #e0e0e0);
  padding-bottom: 0.5rem;
}

/* Chart container */
.chart-container {
  min-height: 300px;
  position: relative;
  /* AIDEV-NOTE: TASK-048 - Changed from 'hidden' to 'visible' to show waterfall chart X-axis labels */
  overflow: visible;
}

/* Loading state for charts */
.chart-container.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #95a5a6);
}

.chart-container.loading::after {
  content: "Carregando dados...";
  font-size: 0.875rem;
}

/* Empty state for charts */
.chart-container.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #95a5a6);
  background: var(--bg-tertiary, #f8f9fa);
  border: 2px dashed var(--border-color, #e0e0e0);
  border-radius: 4px;
}

.chart-container.empty::after {
  content: "Aguardando dados...";
  font-size: 0.875rem;
}

/* ========================================================================== */
/* Responsive Breakpoints                                                     */
/* ========================================================================== */

/* Tablet and smaller: Single column */
@media (max-width: 1024px) {
  .budget-charts-grid {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 1.5rem;
  }

  /* AIDEV-NOTE: TASK-067 - Responsive scenario comparison grid */
  .scenario-comparison-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .chart-card {
    padding: 1.25rem;
  }

  .chart-card .chart-title {
    font-size: 1rem;
  }

  .chart-container {
    min-height: 280px; /* Slightly smaller */
  }
}

/* Mobile: Optimized for small screens */
@media (max-width: 768px) {
  .budget-charts-grid {
    gap: 1rem;
  }

  /* AIDEV-NOTE: TASK-067 - Mobile scenario comparison grid */
  .scenario-comparison-grid {
    gap: 1rem;
  }

  .chart-card {
    padding: 1rem;
    border-radius: 6px;
  }

  .chart-card .chart-title {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
  }

  .chart-container {
    min-height: 250px;
  }

  /* Remove hover effects on touch devices */
  .chart-card:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

/* Print optimizations */
@media print {
  .budget-charts-grid {
    display: block;
  }

  .chart-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #333;
    margin-bottom: 1rem;
  }

  .chart-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ========================================================================== */
/* Additional Layout Utilities                                                */
/* ========================================================================== */

/* Section title styling */
.chart-section .section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--primary-color, #3498db);
}

/* 2-column grid variant (for financial charts section) */
.chart-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem; /* Increased 25% from 2rem */
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .chart-grid-2col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ========================================================================== */
/* Chart-specific Enhancements                                                */
/* ========================================================================== */

/* Waterfall chart connectors (already styled in charts.css, but ensure compatibility) */
.waterfall-chart .connector-line {
  stroke: var(--connector-color, #95a5a6);
  stroke-width: 2;
  stroke-dasharray: 4;
}

/* Value labels on charts */
.chart-value-label {
  font-size: 0.75rem;
  font-weight: 600;
  fill: var(--text-primary, #2c3e50);
}

/* Legend positioning for grid layout */
.chart-legend {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ========================================================================== */
/* Accessibility Improvements                                                 */
/* ========================================================================== */

/* Focus styles for keyboard navigation */
.chart-card:focus-within {
  outline: 2px solid var(--primary-color, #3498db);
  outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .chart-card {
    border-width: 2px;
  }

  .chart-card .chart-title {
    border-bottom-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .chart-card {
    transition: none;
  }

  .chart-card:hover {
    transform: none;
  }
}