:root {
    --ds-accent: #e8a33d;
}

h1:focus { outline: none; }

a { text-decoration: none; }

.btn-primary {
    --bs-btn-bg: var(--ds-accent);
    --bs-btn-border-color: var(--ds-accent);
    --bs-btn-hover-bg: #d18f2b;
    --bs-btn-hover-border-color: #d18f2b;
    --bs-btn-active-bg: #bf7f1f;
    --bs-btn-color: #1a1a1a;
    --bs-btn-hover-color: #1a1a1a;
    --bs-btn-active-color: #1a1a1a;
}

.navbar-brand { color: var(--ds-accent) !important; }

.nav-link.active { color: var(--ds-accent) !important; }

/* Release grid */
.release-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}

.release-card { transition: transform .1s ease; }
.release-card:hover { transform: translateY(-2px); }

.cover {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #555;
}

.cover-lg { max-width: 260px; }
.cover-md { width: 112px; height: 112px; flex-shrink: 0; object-fit: cover; font-size: 2rem; }
.min-w-0 { min-width: 0; }
.cover-xs { width: 40px; height: 40px; object-fit: cover; font-size: 1rem; }

.progress-thin { height: 4px; }

/* Track table */
.track-table td { vertical-align: middle; }
.track-pos { width: 3.5rem; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.recording-row { font-size: .875rem; }
.file-name { word-break: break-all; }
.btn-download { padding: .1rem .6rem; font-size: .8rem; white-space: nowrap; word-break: normal; vertical-align: baseline; }

.chip-group .btn { border-radius: 2rem; }

/* File browser modal */
.ds-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
}

.ds-modal {
    width: min(760px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.ds-modal .list-group { overflow-y: auto; }
.ds-modal-sm { width: min(520px, 100%); }

/* Upload drop zone: the file input covers it, so a dropped file lands on the input itself */
.drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 7rem;
    padding: 1rem;
    text-align: center;
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    cursor: pointer;
}
.drop-zone:hover, .drop-zone:focus-within { border-color: var(--ds-accent, #e8a33d); }
.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-zone.disabled { opacity: .6; pointer-events: none; }

.sync-banner { border-radius: 0; text-align: center; }
.mp3-line { font-size: .8rem; }
.notes-input { flex: 1 1 8rem; min-width: 8rem; max-width: 22rem; background: transparent; border-color: transparent; }
.notes-input:hover, .notes-input:focus { border-color: var(--bs-border-color); }

/* Player */
.with-player { padding-bottom: 6rem !important; }

.player-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
}

.player-cover { width: 44px; height: 44px; object-fit: cover; }
.player-meta { min-width: 160px; max-width: 320px; }
.player-audio { min-width: 240px; height: 36px; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #000;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Track row: play + one status button per recording slot */
.track-controls { display: inline-flex; gap: .35rem; align-items: center; }
.btn-play { border: 1px solid var(--bs-border-color); color: var(--bs-body-color); min-width: 2.2rem; }
.btn-play:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.btn-play:disabled { opacity: .25; }
.btn-play-error { border-color: var(--bs-danger); color: var(--bs-danger); font-weight: 700; }
.btn-play-current { border-color: var(--ds-accent); color: var(--ds-accent); }
.slot { --c: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); width: 8.4rem; text-align: left; white-space: nowrap; }
.slot:hover { background: rgba(255, 255, 255, .06); color: var(--bs-body-color); }
.slot-dot { display: inline-block; width: .6rem; height: .6rem; margin-right: .45rem; border-radius: 50%; border: 1.5px solid currentColor; vertical-align: -.02rem; }
.slot-unmastered.slot-ok, .slot-unmastered.slot-warn { --c: #ffc94d; }
.slot-master.slot-ok, .slot-master.slot-warn { --c: #6fdc9a; }
.slot-ok, .slot-warn { color: var(--c); border-color: var(--c); }
.slot-ok .slot-dot, .slot-warn .slot-dot { background: var(--c); border-color: var(--c); }
.slot.drag-over { outline: 2px dashed var(--ds-accent); outline-offset: 2px; background: rgba(232, 163, 61, .15); color: var(--bs-body-color); }
.slot-missing { color: var(--bs-danger); border-color: var(--bs-danger); }

/* Playlist tags */
.tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.tag { display: inline-flex; align-items: center; font-size: .75rem; line-height: 1.4; border-radius: 1rem; padding: 0 .15rem 0 .55rem;
       background: rgba(232, 163, 61, .14); border: 1px solid rgba(232, 163, 61, .35); }
.tag a { color: var(--ds-accent); text-decoration: none; }
.tag-x { border: 0; background: none; color: var(--bs-secondary-color); padding: 0 .3rem; line-height: 1; }
.tag-x:hover { color: var(--bs-danger); }
.tag-add.btn { font-size: .75rem; padding: 0 .5rem; border-radius: 1rem; border-style: dashed; line-height: 1.4; }
.tags .dropdown-menu { font-size: .875rem; }
/* Only show "+ playlist" on the row under the pointer (always on touch screens) */
@media (hover: hover) {
    tr:not(:hover) .tag-add:not(:focus) { visibility: hidden; }
}
.details { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .4rem .75rem; text-align: left; margin: 0; }
.details dt { font-weight: normal; color: var(--bs-secondary-color); }
.details dd { margin: 0; }
.details .btn-download { display: block; width: fit-content; padding: .15rem .6rem; margin: .4rem 0 0 !important; } /* own line under long file names */