/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom Device Marker Styles */
.custom-device-marker {
  background: transparent !important;
  border: none !important;
}

.custom-device-marker:hover {
  z-index: 1000 !important;
}

/* Map container responsive styles */
.map-container {
  min-height: 400px;
}

/* Device legend item hover and active states */
.device-legend-item: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);
}

.device-legend-item:active {
  transform: translateY(0);
}

/* Active device legend item */
.device-legend-item.bg-blue-50 {
  border-color: #3B82F6 !important;
  background-color: #EFF6FF !important;
}

/* Accordion styles */
.accordion-content {
  transition: all 0.3s ease-in-out;
}

.accordion-content.hidden {
  max-height: 0;
  overflow: hidden;
}

.accordion-content:not(.hidden) {
  max-height: 1000px;
}

.accordion-icon.rotated {
  transform: rotate(180deg);
}