/* Custom Shepherd.js styling overrides to match Material Tailwind dialogs */
/* This file is imported AFTER shepherd.css to ensure our styles take precedence */
/* Using CSS custom properties from Tailwind theme instead of @apply */
/* @apply was not included in the final build CSS when used here */

/* Override default Shepherd theme */
.shepherd-element {
  max-width: 600px;
  width: fit-content;
}

/* Style the tour content container like FgDialog */
.shepherd-content {
  padding: 1.5rem;
  background-color: rgb(var(--color-surface-light));
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  border: 1px solid rgb(var(--color-surface));
  min-width: 400px;
}

/* Style the header */
.shepherd-has-title .shepherd-content .shepherd-header {
  background-color: rgb(var(--color-surface-light));
  padding: 0.75rem 0;
  border-bottom: 1px solid rgb(var(--color-surface-dark));
  margin: 0.75rem;
}

/* Dark mode for content and header */
.dark .shepherd-content,
.dark .shepherd-has-title .shepherd-content .shepherd-header {
  background-color: rgb(var(--color-surface));
  border-color: rgb(var(--color-surface-light));
}

/* Style the title */
.shepherd-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  margin: 0;
}

.dark .shepherd-title {
  color: rgb(var(--color-foreground));
}

/* Style the text content */
.shepherd-text {
  color: rgb(var(--color-foreground));
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1.25rem;
}

.dark .shepherd-text {
  color: rgb(var(--color-foreground));
}

/* Style the button container to prevent overflow */
.shepherd-footer {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

/* Style buttons to match Material Tailwind Button component */
.shepherd-button {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius) - 18px);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* Primary button (Next, Submit, Complete) */
.shepherd-button:not(.shepherd-button-secondary) {
  background-color: rgb(var(--color-primary));
  color: rgb(var(--color-primary-foreground));
}

.shepherd-button:not(.shepherd-button-secondary):hover {
  background-color: rgb(var(--color-primary-light));
  color: rgb(var(--color-background));
}

/* Secondary button (Back, Exit) */
.shepherd-button-secondary {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-foreground));
  border: 1px solid rgb(var(--color-surface-dark));
}

.shepherd-button-secondary:hover {
  background-color: rgb(var(--color-surface-dark));
  color: rgb(var(--color-surface-foreground));
}

.dark .shepherd-button-secondary {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-foreground));
  border-color: rgb(var(--color-surface-light));
}

.dark .shepherd-button-secondary:hover {
  background-color: rgb(var(--color-surface-light));
  color: rgb(var(--color-surface-foreground));
}

/* Style the cancel icon in header */
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
  color: rgb(var(--color-secondary));
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 9999px;
  border: 1px solid rgb(var(--color-secondary));
  transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
  width: 2rem;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
  background-color: rgb(var(--color-secondary));
  color: rgb(var(--color-surface));
}

/* Style the arrow pointing to the highlighted element */
.shepherd-element .shepherd-arrow {
  content: url(../../assets/arrow-up.svg);
  display: inline-block;
  transform: scale(1.5);
  z-index: 8888;
}

/* Rotate arrow based on tooltip placement */

/* Left of the target placement: arrow points right (90deg) */
.shepherd-element[data-popper-placement^='left'] .shepherd-arrow {
  transform: scale(1.5) rotate(90deg);
}

/* Top of the target placement: arrow points down (180deg) */
.shepherd-element[data-popper-placement^='top'] .shepherd-arrow {
  transform: scale(1.5) rotate(180deg);
}

/* Right of the target placement: arrow points left (270deg) */
.shepherd-element[data-popper-placement^='right'] .shepherd-arrow {
  transform: scale(1.5) rotate(270deg);
}
