/* =================================================================
   sidebar.css — Left navigation column
   .sidebar, logo, nav items, dropdown affordances, sidebar actions,
   playlists section, and the global icon-svg / stat-icon / drop-icon /
   notifications rules that logically live with the sidebar chrome.
   ================================================================= */

.sidebar {
    background: var(--bg-sidebar);
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-subtle);
    grid-row: 1 / 3;
    overflow-y: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 30px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.logo-img {
    /* Square container — image is already a perfect square AND already has
       its own rounded corners baked in, so no border-radius / object-fit
       cropping is applied here. aspect-ratio guarantees the box stays
       square even if a parent flex pass tries to stretch it. */
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    display: block;
    flex: 0 0 auto;
}

.logo span {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-primary) 100%, white 18%),
        var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 30px;
}

.nav-group {
    position: relative;
}

/* Visual break between the Home/Now-Playing block and the Library block. */
.nav-sep {
    height: 1px;
    background: var(--border-subtle);
    margin: 10px 8px;
    opacity: 0.6;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.15), transparent);
    color: var(--accent-primary);
}

.nav-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: currentColor;
}

.icon-svg {
    display: block;
    color: inherit;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.icon-svg.icon-play polygon,
.icon-svg.icon-pause rect,
.icon-svg.icon-skipBack polygon,
.icon-svg.icon-skipForward polygon,
.icon-svg.icon-volume polygon {
    fill: currentColor;
    stroke: none;
}

.ctrl-btn .icon-svg,
.qh-ctrl .icon-svg {
    display: block;
}

.stat-icon,
.drop-icon,
.eq-icon,
.search-icon,
.notifications,
.vol-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.stat-icon {
    color: var(--accent-primary);
    margin-bottom: 6px;
}

/* Per-card hue rotation removed — every stat-card icon now follows the
   user's accent. The previous secondary / purple / cyan / text-primary
   overrides predated the accent picker and made the home stats look
   uncoordinated once a non-orange accent was chosen. */

.drop-icon {
    color: var(--accent-primary);
    opacity: 0.85;
}

.eq-icon {
    color: var(--text-muted);
    margin-bottom: 10px;
}

.notifications {
    cursor: pointer;
    transition: color 0.15s;
}

.notifications:hover {
    color: var(--text-primary);
}

.qh-ctrl .icon-svg polygon {
    fill: currentColor;
}

.ctrl-btn .icon-svg polygon {
    fill: currentColor;
}

.ctrl-btn.play-pause .icon-svg {
    color: var(--bg-dark);
}

.has-dropdown {
    position: relative;
    cursor: pointer;
}

.has-dropdown.open .dropdown-arrow {
    transform: rotate(90deg);
}

.dropdown-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}

.nav-submenu {
    display: none;
    padding-left: 20px;
}

.has-dropdown.open + .nav-submenu {
    display: block;
}

.nav-submenu-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
    font-size: 13px;
    border-radius: 8px;
}

.nav-submenu-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.nav-submenu-item.active {
    background: rgba(var(--accent-primary-rgb), 0.15);
    color: var(--accent-primary);
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 10px;
}

.sidebar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    /* Filled buttons (Import Music, CD Player) use a primary-only gradient
       built from the user's accent — the lighter end is just the same
       colour mixed with white so themes that aren't orange still look
       cohesive. The previous --accent-gradient mixed primary→secondary
       (orange→yellow), which clashed once the user picked a different
       accent. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary) 100%, white 12%) 0%,
        var(--accent-primary) 100%);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.1s ease, filter 0.15s ease;
}

/* `display: flex` above wins over the UA default `[hidden] { display: none }`,
   so without this rule `btn.hidden = true` had no visual effect. */
.sidebar-btn[hidden] {
    display: none !important;
}

/* Same flex-vs-hidden problem for the auto-shown Current Jobs sidebar entry. */
#current-jobs-nav[hidden] {
    display: none !important;
}

/* Mini progress bar + job counter inside the Current Jobs nav entry. First
   row: icon + label + right-aligned "N of M" count. Second row: the bar
   spans the full entry width underneath (flex-wrap + 100% basis). */
