/* =================================================================
   modals.css — Generic modal chrome shared across dialogs.
   Backdrop + content shell used by settings / import pickers / import
   preview, generic buttons (.settings-btn*), the settings header/body,
   remove-from-library confirmation modal, and the window-wide drop
   overlay shown whenever files are dragged anywhere over the window.
   ================================================================= */

/* =================================================================
   Settings modal (legacy + shared backdrop)
   ================================================================= */

.settings-modal, .import-picker-modal, .import-preview-modal {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
    /* Allow the backdrop itself to scroll if a modal's natural height
       exceeds the viewport (e.g. extreme content on 720p). The modal
       content has its own max-height: 90vh + flex body scroll, so this
       is just a safety net for content that breaks out of those
       constraints (very tall cover gallery, etc). */
    overflow-y: auto;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.settings-content, .import-picker-content, .import-preview-content,
.settings-modal-content {
    background: var(--bg-card);
    border-radius: 14px;
    /* Width target uses min() so the modal grows up to 780px when the
       viewport allows it but shrinks gracefully on 720p where the
       available width after the 240px sidebar leaves room for less. */
    width: min(780px, 95vw);
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

/* Generic chrome for any modal that uses the .settings-modal backdrop +
   .settings-modal-content shell (device add/edit, sync progress, confirm
   dialogs, layout-drift modal, …). Mirrors the .settings-* trio above. */
.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 14px;
    flex: 0 0 auto;
}

.settings-modal-header h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.settings-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-modal-close:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.settings-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-subtle);
    flex: 0 0 auto;
}

/* Confirm-modal danger button — used by the device remove / clear-queue
   / reconcile confirms. Tinted red so the danger reads at a glance. */
.settings-btn-danger {
    background: var(--state-danger);
    border: none;
    color: var(--text-on-accent);
    font-weight: 600;
}

.settings-btn-danger:hover {
    filter: brightness(1.1);
    border-color: transparent;
}

.settings-header, .import-picker-header, .import-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 14px;
}

.settings-header h2, .import-picker-header h2, .import-preview-header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.settings-close, .import-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.settings-close:hover, .import-close:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-section h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
    margin: 0;
}

