/**
 * Dashboard Chart Container Styles
 * 
 * This stylesheet provides Tailwind-based utility classes for chart containers
 * ensuring responsive sizing, consistent styling, and aspect ratio maintenance.
 */

/* Chart Container Base Styles */
.chart-container {
  @apply bg-white rounded-lg shadow border border-gray-200 p-6;
}

/* Responsive Canvas Sizing */
.chart-canvas {
  @apply w-full h-auto;
}

/* Chart Container with Aspect Ratio */
.chart-container-aspect {
  @apply relative w-full;
  aspect-ratio: 16 / 9;
}

.chart-container-aspect canvas {
  @apply absolute inset-0 w-full h-full;
}

/* Square Aspect Ratio for Ring/Donut Charts */
.chart-container-square {
  @apply relative w-full;
  aspect-ratio: 1 / 1;
}

.chart-container-square canvas {
  @apply absolute inset-0 w-full h-full;
}

/* Responsive Chart Height Utilities */
@media (max-width: 640px) {
  .chart-container {
    @apply p-4;
  }
  
  .chart-container-aspect {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .chart-container-aspect {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1025px) {
  .chart-container-aspect {
    aspect-ratio: 16 / 9;
  }
}

/* Chart Title Styling */
.chart-title {
  @apply text-lg font-semibold text-gray-900 mb-4;
}

/* Chart Legend Styling */
.chart-legend {
  @apply mt-6 flex justify-center gap-6 flex-wrap;
}

.chart-legend-item {
  @apply flex items-center gap-2;
}

.chart-legend-color {
  @apply w-4 h-4 rounded-full;
}

.chart-legend-label {
  @apply text-sm text-gray-700;
}

/* Subtle Border and Shadow Utilities */
.chart-border {
  @apply border border-gray-200;
}

.chart-shadow {
  @apply shadow;
}

/* Responsive Padding */
.chart-padding {
  @apply p-6;
}

@media (max-width: 640px) {
  .chart-padding {
    @apply p-4;
  }
}

/* Chart Container Flex Layout */
.chart-flex-center {
  @apply flex flex-col items-center;
}

/* Ensure Charts Maintain Aspect Ratio on Resize */
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive Grid for Chart Containers */
.charts-grid {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
}

.charts-grid-full {
  @apply grid grid-cols-1 gap-6;
}

@media (max-width: 640px) {
  .charts-grid {
    @apply gap-4;
  }
}

/* Chart Container Hover Effects */
.chart-container-interactive:hover {
  @apply shadow-lg transition-shadow duration-200;
}

/* Loading State for Charts */
.chart-loading {
  @apply opacity-50 pointer-events-none;
}

/* Error State for Charts */
.chart-error {
  @apply bg-red-50 border border-red-200;
}

.chart-error-message {
  @apply text-red-800 text-sm;
}


/**
 * Filter Panel Styles
 * 
 * Styling for the filter panel container, input fields, buttons, and active filter indicators.
 * Ensures keyboard accessibility with focus states and proper visual feedback.
 */

/* Filter Panel Container */
.filter-panel {
  @apply bg-white rounded-lg shadow border border-gray-200 p-6 mb-6;
}

.filter-panel-content {
  @apply flex flex-col gap-4;
}

/* Filter Controls Grid */
.filter-controls {
  @apply grid grid-cols-1 md:grid-cols-3 gap-4 items-end;
}

/* Date Range Input Fields */
.filter-input-group {
  @apply flex flex-col;
}

.filter-input-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.filter-input {
  @apply border border-gray-300 rounded px-3 py-2 text-gray-900 placeholder-gray-400;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  @apply transition-colors duration-200;
}

.filter-input:disabled {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed;
}

/* Service Type Dropdown */
.filter-select {
  @apply border border-gray-300 rounded px-3 py-2 text-gray-900 bg-white;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  @apply transition-colors duration-200;
  @apply appearance-none cursor-pointer;
}

.filter-select:disabled {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed;
}

/* Filter Buttons Container */
.filter-buttons {
  @apply flex gap-3 flex-wrap;
}

/* Apply Filters Button */
.filter-button-apply {
  @apply bg-blue-600 text-white px-4 py-2 rounded font-medium;
  @apply hover:bg-blue-700 active:bg-blue-800;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  @apply transition-colors duration-200;
  @apply disabled:bg-gray-400 disabled:cursor-not-allowed;
}

/* Clear Filters Button */
.filter-button-clear {
  @apply bg-gray-200 text-gray-800 px-4 py-2 rounded font-medium;
  @apply hover:bg-gray-300 active:bg-gray-400;
  @apply focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  @apply transition-colors duration-200;
  @apply disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed;
}

/* Active Filters Display Section */
.active-filters {
  @apply mt-4 pt-4 border-t border-gray-200;
}

.active-filters-label {
  @apply text-sm font-medium text-gray-700 mb-3 block;
}

.active-filters-list {
  @apply flex flex-wrap gap-2;
}

/* Active Filter Indicator Badge */
.active-filter-badge {
  @apply inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium;
  @apply border border-blue-200;
}

.active-filter-badge-remove {
  @apply ml-1 cursor-pointer hover:text-blue-900 font-bold;
  @apply focus:outline-none focus:ring-1 focus:ring-blue-500 rounded;
}

/* Empty Active Filters State */
.active-filters-empty {
  @apply text-sm text-gray-500 italic;
}

/* Responsive Filter Panel */
@media (max-width: 640px) {
  .filter-panel {
    @apply p-4;
  }

  .filter-controls {
    @apply grid-cols-1;
  }

  .filter-buttons {
    @apply flex-col;
  }

  .filter-button-apply,
  .filter-button-clear {
    @apply w-full;
  }
}

/* Keyboard Focus Accessibility */
.filter-input:focus,
.filter-select:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

.filter-button-apply:focus,
.filter-button-clear:focus {
  @apply outline-none ring-2 ring-offset-2;
}

/* Focus indicators for all interactive elements */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus {
    @apply ring-4 ring-offset-4;
  }
}

/* Loading State for Filter Panel */
.filter-panel-loading {
  @apply opacity-60 pointer-events-none;
}

/* Error State for Filter Inputs */
.filter-input-error {
  @apply border-red-500 focus:ring-red-500;
}

.filter-input-error-message {
  @apply text-red-600 text-xs mt-1;
}

/* Success State for Filter Application */
.filter-success-indicator {
  @apply text-green-600 text-sm font-medium;
}

/**
 * Accessibility Utilities
 * 
 * Screen reader only and focus visible utilities for keyboard navigation
 * and accessibility features.
 */

/* Skip to content link styling */
.sr-only {
  @apply absolute w-1 h-1 p-0 -m-1 overflow-hidden clip-path-inset-50 whitespace-nowrap border-0;
}

.sr-only:focus,
.focus\:not-sr-only:focus {
  @apply static w-auto h-auto p-4 m-0 overflow-visible clip-path-auto whitespace-normal;
  @apply bg-blue-600 text-white z-50 rounded;
  @apply outline-none ring-2 ring-offset-2 ring-blue-700;
}

/* Focus visible for keyboard navigation */
.focus-visible:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    @apply animate-none transition-none;
  }
}

