/* Application styles - Tailwind is compiled separately via tailwindcss-rails */

#filter-drawer:checked ~ .lineup-filter-drawer {
  translate: 0 0 !important;
}

.artist-detail-dialog {
  margin: auto;
}

/* List view: hide detail info in default grid view, show in list mode */
.list-detail {
  display: none;
}

[data-view="list"] .card {
  flex-direction: row;
  align-items: center;
}

[data-view="list"] .card figure {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: auto;
}

[data-view="list"] .card .card-body {
  padding: 0.25rem 0.5rem;
  flex: none;
}

[data-view="list"] .list-detail {
  display: flex;
}

[data-view="list"] [data-artist-filter-target~="card"] {
  aspect-ratio: auto;
  min-height: 64px;
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px 32px;
  grid-template-areas:
    "media name heart info"
    "media day heart info";
  align-items: center;
  column-gap: 0.625rem;
  row-gap: 0.125rem;
  padding: 0.5rem;
  border-width: 1px;
  border-radius: 8px;
  background: var(--color-surface, #fff);
  box-shadow: none;
  overflow: hidden;
}

[data-view="list"] [data-artist-tile-target="media"] {
  grid-area: media;
  position: static;
  inset: auto;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 9999px;
  overflow: hidden;
}

[data-view="list"] [data-artist-tile-target="media"] img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-view="list"] [data-artist-tile-target="overlay"] {
  display: none;
}

[data-view="list"] [data-artist-tile-target="name"] {
  grid-area: name;
  position: static;
  min-width: 0;
  max-width: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink, currentColor);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
}

[data-view="list"] [data-artist-tile-target="day"] {
  grid-area: day;
  position: static;
  align-self: center;
  justify-self: center;
  text-align: center;
  color: var(--color-ember, currentColor);
  white-space: nowrap;
}

[data-view="list"] [data-artist-tile-target="listDetail"] {
  grid-area: detail;
  min-width: 0;
  overflow: hidden;
  display: none;
}

[data-view="list"] [data-artist-tile-target="heartSlot"] {
  grid-area: heart;
  position: static;
  justify-self: center;
  margin-left: 0;
  flex: 0 0 auto;
}

[data-view="list"] [data-artist-tile-target="infoButton"] {
  grid-area: info;
  position: static;
  justify-self: center;
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  [data-view="list"] [data-artist-filter-target~="card"] {
    grid-template-columns: 48px minmax(0, 1fr) auto 32px 32px;
    grid-template-areas:
      "media name day heart info"
      "media detail day heart info";
  }

  [data-view="list"] [data-artist-tile-target="listDetail"] {
    display: flex;
  }
}

/* Info button: always visible */
[data-artist-id] .info-btn {
  opacity: 1;
}

/* Keep card/filter borders visible in both themes */
.festival-card {
  border-width: 1px;
}

[data-theme="light"] .festival-card {
  border-color: rgb(100 116 139 / 0.3);
}

[data-theme="dark"] .festival-card {
  border-color: rgb(148 163 184 / 0.42);
}

.filter-chip {
  border-width: 1px;
}

[data-theme="light"] .filter-chip.btn-outline {
  border-color: rgb(100 116 139 / 0.45);
}

[data-theme="dark"] .filter-chip.btn-outline {
  border-color: rgb(148 163 184 / 0.58);
}

/* Unselected artist cards: keep de-emphasis while preserving card boundaries */
[data-artist-id][aria-checked="false"] {
  opacity: 0.58;
  border-color: var(--color-hairline-2);
}

[data-theme="light"] [data-artist-id][aria-checked="false"] {
  border-color: rgb(100 116 139 / 0.55);
}

[data-artist-id][aria-checked="false"] figure,
[data-artist-id][aria-checked="false"] figure img,
[data-artist-id][aria-checked="false"] [data-artist-tile-target="media"],
[data-artist-id][aria-checked="false"] [data-artist-tile-target="media"] img {
  filter: grayscale(100%) brightness(0.62) contrast(0.85);
}

[data-artist-id][aria-checked="true"] figure,
[data-artist-id][aria-checked="true"] figure img,
[data-artist-id][aria-checked="true"] [data-artist-tile-target="media"],
[data-artist-id][aria-checked="true"] [data-artist-tile-target="media"] img {
  filter: none;
}

/* Dark mode: slightly lighter dim so cards remain distinct from the background */
[data-theme="dark"] [data-artist-id][aria-checked="false"] {
  opacity: 0.62;
  border-color: rgb(148 163 184 / 0.58);
}

[data-theme="dark"] [data-artist-id][aria-checked="false"] figure,
[data-theme="dark"] [data-artist-id][aria-checked="false"] figure img,
[data-theme="dark"] [data-artist-id][aria-checked="false"] [data-artist-tile-target="media"],
[data-theme="dark"] [data-artist-id][aria-checked="false"] [data-artist-tile-target="media"] img {
  filter: grayscale(100%) brightness(0.58) contrast(0.85);
}

/* Lineup filter sidebar: sticky, scrollable only when a genre category is expanded */
@media (min-width: 1024px) {
  .lg\:drawer-open > .drawer-side {
    position: sticky;
    top: 0;
    height: auto;
    max-height: calc(100vh - 4rem); /* action bar */
    overflow-y: hidden;
    align-self: start;
  }

  .lg\:drawer-open > .drawer-side:has([data-artist-filter-target="genreSubgenreContainer"]:not(.hidden)) {
    overflow-y: auto;
  }

  /* Hide the mobile overlay — sticky drawer-side creates a containing block for
     fixed descendants, which causes the overlay to render inside the sidebar */
  .lg\:drawer-open > .drawer-side > .drawer-overlay {
    display: none;
  }

}

