/* =========================================================
   card-tooltip — posizionamento, animazione, gestione stati
   Il layout visivo è definito nel template con classi Tailwind
   ========================================================= */

/* ---------- shell ---------- */
.card-tooltip {
  position: absolute;
  opacity: 0;
  transform: scale(0.95);
  transform-origin: left center;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.card-tooltip.is-visible {
  opacity: 1;
  transform: scale(1);
}

.card-tooltip.from-left {
  transform-origin: right center;
}

/* ---------- bottom sheet (mobile) ---------- */
.card-bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.card-bottom-sheet.is-visible {
  opacity: 1;
}

.card-bottom-sheet__panel {
  position: relative;
  border-radius: 1rem 1rem 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  will-change: transform;
  touch-action: pan-y;
}

.card-bottom-sheet.is-visible .card-bottom-sheet__panel {
  transform: translateY(0);
}

.card-bottom-sheet__panel.is-expanded {
  max-height: 90dvh;
  border-radius: 1rem 1rem 0 0;
}

.card-bottom-sheet__handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 9999px;
  margin: 0.5rem auto 0.25rem;
}

/* ---------- mobile floating tooltip ---------- */
.card-mobile-tooltip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 33svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  touch-action: pan-y;
  border-radius: 1rem 1rem 0 0;
}

.card-mobile-tooltip.is-visible {
  transform: translateY(0);
}

.card-mobile-tooltip__handle {
  width: 2.5rem;
  height: 0.3rem;
  border-radius: 9999px;
  margin: 0.5rem auto 0;
  flex-shrink: 0;
}

/* ---------- stati (show/hide sezioni) ---------- */
.card-tooltip--loading .card-tooltip__content,
.card-tooltip--loading .card-tooltip__error { display: none; }

.card-tooltip--done .card-tooltip__skeleton,
.card-tooltip--done .card-tooltip__error    { display: none; }

.card-tooltip--error .card-tooltip__skeleton,
.card-tooltip--error .card-tooltip__content  { display: none; }

/* ---------- stati mobile tooltip ---------- */
.card-mobile-tooltip--loading .card-mobile-tooltip__body,
.card-mobile-tooltip--loading .card-mobile-tooltip__error { display: none; }

.card-mobile-tooltip--done .card-mobile-tooltip__skeleton,
.card-mobile-tooltip--done .card-mobile-tooltip__error    { display: none; }

.card-mobile-tooltip--error .card-mobile-tooltip__skeleton,
.card-mobile-tooltip--error .card-mobile-tooltip__body    { display: none; }

/* ---------- modale desktop: immagine si adatta allo spazio disponibile ---------- */
@media (min-width: 768px) {
  .card-modal .card-image-wrapper {
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
  }

  .card-modal .card-image-wrapper .card-image-grid {
    flex: 1 1 0%;
    min-height: 0;
  }

  .card-modal [data-card-field="cardImage"] {
    max-height: 100%;
    width: auto;
    object-fit: contain;
  }
}

/* ---------- modale: scrollbar nascosta quando non si scrolla ---------- */
.card-modal .overflow-y-auto {
  scrollbar-width: none;          /* Firefox */
}
.card-modal .overflow-y-auto::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

/* ---------- version dropdown: ombre di scroll ---------- */
.version-dropdown--shadow-top {
  box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.15);
}
.version-dropdown--shadow-bottom {
  box-shadow: inset 0 -8px 6px -6px rgba(0, 0, 0, 0.15);
}
.version-dropdown--shadow-top.version-dropdown--shadow-bottom {
  box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.15),
              inset 0 -8px 6px -6px rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
  .version-dropdown--shadow-top {
    box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.4);
  }
  .version-dropdown--shadow-bottom {
    box-shadow: inset 0 -8px 6px -6px rgba(0, 0, 0, 0.4);
  }
  .version-dropdown--shadow-top.version-dropdown--shadow-bottom {
    box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.4),
                inset 0 -8px 6px -6px rgba(0, 0, 0, 0.4);
  }
}

/* ---------- version dropdown: scrollbar sempre visibile ---------- */
.card-modal .overflow-y-scroll {
  scrollbar-width: thin;          /* Firefox */
}
.card-modal .overflow-y-scroll::-webkit-scrollbar {
  display: block;
  width: 6px;
}
.card-modal .overflow-y-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.card-modal .overflow-y-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
  .card-modal .overflow-y-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
  }
}