#current-jobs-nav {
    flex-wrap: wrap;
    row-gap: 6px;
}
#current-jobs-nav .cj-nav-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
#current-jobs-nav .cj-nav-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}
#current-jobs-nav .cj-nav-bar {
    display: block;
    flex: 1 1 100%;
    height: 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
    overflow: hidden;
}
#current-jobs-nav .cj-nav-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--accent-primary);
    transition: width 0.25s ease;
}

.sidebar-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Settings button — stays a borderlined "ghost" style (no fill), but
   the icon, text, and border all track the user's accent colour so it
   reads as part of the same accent family as the filled buttons above. */
.sidebar-btn-subtle {
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    font-weight: 500;
}

.sidebar-btn-subtle:hover {
    /* Faint accent wash on hover — readable, doesn't compete with the
       filled buttons. */
    background: rgba(var(--accent-primary-rgb), 0.10);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    filter: none;
}

/* Cache-lock chip — only visible when another machine holds the local
   library cache lock and we're running NAS-direct. Sits at the bottom of
   the sidebar-actions stack as a quiet informational row, not a button. */
.sidebar-cache-chip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.35;
}
.sidebar-cache-chip .icon {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.75;
}
.sidebar-cache-chip .cache-chip-text {
    flex: 1;
    word-break: break-word;
}

.playlists {
    flex: 1;
}

.playlists h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.playlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 14px;
    gap: 8px;
}

.playlist-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.playlist-item.active {
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.18), rgba(var(--accent-primary-rgb), 0.04));
    color: var(--accent-primary);
    box-shadow: box-shadow: none;
}

.playlist-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.playlist-item-count {
    color: var(--text-muted);
    font-size: 11px;
    flex: 0 0 auto;
}

.playlist-empty {
    padding: 10px 15px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

.playlists-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.playlists-header h3 {
    margin: 0;
}

.playlist-new-btn {
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.playlist-new-btn:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: transparent;
    transform: scale(1.05);
}

/* =================================================================
   Devices section — Phase A: sidebar list (between Most Played and
   Playlists). Mirrors the playlist styling but with a per-device
   color accent + connection-status dot.
   ================================================================= */
.devices {
    margin-top: 18px;
    margin-bottom: 18px;
    flex: 0 0 auto;
}
/* Mirror the .playlists h3 + .playlists-header styling exactly so the
   two sections line up and read as a matched pair. */
.devices h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 15px;
}
.devices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.devices-header h3 {
    margin: 0;
}
.device-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}
.device-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 6px 0;
    font-style: italic;
}
.device-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    color: var(--text-secondary, #ccc);
    border-left: 3px solid transparent;
    --device-color: var(--accent-primary, #ff6b35);
}
.device-item:hover {
    background: var(--bg-card, var(--overlay-selected));
    color: var(--text-primary, #fff);
}
.device-item.active {
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.18), transparent);
    border-left-color: var(--device-color);
    color: var(--text-primary);
}
.device-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    flex: 0 0 auto;
    transition: background 0.12s, box-shadow 0.12s;
}
.device-item.online .device-item-dot {
    background: var(--state-success);
    box-shadow: 0 0 6px var(--state-success);
}
.device-item.offline .device-item-dot {
    background: var(--border-subtle);
}
.device-item-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
.device-item-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
/* Match the .playlist-new-btn styling exactly. Same size, same border,
   same hover. */
.device-new-btn {
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.device-new-btn:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: transparent;
    transform: scale(1.05);
}

/* ---- Add/edit modal ---- */
.device-form-content {
    width: min(560px, 92vw);
}
/* The picker inherits .prefs-input which paints a dark card background
   and 10px padding — that hides the actual colour swatch, leaving just
   a hairline visible. Strip those for the color input so the swatch
   fills the chip. Mirrors the Appearance accent picker's overrides. */