/* Drag handle for reordering */
.drag-handle {
  cursor: grab;
  user-select: none;
}
.drag-handle:active {
  cursor: grabbing;
}

/* Spotify embed iframes in modal */
.modal-box iframe { border-radius: 12px; }
.spotify-track-embed {
  height: 80px;
  overflow: hidden;
  border-radius: 12px;
}

/* B2B lineup pair span and inner template, by viewport.
   Mobile (< 1024px): every pair spans the full 2-col row; inner template varies
   by pair size. Desktop (>= 1024px): span equals pair size; template matches. */
.lineup-pair {
  grid-column: span 2 / span 2;
}
.lineup-pair[data-pair-size="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lineup-pair[data-pair-size="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lineup-pair[data-pair-size="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2x2 wrap */ }

@media (min-width: 1024px) {
  .lineup-pair[data-pair-size="2"] {
    grid-column: span 2 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lineup-pair[data-pair-size="3"] {
    grid-column: span 3 / span 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lineup-pair[data-pair-size="4"] {
    grid-column: span 4 / span 4;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* B2B lineup pairs: one grid item spans one column per artist, while each
   contained artist remains independently selectable. */
.lineup-pair__card {
  border-radius: 10px;
}

.lineup-pair__card:not(:first-of-type) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.lineup-pair__card:not(:last-of-type) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lineup-pair__card[aria-checked="true"] {
  box-shadow: inset 0 0 0 3px var(--color-clay);
}

/* 4-artist b2b in mobile 2x2 cluster: each card has both a horizontal and a
   vertical sibling. Square 3 corners, round only the outer corner. Keep all
   three seam badges visible and place them along the row seams. */
@media (max-width: 1023px) {
  .lineup-pair[data-pair-size="4"] .lineup-pair__card {
    border-radius: 4px;
  }
  .lineup-pair[data-pair-size="4"] .lineup-pair__card:nth-of-type(1) { border-top-left-radius: 10px; }
  .lineup-pair[data-pair-size="4"] .lineup-pair__card:nth-of-type(2) { border-top-right-radius: 10px; }
  .lineup-pair[data-pair-size="4"] .lineup-pair__card:nth-of-type(3) { border-bottom-left-radius: 10px; }
  .lineup-pair[data-pair-size="4"] .lineup-pair__card:nth-of-type(4) { border-bottom-right-radius: 10px; }

  .lineup-pair[data-pair-size="4"] [data-b2b-badge] {
    display: inline-flex;
    left: 50%;
    top: var(--seam);
  }
}

.lineup-pair .b2b-badge {
  z-index: 10;
  left: var(--seam);
  top: 50%;
  transform: translate(-50%, -50%);
}

[data-view="list"] .lineup-pair {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--color-clay, #b85c3d) 25%, transparent);
  /* Tailwind classes on the element supply padding, radius, gap, position. */
}

[data-view="list"] .lineup-pair[style*="display: none"] {
  display: none !important;
}

[data-view="list"] [data-b2b-badge] {
  display: inline-flex;
  left: 50%;
  top: var(--seam);
}

[data-view="list"] .lineup-pair__card {
  aspect-ratio: auto;
  min-height: 64px;
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px 32px;
  grid-template-areas:
    "media name heart info"
    "media day heart info";
  align-items: center;
  column-gap: 0.625rem;
  row-gap: 0.125rem;
  padding: 0.5rem;
  border-width: 1px;
  border-radius: 8px;
  background: var(--color-surface, #fff);
  box-shadow: none;
  overflow: hidden;
}

@media (min-width: 640px) {
  [data-view="list"] .lineup-pair__card {
    grid-template-columns: 48px minmax(0, 1fr) auto 32px 32px;
    grid-template-areas:
      "media name day heart info"
      "media detail day heart info";
  }
}

/* Base radius for inner pair cards in list view: 10px on outer corners. The
   existing `[data-view="list"] .lineup-pair__card` rule (line ~286) sets
   border-radius: 8px on every list row; this override raises pair-card outer
   corners to the spec's 10px so first-card top-left and last-card bottom-right
   match the rounded outer container. The `:not()` rules below square the
   seam-facing corners. */
[data-view="list"] .lineup-pair__card {
  border-radius: 10px;
}

[data-view="list"] .lineup-pair__card:not(:first-of-type) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 10px; /* override grid-mode rule */
}

[data-view="list"] .lineup-pair__card:not(:last-of-type) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 10px;   /* override grid-mode rule */
}

/* Lineup editor inline-save success indicator */
@keyframes lineup-save-flash {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  15%  { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.65); }
  70%  { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.lineup-save-flash { animation: lineup-save-flash 1.1s ease; }

/* Schedule timeline density: compressed on mobile, expanded on sm+ */
:root { --schedule-ppm: 1.4; }
@media (min-width: 640px) { :root { --schedule-ppm: 2; } }

.schedule-timeline-body {
  height: calc(var(--timeline-minutes) * var(--schedule-ppm) * 1px);
}

.schedule-hour-mark {
  top: calc(var(--mark-minutes) * var(--schedule-ppm) * 1px);
}

.schedule-block {
  left: 0;
  right: 0;
  top: calc(var(--block-offset-minutes) * var(--schedule-ppm) * 1px);
  height: calc(
    max(48px, calc(var(--block-duration-minutes) * var(--schedule-ppm) * 1px))
    + var(--block-extra-px, 0) * 1px
  );
}