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

/* Ensure scrolling is enabled */
html, body {
  overflow-x: hidden;
  height: 100%;
}

/* Global Audio Player Styles */
#global-audio-player {
  z-index: 40; /* Below AI chat widget (z-50) */
}

/* Ensure content doesn't get hidden behind the player when it's visible */
body.has-global-player {
  padding-bottom: 80px;
}

/* Smooth transitions for the global player */
#global-audio-player.translate-y-full {
  transform: translateY(100%);
}

/* Adjust AI chat widget position when audio player is active */
body.audio-player-active [data-controller="ai-chat-widget"] {
  bottom: 5.5rem !important; /* 88px - height of audio player + original 24px */
  transition: bottom 0.3s ease-out;
}

/* Toastr layout fix */
#toast-container > .toast {
  position: relative;
  padding-right: 2.75rem;
}

#toast-container > .toast .toast-close-button {
  position: absolute;
  top: 0.45rem;
  right: 0.65rem;
  float: none;
}

.anchored-popover {
  position-anchor: var(--popover-anchor);
  top: anchor(bottom);
  left: anchor(right);
  transform: translate(var(--popover-translate-x, -100%), var(--popover-translate-y, 6%));
  margin: 0;
}

.anchored-popover:popover-open {
  transform: translate(var(--popover-translate-x, -100%), var(--popover-translate-y, 6%));
}

.anchored-popover[data-align="start"] {
  left: anchor(left);
  transform: translate(var(--popover-translate-x, 0%), var(--popover-translate-y, 6%));
}

.anchored-popover[data-align="start"]:popover-open {
  transform: translate(var(--popover-translate-x, 0%), var(--popover-translate-y, 6%));
}

button[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

/* Custom File Input Styling for Dark Theme */
input[type="file"]::file-selector-button {
  background-color: rgb(16 185 129);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 1rem;
}

input[type="file"]::file-selector-button:hover {
  background-color: rgb(5 150 105);
}

/* Dark theme scrollbar */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thumb-slate-600::-webkit-scrollbar-thumb {
  background-color: rgb(71 85 105);
  border-radius: 0.375rem;
}

.scrollbar-track-slate-800::-webkit-scrollbar-track {
  background-color: rgb(30 41 59);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.kanban-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100%, 1fr);
}

.kanban-grid > .kanban-column {
  min-width: 100%;
}

@media (min-width: 640px) {
  .kanban-grid {
    grid-auto-columns: minmax(20rem, 1fr);
  }

  .kanban-grid > .kanban-column {
    min-width: 20rem;
  }
}

@media (min-width: 950px) {
  .kanban-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
  }

  .kanban-grid > .kanban-column {
    min-width: 0;
  }
}

.audio-exports-grid {
  display: grid;
  grid-template-columns:
    56px
    minmax(0, 2fr)
    minmax(0, 1.25fr)
    64px;
  grid-template-areas: "play file project actions";
  align-items: center;
  justify-items: stretch;
}

.audio-exports-cell {
  min-width: 0;
}

.audio-exports-cell--play {
  grid-area: play;
}

.audio-exports-cell--file {
  grid-area: file;
}

.audio-exports-cell--project {
  grid-area: project;
}

.audio-exports-cell--size {
  grid-area: size;
  display: none;
}

.audio-exports-cell--duration {
  grid-area: duration;
  display: none;
}

.audio-exports-cell--tempo {
  grid-area: tempo;
  display: none;
}

.audio-exports-cell--key {
  grid-area: key;
  display: none;
}

.audio-exports-cell--quality {
  grid-area: quality;
  display: none;
}

.audio-exports-cell--exported {
  grid-area: exported;
  display: none;
}

.audio-exports-cell--actions {
  grid-area: actions;
  justify-self: end;
}

.audio-exports-cell--size,
.audio-exports-cell--duration,
.audio-exports-cell--tempo,
.audio-exports-cell--key,
.audio-exports-cell--exported {
  white-space: nowrap;
  justify-self: end;
  text-align: right;
}

@media (min-width: 768px) {
  .audio-exports-grid {
    grid-template-columns:
      56px
      minmax(0, 2fr)
      minmax(0, 1.25fr)
      96px
      64px;
    grid-template-areas: "play file project size actions";
  }

  .audio-exports-cell--size {
    display: block;
  }
}

@media (min-width: 1024px) {
  .audio-exports-grid {
    grid-template-columns:
      56px
      minmax(0, 2fr)
      minmax(0, 1.25fr)
      96px
      88px
      64px;
    grid-template-areas: "play file project size duration actions";
  }

  .audio-exports-cell--duration {
    display: block;
  }
}

@media (min-width: 1280px) {
  .audio-exports-grid {
    grid-template-columns:
      56px
      minmax(0, 2fr)
      minmax(0, 1.25fr)
      96px
      88px
      128px
      64px;
    grid-template-areas: "play file project size duration exported actions";
  }

  .audio-exports-cell--exported {
    display: block;
  }
}

@media (min-width: 1536px) {
  .audio-exports-grid {
    grid-template-columns:
      56px
      minmax(0, 2fr)
      minmax(0, 1.25fr)
      96px
      88px
      96px
      96px
      128px
      128px
      64px;
    grid-template-areas:
      "play file project size duration tempo key quality exported actions";
  }

  .audio-exports-cell--tempo,
  .audio-exports-cell--key,
  .audio-exports-cell--quality {
    display: block;
  }
}