/*
 * 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.
 */

/* ── driver.js / Spoolr theme overrides ── */

.driver-popover {
  font-family: var(--spoolr-font-primary);
  background-color: var(--spoolr-color-card);
  color: var(--spoolr-color-foreground);
  border: 1px solid var(--spoolr-color-border);
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.driver-popover .driver-popover-title {
  font-family: var(--spoolr-font-primary);
  color: var(--spoolr-color-foreground);
  font-weight: 600;
  font-size: 14px;
}

.driver-popover .driver-popover-description {
  font-family: var(--spoolr-font-primary);
  color: var(--spoolr-color-muted-foreground);
  font-size: 13px;
}

.driver-popover .driver-popover-progress-text {
  color: var(--spoolr-color-muted-foreground);
  font-family: var(--spoolr-font-primary);
  font-size: 12px;
}

.driver-popover .driver-popover-next-btn {
  background-color: var(--spoolr-color-primary);
  color: var(--spoolr-color-primary-foreground);
  border: none;
  border-radius: 0;
  font-family: var(--spoolr-font-primary);
  font-weight: 500;
  text-shadow: none;
}

.driver-popover .driver-popover-next-btn:hover {
  background-color: var(--spoolr-color-primary);
  opacity: 0.9;
}

.driver-popover .driver-popover-prev-btn {
  background-color: var(--spoolr-color-secondary);
  color: var(--spoolr-color-foreground);
  border: 1px solid var(--spoolr-color-border);
  border-radius: 0;
  font-family: var(--spoolr-font-primary);
  font-weight: 500;
  text-shadow: none;
}

.driver-popover .driver-popover-prev-btn:hover {
  background-color: var(--spoolr-color-secondary);
  opacity: 0.9;
}

.driver-popover .driver-popover-close-btn {
  color: var(--spoolr-color-muted-foreground);
}

.driver-popover .driver-popover-close-btn:hover {
  color: var(--spoolr-color-foreground);
}

.driver-popover .driver-popover-arrow-side-left .driver-popover-arrow,
.driver-popover .driver-popover-arrow-side-right .driver-popover-arrow,
.driver-popover .driver-popover-arrow-side-top .driver-popover-arrow,
.driver-popover .driver-popover-arrow-side-bottom .driver-popover-arrow {
  border-color: var(--spoolr-color-border);
}

.driver-popover-arrow {
  background-color: var(--spoolr-color-card) !important;
}