.device-color-input {
    width: 56px;
    height: 32px;
    padding: 3px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
}
.device-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.device-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}
.device-icon-input {
    max-width: 240px;
}
.device-advanced {
    margin-top: 6px;
    padding: 10px;
    background: var(--overlay-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
}
.device-advanced summary {
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-size: 12.5px;
    margin-bottom: 8px;
}

/* ---- Detail view ---- */
.device-detail-view {
    padding: 22px 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.device-detail-head {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}
.device-detail-cover {
    flex: 0 0 auto;
    width: 180px;
    height: 180px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}
.device-detail-cover-icon {
    font-size: 64px;
    color: var(--text-primary);
    text-shadow: var(--shadow-sm);
}
.device-detail-info { flex: 1 1 auto; min-width: 0; }
.device-detail-eyebrow {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
}
.device-detail-info h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
}
.device-detail-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    margin: 4px 0 12px 0;
}
.device-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 14px;
    align-items: center;
}
.device-detail-status.online  { color: var(--state-success); }
.device-detail-status.offline { color: var(--text-muted); }
.device-detail-mount {
    font-family: Consolas, "SF Mono", monospace;
    background: var(--overlay-hover);
    padding: 3px 8px;
    border-radius: 4px;
}
/* Free-space chip in the device detail header — text + tiny "used"
   bar so the user can see how full the device is at a glance. */
.device-detail-disk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.device-detail-disk .ddd-bar {
    display: inline-block;
    width: 80px;
    height: 4px;
    background: var(--overlay-active);
    border-radius: 2px;
    overflow: hidden;
}
.device-detail-disk .ddd-fill {
    display: block;
    height: 100%;
    background: var(--device-color, var(--accent-primary));
}
.device-detail-disk.stale {
    opacity: 0.45;
}
/* Sidebar queue badge — shown on the device row when at least one
   track is queued for sync. Small numeric pill, accent-tinted. */
.device-item-queue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 9px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* While a device is syncing, the device row replaces its queue badge
   with a live "X/Y" progress badge and grows a thin progress strip
   along its bottom. The .device-item itself relies on position:relative
   so the strip can pin to the bottom edge without affecting layout. */
.device-item { position: relative; }
.device-item-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 18px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 9px;
    background: var(--device-color, var(--accent-primary));
    color: var(--text-on-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.device-item.syncing { background: rgba(var(--accent-primary-rgb), 0.06); }
.device-item-progress-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--overlay-selected);
    overflow: hidden;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.device-item-progress-fill {
    display: block;
    height: 100%;
    background: var(--device-color, var(--accent-primary));
    transition: width 120ms linear;
}