/* High contrast mode support for better visibility */
@media (prefers-contrast: more) {
  .chart-container,
  .filter-panel {
    @apply border-2 border-gray-900;
  }
  
  button {
    @apply border-2 border-current;
  }
}

/**
 * Enhanced Accessibility Features
 * 
 * Comprehensive focus indicators, color contrast improvements, and visual indicators
 * for color-coded elements to ensure WCAG AA compliance.
 */

/* Enhanced Focus Indicators for All Interactive Elements */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="link"]:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Focus indicators with high contrast mode */
@media (prefers-contrast: more) {
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus,
  [role="button"]:focus,
  [role="link"]:focus {
    @apply ring-4 ring-offset-4 ring-blue-700;
  }
}

/* Stat Card Color Coding with Left Border for Visual Distinction */
.stat-card-danger {
  @apply bg-red-50 border-l-4 border-red-600;
}

.stat-card-warning {
  @apply bg-yellow-50 border-l-4 border-yellow-600;
}

.stat-card-success {
  @apply bg-green-50 border-l-4 border-green-600;
}

/* Ensure text labels are visible on all backgrounds */
.stat-card-danger .stat-label {
  @apply text-red-700 font-semibold;
}

.stat-card-warning .stat-label {
  @apply text-yellow-700 font-semibold;
}

