/**
 * Custom Driver.js Theme for HVAC Dashboard
 * Matches the dark dashboard theme
 */

/* Main popover container */
.driver-popover {
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  max-width: 400px !important;
}

/* Title styling */
.driver-popover-title {
  color: #c0c0c0 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 12px !important;
}

/* Description text */
.driver-popover-description {
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Button styling */
.driver-popover-next-btn,
.driver-popover-prev-btn,
.driver-popover-close-btn {
  background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.driver-popover-next-btn:hover,
.driver-popover-prev-btn:hover {
  background: linear-gradient(145deg, #2563eb, #1d4ed8) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

.driver-popover-close-btn {
  background: transparent !important;
  color: #64748b !important;
  padding: 8px !important;
  font-size: 20px !important;
}

.driver-popover-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #c0c0c0 !important;
}

/* Progress indicator */
.driver-popover-progress-text {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Arrow/pointer */
.driver-popover-arrow {
  border-color: #1e293b !important;
}

.driver-popover-arrow-side-left {
  border-left-color: #1e293b !important;
}

.driver-popover-arrow-side-right {
  border-right-color: #1e293b !important;
}

.driver-popover-arrow-side-top {
  border-top-color: #1e293b !important;
}

.driver-popover-arrow-side-bottom {
  border-bottom-color: #1e293b !important;
}

/* Highlight style for active element */
.driver-active-element {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 3px !important;
  border-radius: 8px !important;
}

/* Overlay */
.driver-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
  animation: fadeIn 0.3s ease-out !important;
}

/* Footer buttons container */
.driver-popover-footer {
  display: flex !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid #334155 !important;
}

/* Adjust spacing */
.driver-popover-description + .driver-popover-footer {
  margin-top: 20px !important;
}

/* Animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .driver-popover {
    max-width: 90% !important;
    margin: 20px !important;
  }
  
  .driver-popover-title {
    font-size: 16px !important;
  }
  
  .driver-popover-description {
    font-size: 13px !important;
  }
}