/* shepherd.tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Tooltip card */
  .shepherd-element {
    @apply rounded-xl border bg-white text-gray-900 shadow-xl;
    box-sizing: border-box;                 /* added */
    max-width: clamp(280px, 92vw, 420px);
    z-index: 99999;
  }
  .shepherd-element[data-popper-placement]::before,
  .shepherd-element[data-popper-placement]::after {
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.shepherd-running .tooltip,
  body.shepherd-running [role="tooltip"],
  body.shepherd-running [id^="tooltip-"],
  body.shepherd-running [data-tooltip-target] + [role="tooltip"] {
    display: none !important;
  }

  .dark .shepherd-element { @apply bg-gray-800 border-gray-700 text-gray-200; }

  .shepherd-header { @apply border-b border-gray-100 px-4 py-3; }
  .dark .shepherd-header { @apply border-gray-700; }

  .shepherd-title { @apply text-base font-bold m-0; }
  .shepherd-text  { @apply p-4 leading-6 text-[0.95rem]; }

  .shepherd-footer { @apply flex gap-2 px-4 pt-3 pb-4; }
  .shepherd-button {
    @apply rounded-full px-4 py-2 font-semibold border border-transparent bg-blue-600 text-white hover:bg-blue-700
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500;
  }
  .shepherd-button.shepherd-button-secondary {
    @apply bg-transparent text-gray-900 border-gray-200 dark:text-gray-200 dark:border-gray-700;
  }

  .shepherd-cancel-icon { @apply text-gray-500 hover:text-gray-900 dark:hover:text-gray-100; }
  .shepherd-cancel-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* added */


  /* Overlay */
  .shepherd-modal-overlay-container {
    z-index: 99998;
    /* pointer-events: auto;   <- remove (default is fine) */
    /* touch-action: none;     <- remove to allow natural gestures */
  }

  /* Keep long content from pushing arrow off-target */
  .shepherd-content {
    max-height: calc(100vh - 160px);
    overflow: auto;
  }
}

/* JS‑toggled helpers (CSP-safe) */
html.tour-no-smooth { scroll-behavior: auto !important; }
html.tour-no-overscroll,
body.tour-no-overscroll { overscroll-behavior: contain !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; } /* slightly narrower target */
}

/* 1) Define a tooltip background var once */
.shepherd-element { --tt-bg: #e6e6e6; }         /* light */

/* 2) Force the arrow element to use that color */
.shepherd-element .shepherd-arrow,
.shepherd-element [data-popper-arrow] {
  color: var(--tt-bg) !important;
  width: 10px; height: 10px;
}

/* 3) Remove any vendor triangles/shadows so only one arrow shows */
.shepherd-element .shepherd-arrow::before,
.shepherd-element .shepherd-arrow::after,
.shepherd-element [data-popper-arrow]::before,
.shepherd-element [data-popper-arrow]::after {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) Draw one diamond that matches the tooltip bg */
.shepherd-element .shepherd-arrow::before,
.shepherd-element [data-popper-arrow]::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  background: currentColor; /* = var(--tt-bg) */
}