/* Device detail — pending sync queue (the "to sync" staging area). */
.device-queue-section {
    margin: 12px 0 18px 0;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    background: var(--overlay-hover);
}
.device-queue-empty { display: none; }
.device-queue-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.dq-head-title {
    flex: 1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.dq-head-actions {
    display: flex;
    gap: 8px;
}
.device-queue-rows { max-height: 320px; overflow-y: auto; }
.device-queue-row {
    display: grid;
    grid-template-columns: 1fr 80px 22px;
    grid-template-areas: "title size remove" "sub size remove";
    column-gap: 14px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.device-queue-row:last-child { border-bottom: none; }
.device-queue-row .dq-title  { grid-area: title;  color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-queue-row .dq-sub    { grid-area: sub;    color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-queue-row .dq-size   { grid-area: size;   color: var(--text-muted); font-size: 12px; text-align: right; }
.device-queue-row .dq-remove {
    grid-area: remove;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px;
}
.device-queue-row .dq-remove:hover { color: var(--state-danger); }

/* Songs / Albums view toggle inside the queue header. Pill bar styled to
   match the small ghost buttons used elsewhere in the device detail. */
.dq-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
    margin-right: 4px;
}
.dq-mode-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    line-height: 1;
}
.dq-mode-btn + .dq-mode-btn { border-left: 1px solid var(--border-subtle); }
.dq-mode-btn:hover  { color: var(--text-primary); background: var(--overlay-hover); }
.dq-mode-btn.active {
    color: var(--text-primary);
    background: rgba(var(--accent-primary-rgb), 0.18);
}

/* Album-grouped queue row. Mirrors the song row's column layout but adds
   a small cover thumbnail + a track-count subtitle. The Remove button at
   the end takes a CSV of every track id in the group. */
.device-queue-album-row {
    display: grid;
    grid-template-columns: 36px 1fr 80px 22px;
    column-gap: 12px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.device-queue-album-row:last-child { border-bottom: none; }
.dqa-cover {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: var(--overlay-selected);
}
.dqa-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 18px;
}
.dqa-main { min-width: 0; }
.dqa-title {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dqa-sub {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dqa-size {
    color: var(--text-muted);
    font-size: 12px;
    text-align: right;
}

/* Drag-target highlight on a sidebar device row. */
.device-item.drop-target {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -2px;
    background: rgba(var(--accent-primary-rgb), 0.08);
}

/* Device-presence indicators — shown on album covers and before track
   titles to tell the user "this lives on device X". Each chip is a
   small coloured dot using the device's own colour, with the device's
   icon glyph (emoji) on top when set. Multiple chips stack with a
   slight overlap so an album on three devices reads cleanly. */
.device-presence-stack {
    display: inline-flex;
    align-items: center;
    gap: -4px;
    flex-direction: row;
    pointer-events: none;
}
.device-presence-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    color: var(--text-on-accent);
    font-size: 9px;
    line-height: 1;
    box-shadow: 0 0 0 1.5px var(--surface-app);
    margin-left: -4px;
    user-select: none;
}
.device-presence-dot:first-child { margin-left: 0; }
.device-presence-stack.compact .device-presence-dot {
    width: 12px;
    height: 12px;
    font-size: 8px;
    margin-left: -3px;
}
.device-presence-stack.compact .device-presence-dot:first-child { margin-left: 0; }

/* Album-cover badge — sits at the bottom-right corner so it doesn't
   collide with the existing partial-badge (top-right), quality-badge
   (bottom-left) or booklet-badge (which currently shares bottom-right
   on hover). The presence stack sits above the cover with a soft
   backing pill so it reads against light or dark covers. */
.album-presence-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--surface-overlay);
    border-radius: 999px;
    padding: 3px 5px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Desktop album cards place the audio-quality badge in the top-left.
   Offset the device-presence stack only on desktop surfaces so both
   remain readable; phone layouts keep their existing placement rules. */
body:not([data-layout="portrait"]):not([data-layout="landscape"]):not([data-layout="square"]) .album-presence-badge {
    top: 34px;
}
/* Inline use in track rows — a slim margin keeps the chips from
   bumping into the title text. */
.detail-track-item .device-presence-stack,
.tlr-title       .device-presence-stack {
    margin-right: 6px;
    vertical-align: middle;
}

/* Device detail — sync-in-progress banner. Visible only while a sync
   is active for this device (the modal can be minimized; this banner
   is the in-page indicator). */
.device-detail-sync-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 14px 0;
    padding: 10px 14px;
    border: 1px solid rgba(var(--accent-primary-rgb), 0.45);
    border-radius: 8px;
    background: rgba(var(--accent-primary-rgb), 0.08);
}
.device-detail-sync-status[hidden] { display: none; }
.device-detail-sync-status .dss-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.device-detail-sync-status .dss-bar {
    width: 100%;
    height: 4px;
    background: var(--overlay-active);
    border-radius: 2px;
    overflow: hidden;
}
.device-detail-sync-status .dss-fill {
    height: 100%;
    background: var(--accent-primary);
    transition: width 120ms linear;
}
.device-detail-sync-status .dss-hint {
    color: var(--text-muted);
    font-size: 11.5px;
}

/* Device detail — content view header (Songs / Albums toggle + summary). */
.device-content-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}
.dc-head-title {
    flex: 1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.dc-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}
.dc-mode-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    line-height: 1;
}
.dc-mode-btn + .dc-mode-btn { border-left: 1px solid var(--border-subtle); }
.dc-mode-btn:hover  { color: var(--text-primary); background: var(--overlay-hover); }
.dc-mode-btn.active {
    color: var(--text-primary);
    background: rgba(var(--accent-primary-rgb), 0.18);
}

