/* =====================================================================
   web-only.css — adjustments for running the desktop UI in a browser.

   Loaded by the web build only (src/web/ → dist-server/). The desktop app
   is untouched; this file undoes the desktop-shell assumptions that have no
   meaning outside a Tauri webview, and removes the surfaces the web player
   does not offer.

   Why CSS rather than the gate's inline styles: settings/index.js rebuilds
   the modal and re-runs its search handler, which wipes inline `display`
   (settings/index.js:662-707). Anything hidden that way reappears on the
   next search. CSS with !important survives.
   ===================================================================== */

/* --- custom-titlebar.css ------------------------------------------------
   Reserves 32px at the top of <body> for the native title bar and marks
   regions as window-drag areas. Neither exists in a browser, and the padding
   would push the whole 3-pane shell down by a dead strip. `album-detail.css`
   anchors its positioning to the same --titlebar-height variable, so clearing
   the variable fixes both at once. */
:root {
    --titlebar-height: 0px !important;
}
body {
    padding-top: 0 !important;
}
[style*="-webkit-app-region"] {
    -webkit-app-region: no-drag !important;
}

html, body {
    overflow: hidden;
    height: 100%;
}

/* ---- Custom title bar -------------------------------------------------
 *
 * The desktop app is a frameless window, so it draws its own title bar: an
 * icon and the app name on the left, and minimize / maximize / close on the
 * right. A browser already has all of that — the tab is the title, and the
 * window chrome belongs to the browser. Worse, the buttons here are wired to
 * the Tauri window API, so in the web player they are not merely decorative,
 * they are DEAD: clicking them does nothing, and they are still announced to a
 * screen reader and reachable by keyboard.
 *
 * The old rule above hid `.window-controls` / `.titlebar-controls`. Neither of
 * those class names exists anywhere in this project — the markup uses
 * `.ctb-controls` — so it hid nothing at all. The bar was left visible in the
 * page and exposed to assistive tech.
 *
 * Hide the whole bar, not just the buttons: the strip is `height:
 * var(--titlebar-height)` which the rule above already forces to 0, and what
 * remained was a 1px line of border plus three live-looking buttons.
 */
#custom-titlebar,
.custom-titlebar {
    display: none !important;
}

/* =====================================================================
   1. Sidebar
   ===================================================================== */

/* DEVICES block: heading, its "+" button and the list are one subtree.
   #sidebar-devices is the real id — the gate's previous #sidebar-devices-
   toggle / #sidebar-devices-list selectors matched nothing in the DOM. */
#sidebar-devices,
#device-list,
#device-new-btn {
    display: none !important;
}

/* PLAYLISTS "+" — the list itself stays, playlists remain a read-only view. */
#playlist-new-btn {
    display: none !important;
}

/* "Synced" header pill — the multi-machine replication indicator. The web
   player is one machine's server, and syncStatus.js:66 actively un-hides it
   on boot, so this needs !important to win. */
#sync-pill {
    display: none !important;
}

/* Import / CD ripper entry points in the sidebar. */
#sidebar-import-btn,
#sidebar-cdripper-btn,
#btn-import,
#btn-cdripper {
    display: none !important;
}

/* =====================================================================
   2. Mini player
   ===================================================================== */

/* Three surfaces: the toggle button in the player bar, the overlay body, and
   the `.qh-tiny` button re-rendered on every now-playing repaint
   (queue.js:1912 emits up to three instances). */
#tiny-player-btn,
#tiny-player-overlay,
#tiny-player-toggle,
.qh-tiny,
.tiny-player,
#tiny-player {
    display: none !important;
}

/* =====================================================================
   3. Settings — sections and groups the web player does not offer
   =====================================================================
   Kept:    Audio Output, Playback, Appearance, Home, Navigation, About.
   Removed: Library Folder, Templates, Importing, Maintenance, the whole
            Integrations category (Online Lookup, CD Ripper, Devices,
            Discord, Streaming Server), Tag Fields, Help & Tutorial.
            Exception: AI Assistants (MCP) stays, as a read-only status card
            with "use this browser" (sections/mcp.js renderMcpWeb); the owner
            panel with token, ports and permissions is desktop-only.
   ===================================================================== */

