/* Site Productivity Dashboard Styles */

.productivity-container {
  min-height: calc(100vh - 200px);
}

/* Form styling */
.productivity-container input[type="number"],
.productivity-container select {
  border: 1px solid #cbd5e1;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.productivity-container input[type="number"]:focus,
.productivity-container select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

/* Map container */
.location-map-container {
  position: relative;
}

#location-map {
  z-index: 1;
}

/* Chart containers */
#windSpeedChart,
#windDistributionChart,
#precipitationChart {
  max-width: 100%;
}

/* Summary card hover effect */
.productivity-container .grid > div {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.productivity-container .grid > div:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Loading spinner */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Details/summary styling */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: '+';
  display: inline-block;
  width: 1em;
  margin-right: 0.5em;
  transition: transform 0.2s;
}

details[open] summary::before {
  content: '-';
}

/* Print styles */
@media print {
  .productivity-container {
    padding: 0;
  }

  .productivity-container aside {
    display: none;
  }

  .productivity-container main {
    grid-column: span 12;
  }

  .bg-white {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
  }

  button {
    display: none;
  }

  /* Ensure charts print properly */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Page breaks */
  .bg-white.rounded-xl {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .productivity-container aside {
    position: static;
  }
}

/* Leaflet map marker customization */
.leaflet-marker-icon {
  filter: hue-rotate(200deg);
}

/* Table styling in precipitation section */
.productivity-container table {
  border-collapse: collapse;
}

.productivity-container table th,
.productivity-container table td {
  padding: 0.5rem 0.75rem;
}

.productivity-container table tbody tr:hover {
  background-color: #f8fafc;
}