/* Songs view — flat list with thumb. Empty-thumb fallback gets a glyph. */
.device-songs-rows .tlr-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 16px;
    background-color: var(--overlay-selected);
}

/* Albums view — grid of cards, mirroring the library's .albums-grid /
   .album-card rhythm so the device's content reads the same as the
   main library. Click a card to expand its tracks in an inline panel
   below the grid (one open at a time). */
.device-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(160px * var(--grid-zoom)), 1fr));
    gap: calc(20px * var(--grid-zoom));
    margin-top: 4px;
}
.device-album-card {
    background: var(--bg-card);
    border-radius: 15px;
    padding: 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, outline-color 0.2s;
    user-select: none;
}
.device-album-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-3px);
}
.device-album-card.selected {
    background: rgba(var(--accent-primary-rgb), 0.16);
    outline: 1px solid rgba(var(--accent-primary-rgb), 0.55);
    transform: translateY(-2px);
}
/* Multi-selected (Ctrl/Shift-click) cards get a softer accent that
   stacks cleanly on top of .selected (the currently expanded card). */
.device-album-card.multi-selected {
    background: rgba(var(--accent-primary-rgb), 0.12);
    outline: 1px solid rgba(var(--accent-primary-rgb), 0.55);
}
.device-album-card.multi-selected.selected {
    outline: 1.5px solid rgba(var(--accent-primary-rgb), 0.85);
}
/* Multi-selected track rows — same accent tint, applies to both the
   flat Songs view and rows inside the inline album panel. */
.device-track-row.multi-selected,
.device-album-tracks .device-track-row.multi-selected {
    background: rgba(var(--accent-primary-rgb), 0.14);
    outline: 1px solid rgba(var(--accent-primary-rgb), 0.45);
    outline-offset: -1px;
}
.device-album-card-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--overlay-selected);
}
.device-album-card-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 38px;
}
.device-album-card-info h3 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.device-album-card-info p {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.device-album-card-meta {
    margin-top: 4px !important;
    font-size: 11px !important;
}

/* Inline tracks panel that expands below the album grid when a card
   is clicked. Lives INSIDE .device-albums-grid so it can be inserted
   right after the last card on the clicked card's row; spans the full
   grid row via `grid-column: 1 / -1`. */
.device-albums-tracks-panel {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--overlay-hover);
}
.device-albums-tracks-panel[hidden] { display: none; }

/* Device detail — album-grouped track list. Mirrors the library's
   recently-added / playlist viewer rhythm (cover + title + meta line,
   then a tlr-styled tracks list underneath) so a device's contents read
   the same way the rest of the app does. */
.device-track-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
}
.device-album-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.device-album-header {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 4px 0;
}
.device-album-cover {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: var(--overlay-selected);
    box-shadow: var(--shadow-sm);
}
.device-album-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 28px;
}
.device-album-info { min-width: 0; }
.device-album-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.device-album-year {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}
.device-album-meta {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.device-album-tracks {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-subtle);
}
.device-album-tracks .track-list-row {
    border-bottom: 1px solid var(--border-subtle);
}
.device-album-tracks .track-list-row:last-child { border-bottom: none; }

/* Device detail — playlists synced to the device. Lives above the
   track list, in the same look as the sidebar playlist rows. */
.device-playlist-list {
    margin: 12px 0 18px 0;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}
.device-playlist-list-head {
    padding: 8px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--overlay-hover);
    border-bottom: 1px solid var(--border-subtle);
}
.device-playlist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 13.5px;
}
.device-playlist-row:last-child { border-bottom: none; }
.device-playlist-row:hover { background: var(--overlay-hover); }
.device-playlist-row .dpl-icon  { color: var(--accent-primary); }
.device-playlist-row .dpl-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-playlist-row .dpl-count { color: var(--text-muted); font-size: 12px; }

.device-detail-actions {
    display: flex;
    gap: 8px;
}