@charset "UTF-8";
:root {
  --body-fg: #333;
  --body-bg: #fff;
  --body-quiet-color: #666;
  --body-loud-color: #000;
}

@media (prefers-color-scheme: light) {
  :root {
    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;
    --success-fg: #895A74;
    --success-color: rgb(90, 137, 111);
    --error-color: rgb(255, 53, 94);
    --link-fg: #587d94;
    --link-visited-fg: #895A74;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --body-fg: #fff;
    --body-bg: #333;
    --body-quiet-color: #bbb;
    --body-loud-color: #666;
    --success-fg: #895A74;
    --success-color: rgb(90, 137, 111);
    --error-color: rgb(255, 53, 94);
    --link-fg: #4285F4;
    --link-visited-fg: #895A74;
  }
  a:link, a:visited {
    color: #4285F4;
  }
  a:hover {
    color: rgb(90, 137, 111);
  }
}
/* < 576 */
/* > 576 < 768 */
/* > 768 < 992 */
/* > 992 < 1200 */
/* > 1200 < 1400 */
/* > 1400 */
/* ADA Compliant helpers */
/* Bases for modals */
/* Jellyfin Playlist Builder page styles, matched to the site theme.
   Contrast: body text uses --body-fg, muted help text uses --body-quiet-color
   (both adapt for light/dark). Focus is never suppressed; :focus-visible
   outlines are drawn on every interactive control. */
.jellyfin-lead {
  max-width: 60ch;
  margin: 0 10px 1.5em 10px;
  color: var(--body-fg);
  font-size: 1.1em;
  line-height: 1.5;
}

.jellyfin-section {
  margin: 0 0 2em 0;
  padding: 1em;
  border: 1px solid var(--body-quiet-color);
  border-radius: 0.5em;
  background: var(--body-bg);
}
.jellyfin-section h2 {
  margin-top: 0;
  color: var(--body-fg);
}
.jellyfin-section h3 {
  color: var(--body-fg);
}

.jellyfin-status {
  margin: 0 10px 1em 10px;
  padding: 0.75em 1em;
  border-radius: 0.5em;
  background: var(--body-quiet-color);
  color: var(--body-bg);
  font-weight: 600;
}

.field-help-text {
  margin: 0 10px;
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--body-quiet-color);
}

/* WCAG 2.2 AA: help text must hold >= 4.5:1 contrast in both schemes.
   The dark theme's --body-quiet-color is #bbb (6.5:1 on #333); force the
   same safe color here so the rule never regresses with a theme change. */
@media (prefers-color-scheme: dark) {
  .field-help-text {
    color: #bbb;
  }
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 1em 0 0 0;
}
.button-row button {
  margin: 0;
}

.btn-secondary {
  color: var(--body-fg) !important;
  background: var(--body-bg) !important;
  border: 1px solid var(--body-fg) !important;
}

.btn-sm {
  margin: 0 0 0 0.5em !important;
  padding: 0.4em 0.75em !important;
  font-size: 0.9em !important;
}

.jellyfin-missing-actions {
  margin-top: 0.5em;
}
.jellyfin-missing-actions .jellyfin-youtube-results {
  margin-top: 0.5em;
  padding: 0.75em;
  border: 1px dashed var(--body-quiet-color);
  border-radius: 0.5em;
  font-size: 0.95em;
}
.jellyfin-missing-actions .jellyfin-youtube-results ul {
  margin: 0;
  padding-left: 1.25em;
}
.jellyfin-missing-actions .jellyfin-youtube-results ul li {
  margin-bottom: 0.5em;
}

#jellyfin-results ul,
#jellyfin-playlists-list ul {
  margin: 0.5em 0;
  padding-left: 1.25em;
}
#jellyfin-results ul li,
#jellyfin-playlists-list ul li {
  margin-bottom: 0.5em;
  line-height: 1.4;
}

#jellyfin-results em {
  font-style: normal;
  font-size: 0.9em;
  color: var(--body-quiet-color);
}

