@import '_content/MelodyBridge.UI.Components/MelodyBridge.UI.Components.bundle.scp.css';

/* _content/MelodyBridge.Server/Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout styling is centralized in wwwroot/app.css for consistent theming.
   Scoped here only: sidebar footer extras and the active nav indicator. */

/* Version badge next to the theme toggle in the sidebar footer. */
.version-badge[b-tjfnyziatv] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--muted-2);
    font-family: var(--font-mono);
}

/* Active nav link: 2px accent bar on the left edge, on top of the
   background tint app.css already applies. */
[b-tjfnyziatv] .app-nav .nav-link.active {
    box-shadow: inset 2px 0 0 var(--accent);
}
/* _content/MelodyBridge.Server/Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation styling is centralized in wwwroot/app.css for consistent
   theming (app.css sizes the old <span> glyphs; the Icon svg needs its
   own column rule here). */

/* Icon column inside each nav link, mirroring app.css .nav-link span. */
[b-ygm5c7xjub] .nav-icon {
    width: 20px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    vertical-align: -3px;
    margin-right: .3rem;
    color: var(--muted-2);
}

.app-nav .nav-link.active .nav-icon[b-ygm5c7xjub] {
    color: var(--accent-strong);
}
/* _content/MelodyBridge.Server/Components/Pages/DevPanel.razor.rz.scp.css */
/* ── Layout ── */
.dev-layout[b-rzio2v8zlw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dev-layout .panel-card[b-rzio2v8zlw] {
    margin-bottom: 0;
}

.dev-search-section[b-rzio2v8zlw] {
    grid-column: 1 / -1;
}

/* ── Buttons / Actions ── */
.flex-actions[b-rzio2v8zlw] {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.btn-icon[b-rzio2v8zlw] {
    margin-right: 0.3em;
}

/* ── Search controls ── */
.search-controls[b-rzio2v8zlw] {
    margin-bottom: 0.75rem;
}

.search-row[b-rzio2v8zlw] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-input[b-rzio2v8zlw] {
    flex: 1;
    padding: 0.55rem 0.75rem;
    background: var(--surface-2, #1a1d23);
    border: 1px solid var(--border, #2a2d35);
    border-radius: 8px;
    color: var(--text-1, #e5e7eb);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-input:focus[b-rzio2v8zlw] {
    border-color: var(--accent, #3b82f6);
}

.search-provider-select[b-rzio2v8zlw] {
    padding: 0.5rem 0.75rem;
    background: var(--surface-2, #1a1d23);
    border: 1px solid var(--border, #2a2d35);
    border-radius: 8px;
    color: var(--text-1, #e5e7eb);
    font-size: 0.85rem;
    min-width: 140px;
}

.search-results-count[b-rzio2v8zlw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.search-results-count .hint[b-rzio2v8zlw] {
    font-size: 0.8rem;
    color: var(--text-3, #6b7280);
}

/* ── Search results list ── */
.search-results-list[b-rzio2v8zlw] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border, #2a2d35);
    border-radius: 8px;
    padding: 0.35rem;
    background: var(--surface-2, #12141a);
}

.search-result-item[b-rzio2v8zlw] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: var(--surface-1, #1e2028);
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.search-result-item:hover[b-rzio2v8zlw] {
    border-color: var(--border, #2a2d35);
    background: var(--surface-2, #252830);
}

.sr-artwork[b-rzio2v8zlw] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--surface-3, #0d0f13);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.sr-artwork-icon[b-rzio2v8zlw] {
    opacity: 0.7;
}

.sr-meta[b-rzio2v8zlw] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sr-title[b-rzio2v8zlw] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-1, #e5e7eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-artist[b-rzio2v8zlw] {
    font-size: 0.78rem;
    color: var(--text-2, #9ca3af);
}

.sr-album[b-rzio2v8zlw] {
    font-size: 0.72rem;
    color: var(--text-3, #6b7280);
}

.sr-badges[b-rzio2v8zlw] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.sr-actions[b-rzio2v8zlw] {
    flex-shrink: 0;
}

.search-results-empty[b-rzio2v8zlw] {
    margin-top: 0.5rem;
}

/* ── Download queue ── */
.dev-queue-section[b-rzio2v8zlw] {
    grid-column: 1 / -1;
}

.queue-list[b-rzio2v8zlw] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 300px;
    overflow-y: auto;
}

.queue-item[b-rzio2v8zlw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    background: var(--surface-1, #1e2028);
    border: 1px solid var(--border, #2a2d35);
    font-size: 0.85rem;
}

.queue-item.queue-completed[b-rzio2v8zlw] {
    border-left: 3px solid var(--success, #22c55e);
}

.queue-item.queue-failed[b-rzio2v8zlw] {
    border-left: 3px solid var(--danger, #ef4444);
}

.queue-item.queue-downloading[b-rzio2v8zlw] {
    border-left: 3px solid var(--accent, #3b82f6);
}

.qi-status[b-rzio2v8zlw] {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.qi-icon[b-rzio2v8zlw] {
    font-weight: 700;
    font-size: 0.9rem;
}

.qi-icon.ok[b-rzio2v8zlw] { color: var(--success, #22c55e); }
.qi-icon.err[b-rzio2v8zlw] { color: var(--danger, #ef4444); }
.qi-icon.pending[b-rzio2v8zlw] { color: var(--text-3, #6b7280); }

.qi-meta[b-rzio2v8zlw] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.qi-track[b-rzio2v8zlw] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qi-provider[b-rzio2v8zlw] {
    font-size: 0.75rem;
    color: var(--text-2, #9ca3af);
}

.qi-result[b-rzio2v8zlw] {
    font-size: 0.78rem;
    color: var(--text-2, #9ca3af);
    flex-shrink: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qi-path[b-rzio2v8zlw] {
    color: var(--success, #22c55e);
}

.qi-error[b-rzio2v8zlw] {
    color: var(--danger, #ef4444);
}

.qi-status-text[b-rzio2v8zlw] {
    color: var(--text-3, #6b7280);
}

/* ── Spinner ── */
.spinner[b-rzio2v8zlw] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border, #2a2d35);
    border-top-color: var(--accent, #3b82f6);
    border-radius: 50%;
    animation: spin-b-rzio2v8zlw 0.6s linear infinite;
    vertical-align: middle;
}

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

/* ── Dev result ── */
.dev-result[b-rzio2v8zlw] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface-2, #1a1d23);
    border: 1px solid var(--border, #2a2d35);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

.dev-result.success[b-rzio2v8zlw] {
    border-color: var(--success, #22c55e);
}

.dev-result.error[b-rzio2v8zlw] {
    border-color: var(--danger, #ef4444);
}

/* ── Provider health ── */
.health-list[b-rzio2v8zlw] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.health-list li[b-rzio2v8zlw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border, #2a2d35);
}

.health-list li:last-child[b-rzio2v8zlw] {
    border-bottom: none;
}

.platform-tags[b-rzio2v8zlw] {
    font-size: 0.8rem;
    color: var(--text-2, #9ca3af);
    margin-left: auto;
}

/* ── Log viewer ── */
.log-section[b-rzio2v8zlw] {
    margin-bottom: 0;
}

.log-container[b-rzio2v8zlw] {
    max-height: 450px;
    overflow-y: auto;
    background: var(--surface-2, #0d0f13);
    border: 1px solid var(--border, #2a2d35);
    border-radius: 8px;
    padding: 0.5rem;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

.log-empty[b-rzio2v8zlw] {
    padding: 1rem;
    text-align: center;
    color: var(--text-3, #6b7280);
    font-style: italic;
}

.log-line[b-rzio2v8zlw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
}

.log-line:hover[b-rzio2v8zlw] {
    background: rgba(255, 255, 255, 0.03);
}

.log-time[b-rzio2v8zlw] {
    color: var(--text-3, #6b7280);
    user-select: none;
}

.log-level[b-rzio2v8zlw] {
    font-weight: 600;
    min-width: 3.5em;
}

.log-info .log-level[b-rzio2v8zlw] { color: var(--accent, #3b82f6); }
.log-warn .log-level[b-rzio2v8zlw] { color: var(--warning, #eab308); }
.log-error .log-level[b-rzio2v8zlw] { color: var(--danger, #ef4444); }
.log-debug .log-level[b-rzio2v8zlw] { color: var(--text-3, #6b7280); }

.log-cat[b-rzio2v8zlw] {
    color: var(--text-2, #9ca3af);
}

.log-msg[b-rzio2v8zlw] {
    flex: 1;
    color: var(--text-1, #e5e7eb);
}

.log-detail[b-rzio2v8zlw] {
    width: 100%;
    margin: 0.25rem 0 0 1.5rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 150px;
    overflow-y: auto;
    color: var(--text-2, #9ca3af);
}

/* ── Log filter buttons ── */
.log-filters[b-rzio2v8zlw] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.btn-filter[b-rzio2v8zlw] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border, #2a2d35);
    border-radius: 4px;
    background: transparent;
    color: var(--text-2, #9ca3af);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}

.btn-filter:hover[b-rzio2v8zlw] {
    border-color: var(--accent, #3b82f6);
    color: var(--text-1, #e5e7eb);
}

.btn-filter.active[b-rzio2v8zlw] {
    background: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
    color: #fff;
}

.health-list[b-rzio2v8zlw] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.health-list li[b-rzio2v8zlw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border, #2a2d35);
}

.health-list li:last-child[b-rzio2v8zlw] {
    border-bottom: none;
}

.platform-tags[b-rzio2v8zlw] {
    font-size: 0.8rem;
    color: var(--text-2, #9ca3af);
    margin-left: auto;
}
/* _content/MelodyBridge.Server/Components/Pages/Home.razor.rz.scp.css */
/* Home (dashboard) scoped styles: connection rows and stat cards layout */

.connection-icon[b-xtrcbw8o2h] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-row[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}

.cover-placeholder-icon[b-xtrcbw8o2h] {
    color: var(--muted-2);
}

.workflow-number .workflow-check[b-xtrcbw8o2h] {
    display: block;
}
/* _content/MelodyBridge.Server/Components/Pages/Library.razor.rz.scp.css */
/* Library page scoped styles: the scan-location list grid. The
   cards and the identity legend own their styles beside their
   components (LibraryLocationCard, LibraryIdentityPanel). */

.path-list[b-o64sbd83jt] { display: grid; gap: .65rem; }
/* _content/MelodyBridge.Server/Components/Pages/Logs.razor.rz.scp.css */
/* Logs page scoped styles. The toolbar pins under the 64px sticky
   topbar so search and filters stay reachable in a long stream. */
.logs-toolbar[b-g4xhv9zq1s] {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--surface);
    padding: .5rem 0 .75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .75rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem .75rem;
    align-items: center;
}

/* Search fills the first column, the toggle sits beside it. */
.logs-toolbar .search-input[b-g4xhv9zq1s] { width: 100%; }

.logs-toolbar .toggle-switch.wide[b-g4xhv9zq1s] { margin-bottom: 0; }

/* Chip rows span the full width under the search row. */
.logs-toolbar .filter-chips[b-g4xhv9zq1s] { grid-column: 1 / -1; }

/* Level chips take their severity color when active. */
.filter-chip.chip-level-warn.active[b-g4xhv9zq1s] {
    color: var(--warning);
    border-color: var(--warning);
    background: var(--warning-soft);
}

.filter-chip.chip-level-err.active[b-g4xhv9zq1s] {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}

.filter-chip.chip-level-info.active[b-g4xhv9zq1s] {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Stream legibility: .8rem beats the global .74rem on this page. */
.logs-list[b-g4xhv9zq1s] {
    font-size: .8rem;
    line-height: 1.45;
}

.log-row[b-g4xhv9zq1s] {
    padding: .4rem .8rem;
}

.log-message[b-g4xhv9zq1s] {
    color: var(--text);
}

/* .log-time and .log-category keep the muted color from the global rules. */
/* _content/MelodyBridge.Server/Components/Pages/PlaylistDetails.razor.rz.scp.css */
/* PlaylistDetails scoped styles: the sticky action header and the
   per-track action button group. */

/* Sticky page header: stays under the 64px app topbar while the track
   table scrolls. Opaque background so rows slide beneath it. */
.detail-header[b-tz8695hpue] {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--bg);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

/* Per-track Retry / Remove buttons share one rounded group. */
[b-tz8695hpue] .btn-group {
    display: inline-flex;
    gap: .3rem;
}

/* Small inline icons inside text (hint boxes, links). */
[b-tz8695hpue] .inline-icon {
    vertical-align: -3px;
    color: var(--warning);
}
[b-tz8695hpue] .cover-placeholder-icon {
    color: var(--muted-2);
}
/* _content/MelodyBridge.Server/Components/Pages/Playlists.razor.rz.scp.css */
/* Playlists page scoped styles: the card tag row under each title
   (owner, format, size as small muted badges), and cover mosaic styling. */

.card-tags[b-xbo3cq0fwb] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .4rem 0 .2rem 0;
}

/* Playlist card badges are compact square chips; the shared base in
   app.css carries the font, colors and border. */
.card-tags .quality-badge[b-xbo3cq0fwb] {
    font-size: .7rem;
    padding: .1rem .35rem;
    border-radius: 4px;
    white-space: nowrap;
}

.playlist-card[b-xbo3cq0fwb] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Spotify's mosaic art is square: strict 1 / 1 box, no height clamp,
   so the 2x2 grid renders whole. */
.playlist-card .playlist-cover[b-xbo3cq0fwb] {
    aspect-ratio: 1 / 1;
    width: 100%;
}
/* _content/MelodyBridge.Server/Components/Pages/Plugins.razor.rz.scp.css */
/* Plugins page scoped styles: waterfall cards, head layout, tail
   controls (status pill, toggle, priority arrows) and quality badges.
   Shared card chrome (border, radius, surface, hover) and the
   .quality-badge base live in app.css. */

.plugin-list[b-6vwnnielzg] {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.plugin-card[b-6vwnnielzg] {
    display: grid;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .15s ease;
}

.plugin-card:hover[b-6vwnnielzg] { border-color: var(--border-strong); }

/* Dimmed, but the toggle stays clickable at full opacity. */
.plugin-card.disabled[b-6vwnnielzg] { opacity: .6; }
.plugin-card.disabled .plugin-tail[b-6vwnnielzg] { opacity: 1; }

.plugin-head[b-6vwnnielzg] {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    flex-wrap: wrap;
}

.plugin-head strong[b-6vwnnielzg] { display: block; }

/* The title demands at least this much before the tail is pushed to
   its own row; without a basis the tail starves it to zero width on
   phones and the description wraps one word per line. */
.plugin-title[b-6vwnnielzg] {
    flex: 1 1 200px;
    min-width: 0;
}

/* Pills and arrows keep breathing room on every viewport; the head
   wraps instead of squeezing the title under the controls. */
.plugin-tail[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Under ~480px the tail drops below the title onto its own row. */
@media (max-width: 480px) {
    .plugin-tail[b-6vwnnielzg] {
        margin-left: calc(42px + .8rem); /* line up with the title */
        flex-wrap: wrap;
        row-gap: .5rem;
    }
}

.plugin-description[b-6vwnnielzg] {
    color: var(--muted);
    font-size: .85rem;
    margin-top: .15rem;
}

.plugin-quality[b-6vwnnielzg] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Plugin badges are rounded pills; the shared base in app.css
   carries the font, colors and border. */
.plugin-quality .quality-badge[b-6vwnnielzg] {
    border-radius: 99px;
    white-space: nowrap;
}

.btn-group[b-6vwnnielzg] { display: inline-flex; gap: .25rem; }

.btn-group .icon-button[b-6vwnnielzg] {
    width: 32px;
    min-height: 32px;
}
/* _content/MelodyBridge.Server/Components/Pages/Settings.razor.rz.scp.css */
/* Settings page scoped styles. Blazor puts the isolation attribute on
   this page's own elements, so plain selectors apply. The tab strip is
   a shared component and carries its own TabStrip.razor.css; those
   rules cannot live here because page isolation never reaches into a
   child component's elements. */

/* OAuth setup steps: callout box instead of a bare list. */
.oauth-steps[b-cy37e525xs] {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-strong);
    border-radius: 8px;
    padding: .9rem 1rem;
    background: var(--surface-3);
}

.oauth-steps ol[b-cy37e525xs] {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .65rem;
    color: var(--muted);
}

.oauth-steps li[b-cy37e525xs] {
    line-height: 1.5;
}

.oauth-steps li[b-cy37e525xs]::marker {
    color: var(--accent-strong);
    font-weight: 700;
}

.oauth-steps code[b-cy37e525xs] {
    font-family: var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .1rem .35rem;
}

/* The redirect-URI hint inside step 2: breathing room around the code
   line and a tidy row for the Copy button, so nothing crowds. */
.oauth-steps .hint-box[b-cy37e525xs] {
    margin: .5rem 0;
}

.oauth-steps .flex-actions[b-cy37e525xs] {
    margin-top: .45rem;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

/* Credential inputs at the card bottom: label above input, even
   rhythm, never touching. */
.account-card label[b-cy37e525xs] {
    display: grid;
    gap: .4rem;
    margin-top: .35rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

/* Accent picker: one row of swatch buttons. Each swatch is a colored
   dot; the chosen one carries a ring in its own color plus a check
   icon. The legend colors are fixed: a swatch always shows its own
   palette regardless of which accent is active. */
.accent-picker[b-cy37e525xs] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.accent-swatch[b-cy37e525xs] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    cursor: pointer;
    position: relative;
    background: var(--swatch);
    transition: transform .12s ease, border-color .12s ease;
}

.accent-swatch:hover[b-cy37e525xs] {
    transform: scale(1.12);
}

.accent-swatch:focus-visible[b-cy37e525xs] {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

.accent-swatch.active[b-cy37e525xs] {
    border-color: var(--swatch);
    box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--swatch);
}

/* Fixed legend: the strong color of each palette in both modes. */
.accent-teal[b-cy37e525xs] { --swatch: #2dd4bf; }
.accent-blue[b-cy37e525xs] { --swatch: #3b82f6; }
.accent-violet[b-cy37e525xs] { --swatch: #a855f7; }
.accent-rose[b-cy37e525xs] { --swatch: #f43f5e; }
.accent-amber[b-cy37e525xs] { --swatch: #f59e0b; }
:root[data-theme="light"] .accent-teal[b-cy37e525xs] { --swatch: #0f766e; }
:root[data-theme="light"] .accent-blue[b-cy37e525xs] { --swatch: #2563eb; }
:root[data-theme="light"] .accent-violet[b-cy37e525xs] { --swatch: #7c3aed; }
:root[data-theme="light"] .accent-rose[b-cy37e525xs] { --swatch: #e11d48; }
:root[data-theme="light"] .accent-amber[b-cy37e525xs] { --swatch: #b45309; }
/* _content/MelodyBridge.Server/Components/Pages/SyncJobs.razor.rz.scp.css */
/* Sync jobs page scoped styles: card action footer and wizard form grid. */

/* Card actions: one horizontal toolbar under a hairline. Wraps gracefully
   on narrow viewports instead of jamming buttons. */
.job-footer[b-klp57mk6at] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}

/* Run-history modal: slightly narrower than the wizard shell, and
   warning detail lists must not overflow their log row. */
.log-modal[b-klp57mk6at] {
    width: min(640px, calc(100vw - 2rem));
}

.log-entry details[b-klp57mk6at] {
    margin-top: .35rem;
    font-size: .82rem;
}

.log-entry details ul[b-klp57mk6at] {
    margin: .35rem 0 0;
    padding-left: 1.2rem;
}

/* One vertical rhythm for every step: the step body is a grid whose gap
   spaces the form, hint boxes and child editors uniformly. */
.wizard-step[b-klp57mk6at] {
    display: grid;
    gap: 1.1rem;
}

/* Step form grids: one column in the narrow modal, two from 640px. */
.wizard-step .form-grid[b-klp57mk6at] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}

/* Zero the global .form-grid label margin-bottom: inside these grids it
   would stack on top of the gap and make row spacing uneven. */
.wizard-step .form-grid label[b-klp57mk6at] {
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .wizard-step .form-grid:not(.single)[b-klp57mk6at] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Step validation message: danger tint, own space under the step body. */
.wizard-error[b-klp57mk6at] {
    margin-top: .75rem;
    border-color: var(--danger);
}

/* Footer: Back sits left, Next/Save stays pinned right also on step 0
   where Back is absent. */
.wizard-actions[b-klp57mk6at] {
    margin-left: auto;
    display: flex;
    gap: .75rem;
}
/* _content/MelodyBridge.Server/Components/Shared/CardMenu.razor.rz.scp.css */
.card-menu[b-njw5m1rgue] { position: relative; }

.card-menu-trigger[b-njw5m1rgue] {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
}
.card-menu-trigger[b-njw5m1rgue]::-webkit-details-marker { display: none; }
.card-menu-trigger:hover[b-njw5m1rgue] { color: var(--text); border-color: var(--border-strong); }

.card-menu-items[b-njw5m1rgue] {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 40;
    min-width: 11rem;
    padding: .3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

[b-njw5m1rgue] button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .45rem .6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: .85rem;
}
[b-njw5m1rgue] button:hover { background: var(--surface-3); }
[b-njw5m1rgue] button.danger { color: var(--danger); }
/* _content/MelodyBridge.Server/Components/Shared/LibraryIdentityPanel.razor.rz.scp.css */
/* Track identity legend, scoped to the panel component: term left,
   explanation right, one row per fact. */

.identity-grid[b-361w5ymapu] {
    display: grid;
    gap: .65rem;
}

.identity-item[b-361w5ymapu] {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: .3rem 1rem;
    align-items: baseline;
    padding: .75rem 1rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.identity-term[b-361w5ymapu] {
    font-size: .9rem;
    color: var(--text);
}

.identity-desc[b-361w5ymapu] {
    color: var(--muted);
    font-size: .8rem;
    margin: 0;
    overflow-wrap: anywhere;
}
/* _content/MelodyBridge.Server/Components/Shared/LibraryLocationCard.razor.rz.scp.css */
/* One scan-location card, scoped to the card component. */

.location-card[b-sozssk7rxp] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    transition: border-color .15s ease;
}

.location-card:hover[b-sozssk7rxp] { border-color: var(--border-strong); }

.location-icon[b-sozssk7rxp] {
    color: var(--muted);
    margin-top: .2rem;
    flex-shrink: 0;
}

.location-body[b-sozssk7rxp] {
    flex: 1;
    min-width: 0; /* lets the path shrink and wrap inside the card */
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
}

.path-tag[b-sozssk7rxp] {
    font-family: var(--font-mono);
    font-size: .82rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .2rem .5rem;
    color: var(--text);
    overflow-wrap: anywhere; /* a long path wraps inside the card, never the grid */
    display: inline-block;
    max-width: 100%;
}

/* One fact per segment: files, schedule, last scan. Wraps on narrow
   cards instead of pushing the action buttons off screen. */
.location-meta[b-sozssk7rxp] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    color: var(--muted);
    margin: 0;
}

.location-meta span + span[b-sozssk7rxp]::before {
    content: "\00b7";
    margin-right: .5rem;
    color: var(--muted);
}

.location-actions[b-sozssk7rxp] {
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* _content/MelodyBridge.Server/Components/Shared/TabStrip.razor.rz.scp.css */
/* TabStrip scoped styles. The global app.css ships a tab-nav base
   (flex row, bottom border); these add the unmistakable active state
   and hover/focus feedback that base never had, scoped to the strip
   so no other element picks them up. */

.tab-link[b-wwdbkcibxy] {
    border-radius: 8px 8px 0 0;
    transition: color .15s ease, border-bottom-color .15s ease,
        background .15s ease;
}

/* Inactive tabs keep a readable label and answer to hover: text
   brightens and a dim underline grows in, so they read as tabs and
   not grey boxes. */
.tab-link:not(.active):hover[b-wwdbkcibxy] {
    color: var(--text);
    border-bottom-color: var(--border);
    background: var(--surface-2);
}

/* Active tab: accent text, accent underline, faint accent wash. */
.tab-link.active[b-wwdbkcibxy] {
    color: var(--accent-strong);
    border-bottom: 2px solid var(--accent-strong);
    background: var(--accent-soft);
}

.tab-link:focus-visible[b-wwdbkcibxy] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}