.prefs-nav-item[data-section="library"],
.prefs-nav-item[data-section="templates"],
.prefs-nav-item[data-section="import"],
.prefs-nav-item[data-section="maintenance"],
.prefs-nav-item[data-section="online"],
.prefs-nav-item[data-section="cdripper"],
.prefs-nav-item[data-section="devices"],
.prefs-nav-item[data-section="discord"],
.prefs-nav-item[data-section="server"],
.prefs-nav-item[data-section="tagfields"],
.prefs-nav-item[data-section="help"] {
    display: none !important;
}

/* Hide the category headers that would otherwise be left empty. */
.prefs-nav-group[data-nav-group="Library"],
.prefs-nav-group[data-nav-group="Advanced"] {
    display: none !important;
}

.prefs-panel[data-panel="library"],
.prefs-panel[data-panel="templates"],
.prefs-panel[data-panel="import"],
.prefs-panel[data-panel="maintenance"],
.prefs-panel[data-panel="online"],
.prefs-panel[data-panel="cdripper"],
.prefs-panel[data-panel="devices"],
.prefs-panel[data-panel="discord"],
.prefs-panel[data-panel="server"],
.prefs-panel[data-panel="tagfields"],
.prefs-panel[data-panel="help"] {
    display: none !important;
}

/* --- Audio Output ------------------------------------------------------
   The backend is always the browser, so the output-device picker and the
   native/Rust DSP choices are meaningless. The panel itself is KEPT: gapless
   playback lives there, and so does the streaming bitrate the user picks.

   The desktop-only cards are hidden by their REAL ids. The previous rule
   listed #settings-audio-backend, #settings-audio-device-list and
   [data-setting="outputBackend"] — none of which exist anywhere in this
   project, so it hid nothing and the "Output backend" picker sat there in
   the browser offering PortAudio and WASAPI Exclusive, neither of which can
   happen in a page. bindAudio() also populates those dropdowns over IPC on
   every open, so a CSS-only omission here is visible, not theoretical. */
#settings-audio-output-card,
#settings-audio-mode,
#settings-audio-device-card,
#settings-audio-wasapi-card,
#settings-audio-format-card,
#settings-audio-test-card,
#settings-audio-native-card,
.prefs-audio-native,
#settings-audio-device-list,
.settings-audio-device,
[data-setting="audioDevice"],
[data-setting="outputBackend"] {
    display: none !important;
}

/* =====================================================================
   4. "Preparing track…"
   =====================================================================
   The server transcodes to AAC before it serves a byte, so a cold track can
   take several seconds with the player looking idle. web-preparing.js raises
   this after a short delay — long enough that an already-cached track never
   triggers it — and takes it down on playing/canplay/error.

   Centred over everything. The backdrop does not intercept clicks, but
   the cancel control is interactive and follows the selected app theme. */
#web-preparing-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

#web-preparing-overlay .web-preparing-cancel {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 44px;
    margin-top: 4px;
    padding: 10px 22px;
    border: 1px solid color-mix(in srgb, var(--accent-primary, #ff6b35) 55%, transparent);
    border-radius: 12px;
    background: var(--surface-elevated, var(--bg-secondary, #24242c));
    color: var(--text-primary, #fff);
    box-shadow: 0 5px 24px rgba(0, 0, 0, .24);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .015em;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}

#web-preparing-overlay .web-preparing-cancel:hover {
    background: color-mix(in srgb, var(--accent-primary, #ff6b35) 16%, var(--surface-elevated, #24242c));
    border-color: var(--accent-primary, #ff6b35);
}

#web-preparing-overlay .web-preparing-cancel:active { transform: scale(.97); }

#web-preparing-overlay .web-preparing-cancel:focus-visible {
    outline: 2px solid var(--accent-primary, #ff6b35);
    outline-offset: 3px;
}

.web-preparing-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: var(--accent-primary, #fff);
    animation: web-preparing-spin 0.9s linear infinite;
}

.web-preparing-text {
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

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

@media (prefers-reduced-motion: reduce) {
    .web-preparing-spinner {
        animation-duration: 2.4s;
    }
}

/* =====================================================================
   4. Library views
   ===================================================================== */

/* "Most Played" is desktop-only for now: the web player does not record play
   history, so a browser could only show counts the desktop accumulated —
   which reads as though the desktop user had been playing. */
.sidebar-btn[data-view="most-played"],
[data-view="most-played"] {
    display: none !important;
}