.stat-card-success .stat-label {
  @apply text-green-700 font-semibold;
}

/* Icon and Text Label Combination for Color-Coded Elements */
.color-coded-indicator {
  @apply flex items-center gap-2 font-semibold;
}

.color-coded-icon {
  @apply text-lg;
}

.color-coded-text {
  @apply text-sm;
}

/* Feedback Heatmap Cell Accessibility */
.feedback-cell {
  @apply rounded p-3 text-center transition-all hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer;
}

.feedback-cell-very-high {
  @apply bg-red-700 text-white;
}

.feedback-cell-high {
  @apply bg-red-500 text-white;
}

.feedback-cell-medium {
  @apply bg-red-300 text-gray-900;
}

.feedback-cell-low {
  @apply bg-red-100 text-gray-900;
}

/* Frequency Legend Items with Focus States */
.frequency-legend-item {
  @apply flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 rounded px-2 py-1;
}

.frequency-legend-indicator {
  @apply w-4 h-4 rounded;
}

/* Chart Legend Items with Enhanced Focus */
.chart-legend-item {
  @apply flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 rounded px-2 py-1;
}

/* Skip to Content Link - Enhanced Styling */
.skip-to-content {
  @apply sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-blue-600 focus:text-white focus:rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-700;
}

/* Keyboard Navigation Indicator */
.keyboard-focus-visible:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Color Contrast Utilities for WCAG AA Compliance */
/* Green (#10B981) - Sufficient contrast with white and dark text */
.text-semantic-success {
  @apply text-green-700;
}

.bg-semantic-success {
  @apply bg-green-50;
}

.bg-semantic-success-dark {
  @apply bg-green-600;
}

/* Yellow (#F59E0B) - Sufficient contrast with dark text */
.text-semantic-warning {
  @apply text-yellow-700;
}

.bg-semantic-warning {
  @apply bg-yellow-50;
}

.bg-semantic-warning-dark {
  @apply bg-yellow-600;
}

/* Red (#EF4444) - Sufficient contrast with white and dark text */
.text-semantic-danger {
  @apply text-red-700;
}

.bg-semantic-danger {
  @apply bg-red-50;
}

.bg-semantic-danger-dark {
  @apply bg-red-600;
}

/* Gray (#6B7280) - Sufficient contrast for neutral states */
.text-semantic-neutral {
  @apply text-gray-700;
}

.bg-semantic-neutral {
  @apply bg-gray-50;
}

/* Ensure sufficient color contrast for all text */
.high-contrast-text {
  @apply font-semibold;
}

/* Focus indicator for form elements with error state */
.filter-input-error:focus {
  @apply outline-none ring-2 ring-red-500 ring-offset-2;
}

/* Ensure buttons have sufficient color contrast */
button {
  @apply font-medium;
}

button:disabled {
  @apply opacity-60 cursor-not-allowed;
}

/* Ensure links have sufficient color contrast */
a {
  @apply text-blue-600 underline;
}

a:visited {
  @apply text-purple-600;
}

a:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Ensure form labels have sufficient contrast */
label {
  @apply font-medium text-gray-900;
}

/* Ensure placeholder text has sufficient contrast */
::placeholder {
  @apply text-gray-500;
}

/* Ensure disabled form elements are visually distinct */
input:disabled,
select:disabled,
textarea:disabled {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed;
}

/* Ensure focus indicators are visible on all backgrounds */
@media (prefers-color-scheme: dark) {
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus,
  [role="button"]:focus,
  [role="link"]:focus {
    @apply ring-yellow-400 ring-offset-gray-900;
  }
}

/* Ensure text is readable with sufficient line height */
body {
  @apply leading-relaxed;
}

/* Ensure sufficient spacing between interactive elements */
button + button,
a + a {
  @apply ml-2;
}

/* Ensure focus indicators are not hidden by overflow */
.overflow-hidden:focus {
  @apply overflow-visible;
}