/* =============================================================================
   custom-titlebar.css — Renderer-painted title bar for the frameless main
   window. Visible in normal mode, hidden in Tiny Player Mode (where the
   square is meant to be all cover art).

   The strip is `-webkit-app-region: drag` so the user can drag the window
   by it — buttons override with `no-drag` so they remain clickable. Drag
   region is a renderer-only mechanism Electron honours when frame: false.
   ============================================================================= */

:root {
    --titlebar-height: 32px;
    --titlebar-bg: #161823;
    --titlebar-fg: #e7e8ee;
    --titlebar-fg-muted: #9ea2b3;
    --titlebar-hover: rgba(255, 255, 255, 0.08);
    --titlebar-close-hover: #e81123;
}

.custom-titlebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--titlebar-height);
    background: var(--titlebar-bg);
    color: var(--titlebar-fg);
    display: flex;
    align-items: stretch;
    /* Above every modal/overlay so the user can always reach the
       window controls (close, minimize) while a dialog is open —
       matches native-app expectations on every desktop OS. */
    z-index: 99999;
    -webkit-app-region: drag;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.custom-titlebar .ctb-left {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    -webkit-app-region: drag;
}
.custom-titlebar .ctb-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 auto;
}
.custom-titlebar .ctb-title {
    font-size: 12px;
    color: var(--titlebar-fg);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.custom-titlebar .ctb-drag-spacer {
    flex: 1;
    -webkit-app-region: drag;
}

.custom-titlebar .ctb-controls {
    display: flex;
    align-items: stretch;
    -webkit-app-region: no-drag;
}

.custom-titlebar .ctb-btn {
    width: 46px;
    height: var(--titlebar-height);
    background: transparent;
    border: 0;
    color: var(--titlebar-fg);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-app-region: no-drag;
    transition: background 0.12s ease-out, color 0.12s ease-out;
}
.custom-titlebar .ctb-btn:hover { background: var(--titlebar-hover); }

/* Glyphs drawn inline so we don't depend on the icon hydration pass for
   buttons that need to be ready at first paint. Standard 10×10 SVGs
   matching the Windows 10/11 caption-button design. */
.custom-titlebar .ctb-min::before {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: currentColor;
}
.custom-titlebar .ctb-max::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
    box-sizing: border-box;
}
/* When already maximized, swap to a "restore" glyph (two stacked squares). */
.custom-titlebar .ctb-max.is-maximized::before {
    width: 8px;
    height: 8px;
    box-shadow: 2px -2px 0 -1px var(--titlebar-bg),
                3px -3px 0 0 currentColor;
    margin-bottom: 2px;
}
.custom-titlebar .ctb-close::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><line x1='1' y1='1' x2='11' y2='11' stroke='black' stroke-width='1.4' stroke-linecap='round'/><line x1='11' y1='1' x2='1' y2='11' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><line x1='1' y1='1' x2='11' y2='11' stroke='black' stroke-width='1.4' stroke-linecap='round'/><line x1='11' y1='1' x2='1' y2='11' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>");
}
.custom-titlebar .ctb-close:hover {
    background: var(--titlebar-close-hover);
    color: #fff;
}

/* Push the rest of the app down by the title-bar height. Without this,
   .app's grid would render under the bar. The existing .app rule sets
   `height: 100vh` — we override to subtract the bar so layouts that
   depend on full viewport height (sidebar scroll, main content) still
   fit without overflow. */
body {
    padding-top: var(--titlebar-height);
}
.app {
    height: calc(100vh - var(--titlebar-height));
}

/* Tiny Player Mode hides the bar AND zeroes the body padding so the
   cover truly fills the window. Body class is added/removed by
   tinyPlayer.js. */
body.tiny-player-mode {
    padding-top: 0;
    /* Defensive: side panels (album-detail, music-panel) anchor below
       the titlebar via `top: var(--titlebar-height)`. In tiny mode the
       titlebar is hidden, so reset the variable to 0 here so panels
       reclaim full viewport height if they happen to be open. */
    --titlebar-height: 0px;
}
body.tiny-player-mode .custom-titlebar {
    display: none;
}

/* In-content caption is Windows-only. Anywhere else (Linux/Plasma) the
   window manager draws min/max/close. Default-hide so a missed UA class
   cannot leave a 32px -webkit-app-region overlay that swallows clicks
   and looks like a fake theme. */
html:not(.platform-windows) {
    --titlebar-height: 0px;
}
html:not(.platform-windows) body {
    padding-top: 0 !important;
}
html:not(.platform-windows) .custom-titlebar,
html:not(.platform-windows) #custom-titlebar {
    display: none !important;
    pointer-events: none !important;
    -webkit-app-region: none !important;
}
html.platform-windows .custom-titlebar {
    display: flex !important;
    pointer-events: auto;
}