html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #3a3a5e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a7e;
}

/* Split panel helpers */
.split-panel {
    display: flex;
    gap: 16px;
    height: calc(100vh - 120px);
}

.split-panel-left {
    width: 300px;
    min-width: 250px;
    overflow-y: auto;
}

.split-panel-right {
    flex: 1;
    overflow-y: auto;
}

/* Timeline styling */
.timeline-container {
    position: relative;
    height: 60px;
    background: #1e1e2d;
    border-radius: 4px;
    overflow: hidden;
}

.timeline-slot {
    position: absolute;
    top: 4px;
    height: 52px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity 0.2s;
}

.timeline-slot:hover {
    opacity: 0.85;
}

.timeline-slot.playlist {
    background: rgba(124, 77, 255, 0.6);
    border: 1px solid rgba(124, 77, 255, 0.8);
}

.timeline-slot.track {
    background: rgba(0, 229, 255, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.8);
    z-index: 1;
}

.timeline-hour-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
}

.timeline-hour-marker {
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.timeline-hour-label {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
}

/* Drag-drop styling */
.playlist-entry-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 4px 0;
    background: #252538;
    border-radius: 6px;
    border: 1px solid #2e2e45;
    cursor: grab;
    transition: all 0.15s ease;
}

.playlist-entry-item:hover {
    border-color: #7c4dff;
    background: #2a2a42;
}

.playlist-entry-item .entry-icon {
    margin-right: 12px;
    opacity: 0.7;
}

.playlist-entry-item .entry-name {
    flex: 1;
    /* min-width:0 lets the name actually shrink inside the flex row so the
       trailing badge/buttons stay visible instead of being pushed off-screen. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-entry-item .entry-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    flex-shrink: 0;
}

.folder-badge {
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
}

.file-badge {
    background: rgba(124, 77, 255, 0.15);
    color: #7c4dff;
}

/* Upload zone */
.upload-zone {
    border: 2px dashed #3a3a5e;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #7c4dff;
    background: rgba(124, 77, 255, 0.05);
}

/* Now Playing page */
.now-playing-header {
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.1) 0%, rgba(0, 229, 255, 0.05) 100%);
}

.now-playing-disc {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #252538;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3a3a5e;
    flex-shrink: 0;
}

.now-playing-disc.spinning {
    animation: spin 3s linear infinite;
    border-color: #7c4dff;
    box-shadow: 0 0 12px rgba(124, 77, 255, 0.3);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.listening-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   Mobile foundation — shared responsive helpers
   xs = phones (< 600px), matching MudBlazor's xs breakpoint.
   Pages opt into these classes instead of re-inventing fixes.
   ============================================================ */

/* Wrapping action / toolbar row. Use on any header or toolbar that pairs a
   title with action buttons, or holds a row of buttons, so it wraps to the
   next line on narrow screens instead of overflowing the viewport. */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Horizontal-scroll wrapper for wide tables / data grids. Wrapping a
   MudDataGrid / MudSimpleTable in this keeps the scroll inside the table
   container rather than forcing the whole page to scroll sideways. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Truncate one line of long text with an ellipsis. On a flex child this needs
   the parent (or the child) to have min-width:0, which is included here. */
.text-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Let long unbroken strings (file paths, device IDs, SSIDs, emails, log lines)
   wrap instead of forcing horizontal scroll. */
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Make a MudChip's value ellipsize rather than overflow when it holds a long
   SSID / email / identifier. Pair with Class="chip-truncate" on the MudChip. */
.chip-truncate {
    max-width: 100%;
}
.chip-truncate .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hero text input (e.g. the device adoption code) that scales down on phones
   so it can never exceed the dialog content width. */
.adopt-code-input input {
    font-size: clamp(1.3rem, 7vw, 2rem) !important;
    letter-spacing: 0.2em;
}

/* Phone-only rules (xs). */
@media (max-width: 599.98px) {
    /* Drop low-priority table columns on phones. Put Class="hide-xs" on a
       MudColumn's HeaderClass + CellClass to hide it below 600px. Works for
       table cells (where MudBlazor's d-sm-* display helpers don't). */
    .hide-xs {
        display: none !important;
    }

    /* Stack desktop two-pane split views vertically and let the page grow
       with the document instead of a fixed viewport-height flexbox. */
    .split-panel {
        flex-direction: column;
        height: auto;
    }
    .split-panel-left {
        width: 100%;
        min-width: 0;
        max-height: 40vh;
    }
    .split-panel-right {
        width: 100%;
    }

    /* Let playlist entry rows wrap their badge/action cluster to a 2nd line. */
    .playlist-entry-item {
        flex-wrap: wrap;
    }

    /* The 24h timeline band is unreadable at phone width; hide the hour labels
       (the band itself can be hidden per-page via Class="hide-xs"). */
    .timeline-hour-label {
        display: none;
    }

    /* Tighten oversized fixed paddings on the narrow viewport. */
    .upload-zone {
        padding: 16px;
    }
}