@media (prefers-color-scheme: dark) {
  #jellyfin-results em {
    color: #bbb;
  }
}
/* ── Playlist / library management ─────────────────────────── */
#jellyfin-libraries-list ul, #jellyfin-playlists-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1em;
  list-style: none;
  margin: 1em;
  padding: 0;
}
#jellyfin-libraries-list ul .jellyfin-library-item, #jellyfin-libraries-list ul .jellyfin-playlist-card, #jellyfin-playlists-list ul .jellyfin-library-item, #jellyfin-playlists-list ul .jellyfin-playlist-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 1em;
}
#jellyfin-libraries-list ul .jellyfin-library-item .buttons, #jellyfin-libraries-list ul .jellyfin-library-item .jellyfin-playlist-actions, #jellyfin-libraries-list ul .jellyfin-playlist-card .buttons, #jellyfin-libraries-list ul .jellyfin-playlist-card .jellyfin-playlist-actions, #jellyfin-playlists-list ul .jellyfin-library-item .buttons, #jellyfin-playlists-list ul .jellyfin-library-item .jellyfin-playlist-actions, #jellyfin-playlists-list ul .jellyfin-playlist-card .buttons, #jellyfin-playlists-list ul .jellyfin-playlist-card .jellyfin-playlist-actions {
  display: flex;
  gap: 0.5em;
}
#jellyfin-libraries-list ul .jellyfin-library-item .buttons button, #jellyfin-libraries-list ul .jellyfin-library-item .buttons .btn-sm, #jellyfin-libraries-list ul .jellyfin-library-item .jellyfin-playlist-actions button, #jellyfin-libraries-list ul .jellyfin-library-item .jellyfin-playlist-actions .btn-sm, #jellyfin-libraries-list ul .jellyfin-playlist-card .buttons button, #jellyfin-libraries-list ul .jellyfin-playlist-card .buttons .btn-sm, #jellyfin-libraries-list ul .jellyfin-playlist-card .jellyfin-playlist-actions button, #jellyfin-libraries-list ul .jellyfin-playlist-card .jellyfin-playlist-actions .btn-sm, #jellyfin-playlists-list ul .jellyfin-library-item .buttons button, #jellyfin-playlists-list ul .jellyfin-library-item .buttons .btn-sm, #jellyfin-playlists-list ul .jellyfin-library-item .jellyfin-playlist-actions button, #jellyfin-playlists-list ul .jellyfin-library-item .jellyfin-playlist-actions .btn-sm, #jellyfin-playlists-list ul .jellyfin-playlist-card .buttons button, #jellyfin-playlists-list ul .jellyfin-playlist-card .buttons .btn-sm, #jellyfin-playlists-list ul .jellyfin-playlist-card .jellyfin-playlist-actions button, #jellyfin-playlists-list ul .jellyfin-playlist-card .jellyfin-playlist-actions .btn-sm {
  margin: 0 !important;
}

#jellyfin-playlist-tracks ul {
  list-style: none;
  margin: 0.75em 0;
  padding: 0;
}

.jellyfin-library-item,
.jellyfin-playlist-card,
.jellyfin-track-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.6em 0.75em;
  border: 1px solid var(--body-quiet-color);
  border-radius: 0.5em;
  color: var(--body-fg);
  line-height: 1.4;
}

.jellyfin-track-row {
  justify-content: space-between;
}
.jellyfin-track-row .jellyfin-playlist-actions {
  align-self: center;
}

.jellyfin-playlist-actions {
  display: flex;
  flex-wrap: wrap;
}

.jellyfin-public-badge {
  padding: 0.2em 0.6em;
  border-radius: 0.7em;
  background: var(--body-quiet-color);
  color: var(--body-bg);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (prefers-color-scheme: dark) {
  .jellyfin-public-badge {
    color: #333;
  }
}
.btn-danger {
  color: #ffffff !important;
  background: #b32424 !important;
  border-color: #b32424 !important;
}

.btn-danger:hover,
.btn-danger:focus-visible {
  background: #8f1c1c !important;
}

.jellyfin-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  margin: 10px;
}
.jellyfin-checkbox input[type=checkbox] {
  width: 1.25em;
  height: 1.25em;
  margin: 0;
}
.jellyfin-checkbox label {
  margin: 0;
  font-weight: 600;
}

.jellyfin-replace-area {
  flex-basis: 100%;
  margin-top: 0.5em;
  padding: 0.75em;
  border: 1px dashed var(--body-quiet-color);
  border-radius: 0.5em;
}
.jellyfin-replace-area p {
  margin: 0 0 0.5em 0;
}
.jellyfin-replace-area ul {
  list-style: none;
  margin: 0.5em 0 0 0;
  padding: 0;
}
.jellyfin-replace-area ul li {
  margin-bottom: 0.4em;
}

#jellyfin-saved-song-list-wrap {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid var(--body-quiet-color);
}
#jellyfin-saved-song-list-wrap h3 {
  margin-top: 0;
}
#jellyfin-saved-song-list-wrap ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
  line-height: 1.5;
}
#jellyfin-saved-song-list-wrap ol li {
  margin-bottom: 0.25em;
}

/* ── Multi-page navigation & toolbar ───────────────────────── */
.jellyfin-breadcrumb {
  margin: 0 10px 1em 10px;
}
.jellyfin-breadcrumb a {
  font-weight: 600;
  color: var(--body-fg);
}

.jellyfin-toolbar {
  margin: 0 10px;
}
.jellyfin-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.jellyfin-credentials-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 10px 1em 10px;
}

#jellyfin-credentials-modal h2 {
  margin-top: 0;
}

.jellyfin-replace-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  margin-bottom: 0.5em;
}
.jellyfin-replace-sources .btn-sm {
  margin: 0 !important;
}
.jellyfin-replace-sources .jellyfin-replace-source[aria-pressed=true] {
  color: var(--body-bg) !important;
  background: var(--body-fg) !important;
  border-color: var(--body-fg) !important;
}

.jellyfin-replace-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin-bottom: 0.5em;
}
.jellyfin-replace-metadata label {
  display: block;
  margin: 0 0 0.2em 0;
  font-weight: 600;
  color: var(--body-fg);
}
.jellyfin-replace-metadata .form-control {
  min-width: 16em;
}

@media (prefers-color-scheme: dark) {
  .jellyfin-replace-metadata label {
    color: #fff;
  }
}

/*# sourceMappingURL=jellyfin.css.map */