.settings-help {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.settings-help code {
    background: var(--overlay-selected);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
}

.settings-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-row label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-row input, .settings-row select {
    padding: 10px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
}

.settings-row input:focus, .settings-row select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.settings-template {
    font-family: 'Consolas', 'Monaco', monospace;
}

.settings-subtle {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

.settings-row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
}

.settings-row-inline label {
    color: var(--text-secondary);
    font-size: 13px;
}

.settings-row-inline select {
    min-width: 220px;
}

.settings-btn {
    padding: 9px 16px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.settings-btn:hover {
    background: var(--overlay-active);
    border-color: var(--accent-primary);
}

.settings-btn-primary {
    background: var(--accent-gradient);
    border: none;
    color: var(--text-on-accent);
    font-weight: 600;
}

.settings-btn-primary:hover {
    filter: brightness(1.1);
    border-color: transparent;
}

.settings-btn-ghost {
    background: transparent;
}

.settings-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-color-row input[type="color"] {
    width: 48px;
    height: 34px;
    padding: 2px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
}

.settings-footer, .import-preview-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
}

/* =================================================================
   Remove-from-library modal
   ================================================================= */

.remove-content {
    width: 540px;
    max-width: 95vw;
}

.remove-intro {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.remove-items {
    list-style: none;
    padding: 12px;
    margin: 0 0 18px;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.remove-item-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    border-radius: 6px;
}

.remove-item-row:hover {
    background: var(--overlay-hover);
}

.remove-item-title {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-item-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-item-more {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
    padding: 6px 8px;
}

.remove-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.remove-choice {
    text-align: left;
    padding: 14px 16px;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.remove-choice:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 245, 212, 0.04);
    transform: translateY(-1px);
}

.remove-choice:active {
    transform: translateY(0);
}

.remove-choice-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.remove-choice-head strong {
    font-size: 14px;
    font-weight: 600;
}

.remove-choice-icon {
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.remove-choice p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 32px;
}

.remove-choice-danger:hover {
    border-color: var(--state-danger);
    background: var(--overlay-hover);
}

.remove-choice-danger .remove-choice-icon {
    color: var(--state-danger);
}

.remove-choice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* =================================================================
   Folder-health modal (healthFlow.js)
   ================================================================= */

.health-content {
    max-width: 860px;
    width: min(96vw, 860px);
}

.health-content .settings-modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.health-status {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.health-modal input[type="checkbox"],
.health-modal input[type="radio"] {
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

.health-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.health-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 34px 20px;
    background: var(--surface-card);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
}

.health-hero-icon {
    color: var(--accent-primary);
    font-size: 30px;
    font-weight: 700;
}

.health-hero-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.health-hero-sub {
    font-size: 13px;
    color: var(--text-secondary);
}

.health-opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.health-pick {
    align-items: center;
    cursor: pointer;
}

.health-group-sub {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 14px 8px 38px;
}

.health-fate {
    display: block;
    font-size: 12px;
    color: var(--accent-primary);
    padding: 0 14px 10px 38px;
}

.health-dir-warn {
    color: var(--state-warning) !important;
    font-weight: 600;
}

.health-note[data-quality-hint] {
    font-size: 12px;
    color: var(--state-warning);
    margin: 0 14px 10px 38px;
    padding: 8px 10px;
    background: rgba(var(--state-warning-rgb, 247, 197, 72), 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.health-pick {
    cursor: pointer;
    align-items: center;
}

.health-opt-wrap {
    margin: 0 14px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}

.health-opt-wrap .health-pick {
    border-bottom: none;
    padding-bottom: 4px;
}

.health-opt-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    flex: 1;
}

.health-opt-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-opt-detail {
    font-size: 11px;
    color: var(--text-muted);
}

.health-suggest {
    font-size: 11px;
    font-style: italic;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.health-row-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    align-items: center;
}

.health-flag-name {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-opt-actions,
.health-flag-actions {
    display: flex;
    gap: 10px;
    padding: 2px 10px 10px 14px;
    align-items: center;
}

.health-flag-actions {
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.health-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    color: var(--accent-cyan);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.health-link:hover {
    filter: brightness(1.2);
}



.health-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.health-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.health-thumb-none {
    opacity: 0.35;
}

.health-files {
    margin: 2px 0 8px 34px;
    font-size: 12px;
}

.health-files summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
}

.health-file-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 180px;
    overflow-y: auto;
}

.health-file-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.health-file-list li:hover {
    background: var(--overlay-hover);
}

.health-file-size {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

.health-ignored-panel {
    margin-top: 12px;
    background: var(--surface-card);
    border: 1px dashed var(--border-subtle);
    border-radius: 10px;
    padding: 10px 14px;
}

/* =================================================================
   Audio-consistency modal (qualityFlow.js)
   Per-album cards with a segmented format picker: click a pill to keep
   that format as the target; the other files get re-encoded to it.
   Quality pills reuse the global --badge-* theme tokens (lossless green,
   hi-res gold, lossy grey, DSD pink) but use their own qun-* classes so
   the "hide quality badges" preference can't wipe them out of the modal.
   ================================================================= */

.qun-content {
    max-width: 860px;
    width: min(96vw, 860px);
}

.qun-content .settings-modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.qun-status {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.quality-modal input[type="checkbox"],
.quality-modal input[type="radio"] {
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

.qun-warn-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--state-warning);
    background: rgba(var(--state-warning-rgb), 0.08);
    border: 1px solid rgba(var(--state-warning-rgb), 0.35);
    border-radius: 8px;
}

.qun-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.qun-toolbar-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.qun-toolbar-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.qun-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qun-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
}

.qun-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.qun-card-head .health-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

.qun-card-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qun-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qun-card-sub {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qun-card-count {
    font-size: 12px;
    color: var(--text-muted);
    flex: 0 0 auto;
    text-align: right;
}

.qun-hint {
    margin: 10px 14px 0;
    font-size: 12px;
    color: var(--state-warning);
    padding: 8px 10px;
    background: rgba(var(--state-warning-rgb), 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.qun-spread {
    margin: 10px 14px 0;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 10px;
    background: rgba(var(--accent-primary-rgb), 0.06);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.qun-note-missing {
    color: var(--state-warning);
    background: rgba(var(--state-warning-rgb), 0.08);
}

.qun-dsd-note {
    margin: 0 14px 4px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 10px;
    background: rgba(var(--accent-primary-rgb), 0.06);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.qun-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}

.qun-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.qun-pill input[type="radio"] {
    margin: 0;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

.qun-pill-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface-card);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.qun-pill:hover .qun-pill-body {
    background: var(--overlay-hover);
}

.qun-pill:focus-within .qun-pill-body {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.qun-pill input[type="radio"]:checked ~ .qun-pill-body {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.12);
}

.qun-pill.qun-pill-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.qun-pill-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.qun-pill-tag {
    display: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 99px;
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.14);
    flex-shrink: 0;
}

.qun-pill input[type="radio"]:checked ~ .qun-pill-body .qun-pill-tag,
.qun-pill.qun-pill-disabled .qun-pill-tag {
    display: inline-block;
}

.qun-pill-tag-muted {
    color: var(--text-muted);
    background: var(--overlay-active);
}

/* Themed quality badge (mirrors the app's audio-badge tiers). */
.qun-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: 'Consolas', 'SF Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
    line-height: 1;
    border-radius: 5px;
    overflow: hidden;
    user-select: none;
    vertical-align: middle;
    box-shadow: var(--shadow-sm);
}

.qun-badge .qun-badge-fmt,
.qun-badge .qun-badge-qual {
    padding: 4px 6px;
}

.qun-badge-lossy .qun-badge-fmt {
    background: var(--badge-lossy-format-bg);
    color: var(--badge-lossy-format-text);
}
.qun-badge-lossy .qun-badge-qual {
    background: var(--badge-lossy-quality-bg);
    color: var(--badge-lossy-quality-text);
}

.qun-badge-lossless .qun-badge-fmt {
    background: var(--badge-lossless-format-bg);
    color: var(--badge-lossless-format-text);
}
.qun-badge-lossless .qun-badge-qual {
    background: var(--badge-lossless-quality-bg);
    color: var(--badge-lossless-quality-text);
}

.qun-badge-hires .qun-badge-fmt {
    background: var(--badge-hires-format-bg);
    color: var(--badge-hires-format-text);
}
.qun-badge-hires .qun-badge-qual {
    background: var(--badge-hires-quality-bg);
    color: var(--badge-hires-quality-text);
}

.qun-badge-dsd .qun-badge-fmt {
    background: var(--badge-dsd-format-bg);
    color: var(--badge-dsd-format-text);
}
.qun-badge-dsd .qun-badge-qual {
    background: var(--badge-dsd-quality-bg);
    color: var(--badge-dsd-quality-text);
}

.qun-summary {
    padding: 0 14px 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.qun-summary-none {
    color: var(--text-muted);
}

.qun-lossy {
    margin: 0 14px 12px;
    padding: 8px 10px;
    border: 1px solid rgba(var(--state-warning-rgb), 0.35);
    background: rgba(var(--state-warning-rgb), 0.08);
    border-radius: 8px;
}

.qun-lossy-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.qun-lossy-label input[type="checkbox"] {
    flex-shrink: 0;
}

/* =================================================================
   Window-wide drop overlay (visible during file drag over the window)
   ================================================================= */

.window-drop-overlay {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;           /* don't steal events from the drop itself */
    /* backdrop-filter removed: GPU-expensive, caused renderer crashes under
       heavy drag load on some machines. */
}

.window-drop-overlay.active {
    display: flex;
}

.window-drop-card {
    background: var(--bg-card);
    border: 2px dashed var(--accent-primary);
    border-radius: 20px;
    padding: 50px 70px;
    text-align: center;
    color: var(--text-primary);
    max-width: 480px;
}

.window-drop-icon {
    color: var(--accent-primary);
    margin-bottom: 14px;
}

.window-drop-card h2 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--accent-primary);
}

.window-drop-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* =================================================================
   Layout-drift modal — see layoutDriftFlow.js
   Reuses the .settings-modal backdrop + .settings-modal-content shell;
   styles below are the per-row list and the busy spinner overlay.
   ================================================================= */
.layout-drift-content {
    max-width: 900px;
    width: min(96vw, 900px);
}

.layout-drift-content .settings-modal-body {
    max-height: 65vh;
    overflow-y: auto;
}

.ldm-intro {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 14px 0;
}

.ldm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ldm-group {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}

.ldm-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.ldm-group-head::-webkit-details-marker { display: none; }

.ldm-group-title {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldm-group-count {
    color: var(--text-muted);
    font-size: 12px;
    flex: 0 0 auto;
}

.ldm-rows {
    list-style: none;
    margin: 0;
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border-subtle);
}

.ldm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.ldm-row:last-child { border-bottom: none; }

.ldm-row-cb,
.ldm-group-cb {
    flex: 0 0 auto;
    margin-top: 3px;
    accent-color: var(--accent-primary);
}

.ldm-row-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ldm-row-title {
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldm-row-paths {
    display: grid;
    grid-template-columns: 1fr 14px 1fr;
    gap: 8px;
    align-items: center;
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 11.5px;
    line-height: 1.45;
}

.ldm-row-current {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--border-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldm-row-arrow {
    color: var(--accent-primary);
    text-align: center;
    font-weight: 700;
}

.ldm-row-expected {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Busy overlay (during the scan + during apply) */
.layout-drift-busy-content {
    max-width: 380px;
    width: min(90vw, 380px);
}

.layout-drift-busy-content .settings-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 24px;
}

.ldm-busy-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-strong);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: ldm-spin 0.8s linear infinite;
}

.ldm-busy-msg {
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

/* Per-file relayout progress card — replaces the spinner-only busy
   modal so the user sees what's actually moving. Shape mirrors the
   tag-progress card (writeTags streaming) so the user sees a familiar
   layout: header, bar, current line, scrollable activity log. */
.layout-drift-progress-content {
    width: min(640px, 95vw);
}
.layout-drift-progress-content .settings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 22px 22px;
}
.ldp-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ldp-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-strong);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: ldm-spin 0.8s linear infinite;
    flex: 0 0 auto;
}
.ldp-spinner-done {
    animation: none;
    border: 3px solid var(--state-success, #1ed760);
    border-top-color: var(--state-success, #1ed760);
    background: var(--state-success, #1ed760);
}
.ldp-spinner-err {
    border-color: var(--state-danger);
    background: var(--state-danger);
}
.ldp-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.ldp-counts {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.ldp-bar {
    height: 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}
.ldp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--accent-primary),
        color-mix(in srgb, var(--accent-primary) 60%, white));
    transition: width 0.18s ease;
}
.ldp-current {
    font-size: 12px;
    color: var(--text-secondary);
    min-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ldp-log-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 6px;
}
.ldp-log {
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.ldp-log-row {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.ldp-log-row:last-child { border-bottom: none; }
.ldp-log-row-ok   { color: var(--text-secondary); }
.ldp-log-row-skip { color: var(--text-muted); font-style: italic; }
.ldp-log-row-info { color: var(--accent-secondary); }
.ldp-log-row-warn { color: var(--state-warning); }
.ldp-log-row-err  { color: var(--state-danger); }
.ldp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.ldp-close-btn { min-width: 90px; }

/* Persistent banner — shown while one or more tracks are pending a
   layout-drift move because they were being played at apply time.
   The relayout queue (main process) flushes them automatically when
   playback ends; the banner clears as the queue empties. */
.layout-pending-banner {
    position: fixed;
    bottom: 110px;        /* above the persistent player bar */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(247, 197, 72, 0.14);
    border: 1px solid rgba(247, 197, 72, 0.4);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 12.5px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    z-index: 1500;
    max-width: 90vw;
}
.layout-pending-icon {
    color: var(--accent-secondary);
    font-size: 14px;
}
.layout-pending-text {
    color: var(--text-primary);
}
.layout-pending-flush {
    background: rgba(247, 197, 72, 0.25);
    border: 1px solid rgba(247, 197, 72, 0.5);
    color: var(--accent-secondary);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.layout-pending-flush:hover {
    background: rgba(247, 197, 72, 0.4);
    color: #1a1410;
}

@keyframes ldm-spin {
    to { transform: rotate(360deg); }
}

/* =================================================================
   Device tag-drift prompt — bottom-right banner that appears when a
   device reconnects and has pending PC tag edits to apply. Self-
   dismissing after 12s; click "Apply now" / "Review" / × to dismiss
   immediately.
   ================================================================= */
.drift-prompt {
    position: fixed;
    right: 24px;
    bottom: 88px;          /* sit above the player bar */
    z-index: 1400;
    min-width: 320px;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface-elevated, #1f1f2c);
    border: 1px solid var(--border-strong, #3a3a4a);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    font-size: 13px;
    transform: translateX(120%);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drift-prompt.show { transform: translateX(0); }

.drift-prompt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drift-prompt-text strong { color: var(--accent-secondary); font-weight: 600; }
.drift-prompt-text span { color: var(--text-secondary); font-size: 12px; }

.drift-prompt-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.drift-prompt-apply,
.drift-prompt-review {
    background: transparent;
    border: 1px solid var(--border-strong, #3a3a4a);
    color: var(--text-primary);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}
.drift-prompt-apply {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent, #fff);
}
.drift-prompt-apply:hover { filter: brightness(1.08); }
.drift-prompt-review:hover {
    background: var(--surface-card-hover, #222230);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.drift-prompt-dismiss {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.drift-prompt-dismiss:hover { background: var(--surface-card-hover); color: var(--text-primary); }

/* =========================================================================
   Background-task nav strip — sits inside a modal's title-bar row when
   the BackgroundTaskQueue holds more than one task. Lets the user flip
   between sibling task modals without going back to the player bar.
   Hidden by default (the [hidden] attribute); attachModalNav unhides it
   when queue.length > 1.
   ========================================================================= */
.bg-task-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px 0 auto;     /* push to the right edge, just left of close */
    padding: 4px 6px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    user-select: none;
}
.bg-task-nav[hidden] { display: none; }
.bg-task-prev,
.bg-task-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.bg-task-prev:hover:not(:disabled),
.bg-task-next:hover:not(:disabled) {
    background: var(--surface-card-hover);
    color: var(--text-primary);
}
.bg-task-prev:disabled,
.bg-task-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.bg-task-counter {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 4px;
    white-space: nowrap;
}

/* ===========================================================================
   Add-device wizard (v10) — multi-step modal for the new "folder vs device"
   choice. Shares the .settings-modal shell; only the per-step content is
   bespoke. Keeps a comfortable 540px wide modal so the choice cards have
   room to breathe.
   =========================================================================== */
.device-wizard-modal .device-form-content { min-width: 520px; max-width: 640px; }
.dev-wiz-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dev-wiz-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface-card, #1a1a25);
    border: 1px solid var(--border, #2a2a38);
    border-radius: 10px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease;
}
.dev-wiz-choice:hover {
    border-color: var(--accent-primary, #ff6b35);
    background: var(--surface-card-hover, #222230);
}
.dev-wiz-choice-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 44px;
    text-align: center;
}
.dev-wiz-choice-text { display: flex; flex-direction: column; gap: 4px; }
.dev-wiz-choice-text strong { font-size: 15px; font-weight: 600; }
.dev-wiz-choice-text span {
    font-size: 13px;
    color: var(--text-secondary, #aaa);
    line-height: 1.4;
}

.dev-wiz-detect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 16px;
    background: var(--surface-card, #1a1a25);
    border-radius: 10px;
    border: 1px solid var(--border, #2a2a38);
}
.dev-wiz-detect-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--accent-primary, #ff6b35);
    animation: dev-wiz-spin 0.9s linear infinite;
}
@keyframes dev-wiz-spin { to { transform: rotate(360deg); } }
.dev-wiz-detect-status {
    font-size: 14px;
    color: var(--text-secondary, #aaa);
    text-align: center;
}
.dev-wiz-detect-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.dev-wiz-detect-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--surface-elevated, #1f1f2c);
    border: 1px solid var(--accent-primary, #ff6b35);
    border-radius: 8px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    text-align: left;
}
.dev-wiz-detect-row strong { font-size: 14px; font-weight: 600; }
.dev-wiz-detect-row span { font-size: 12px; color: var(--text-secondary, #aaa); }

.dev-wiz-manual { margin-top: 6px; }
.dev-wiz-manual summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary, #aaa);
    padding: 6px 0;
}
.dev-wiz-manual-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.dev-wiz-manual-section {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #777);
    margin-top: 6px;
    margin-bottom: 2px;
}
.dev-wiz-manual-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
}
.dev-wiz-manual-row:hover {
    background: var(--surface-card-hover, #222230);
    border-color: var(--border, #2a2a38);
}
.dev-wiz-manual-path { font-family: Consolas, Monaco, monospace; font-weight: 600; }
.dev-wiz-manual-label { color: var(--text-secondary, #aaa); }
.dev-wiz-manual-size { color: var(--text-muted, #777); font-size: 12px; }

/* =================================================================
   Remove-from-library scope overview, grouped by location.

   An album can exist in two places at once (a local L:\ copy and a
   NAS copy). The old dialog flattened both into one bullet list plus
   "2 folder(s) affected", which hid the single most decision-relevant
   fact: these are different volumes with different consequences.
   Grouping by location makes that impossible to miss.
   ================================================================= */

.remove-location-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 4px;
}

.remove-location-group {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(var(--accent-primary-rgb), 0.045);
    overflow: hidden;
}

.remove-location-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: rgba(var(--accent-primary-rgb), 0.09);
    border-bottom: 1px solid var(--border-subtle);
}

.remove-location-kind {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.remove-location-name {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.remove-location-count,
.remove-location-size {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    flex-shrink: 0;
}

.remove-location-size {
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

.remove-location-group .remove-folders {
    margin: 0;
    padding: 6px 12px 8px;
    list-style: none;
}

/* The "nothing else is touched" guarantee, stated outright rather than
   buried in the smaller copy under the destructive button. */
.remove-scope-notouched {
    margin: 10px 0 0;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.02);
}

.remove-scope-empty {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}

/* =================================================================
   Blocking removal progress overlay.

   Intentionally the opposite of the import busy overlay: no Cancel,
   no close button, no minimise, no Escape, no backdrop dismiss. The
   user described album removal as "something too delicate" that must
   "always be in sight", so this covers the viewport, dims everything
   behind it, and keeps the bar and the current filename on screen for
   the whole operation. It is determinate, not a spinner — the Rust
   side knows the total and emits one tick per file.
   ================================================================= */

.remove-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Opaque enough that the app behind is plainly inert. */
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(3px);
}

.remove-progress-card {
    width: min(560px, 92vw);
    padding: 30px 32px 26px;
    border-radius: 18px;
    background: var(--surface-card);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.45);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
    text-align: left;
}

.remove-progress-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

.remove-progress-title {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-progress-sub {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--text-dim);
}

.remove-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    /* A visible ring, so the bar reads as a control rather than a hairline. */
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.remove-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(var(--accent-primary-rgb), 0.75),
        var(--accent-primary));
    transition: width 140ms linear;
}

.remove-progress-count {
    margin: 14px 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.remove-progress-file {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Reserve the line even when empty so the card does not jump. */
    min-height: 17px;
}

.remove-progress-note {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11.5px;
    color: var(--text-dim);
    font-style: italic;
}

.remove-progress-overlay--error .remove-progress-kicker { color: #ff5a5a; }
.remove-progress-overlay--error .remove-progress-fill {
    background: linear-gradient(90deg, rgba(255, 90, 90, 0.7), #ff5a5a);
}
.remove-progress-overlay--error .remove-progress-card {
    border-color: rgba(255, 90, 90, 0.5);
}

/* =================================================================
   Unresolved-albums overview (Settings ▸ Maintenance ▸ Reconcile).

   Read-only list: what we expected, which failure it hit, and a
   Locate… per row. The failure reason is shown rather than hidden,
   because "no folder recorded" and "the folder moved" call for very
   different actions by the user.
   ================================================================= */

.locate-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
}

.locate-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid var(--border-subtle);
    border-radius: 11px;
    background: rgba(var(--accent-primary-rgb), 0.05);
}

.locate-row--resolved {
    opacity: 0.72;
    border-color: rgba(var(--accent-primary-rgb), 0.4);
    background: rgba(var(--accent-primary-rgb), 0.12);
}

.locate-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.locate-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locate-artist {
    font-size: 12px;
    color: var(--text-dim);
}

.locate-reason {
    font-size: 11.5px;
    font-weight: 600;
    color: #ffb020;
    margin-top: 2px;
}

.locate-row--resolved .locate-reason {
    color: var(--accent-primary);
}

.locate-expected {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locate-row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.locate-btn {
    white-space: nowrap;
}

.locate-done-note {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-primary);
}