/*
 * sidebar-fixed.css v3
 * Sidebar fixed po lewej z logo na górze.
 * Topbar (desktop): tylko search + toggle, wyśrodkowane.
 * Mobile: bez zmian — drawer + logo w topbarze.
 */

/* ================================================================
   DESKTOP (>1024px)
   ================================================================ */
@media (min-width: 1025px) {

    /* Ukryj logo z topbara – jest w sidebarze */
    .site-logo--topbar {
        display: none !important;
    }

    /* ── Sidebar: fixed po lewej, od góry ekranu ── */
    .site-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-bottom: none;
        border-right: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
        z-index: 65;
        display: block;
        padding: 0 0 20px 0;
        box-shadow: none;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 97%, transparent), var(--surface)),
            var(--surface);
    }

    /* Logo w sidebarze */
    .site-sidebar-logo {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight: 800;
        font-size: 1.2rem;
        color: var(--text);
        text-decoration: none;
        height: var(--header-height);
        padding: 0 18px;
        position: sticky;
        top: 0;
        z-index: 2;
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--surface) 95%, transparent), color-mix(in srgb, var(--surface-soft) 86%, transparent)),
            color-mix(in srgb, var(--surface) 90%, transparent);
        backdrop-filter: blur(16px) saturate(132%);
        border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
        margin-bottom: 8px;
    }

    .site-sidebar-logo:hover {
        color: var(--accent);
    }

    /* ── Topbar: zaczyna się od prawej krawędzi sidebarze ── */
    .site-topbar {
        left: var(--sidebar-width);
    }

    /* Topbar inner: search wyśrodkowany, toggle przyklejony do prawej */
    .topbar-inner {
        max-width: 100%;
        margin: 0;
        padding: 0 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 100%;
    }

    /* Search: wyśrodkowany przez flex, zajmuje wolną przestrzeń */
    .site-search {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 560px;
        margin: 0 auto;
    }

    .site-search input[type="search"] {
        flex: 1;
        min-width: 0;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
    }

    .site-search button[type="submit"] {
        flex-shrink: 0;
        height: 40px;
        padding: 0 18px;
        line-height: 1;
        box-sizing: border-box;
    }

    /* Toggle: przyklejony do prawej krawędzi */
    .theme-toggle {
        flex-shrink: 0;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Schowaj lupę na desktopie */
    .search-toggle {
        display: none !important;
    }

    /* Chowamy toggle sidebarze */
    .sidebar-toggle {
        display: none !important;
    }

    /* ── Główny layout: przesuń o szerokość sidebarze ── */
    .site-layout {
        max-width: none;
        margin-left: var(--sidebar-width);
        padding-left: 20px;
        padding-right: 20px;
        padding-top: calc(var(--header-height) + 4px);
        grid-template-columns: minmax(0, 1fr);
    }

    /* Theater mode */
    body.is-theater-mode.single-arexxx_video .site-topbar { left: 0; }
    body.is-theater-mode.single-arexxx_video .site-layout { margin-left: 0; }

    /* Scrollbar sidebarze */
    .site-sidebar::-webkit-scrollbar { width: 4px; }
    .site-sidebar::-webkit-scrollbar-track { background: transparent; }
    .site-sidebar::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--border) 70%, transparent);
        border-radius: 99px;
    }

    /* Nawigacja w sidebarze – jedna kolumna */
    .playlist-nav__list { display: block; overflow: visible; padding-bottom: 0; }
    .playlist-nav__list li { margin-bottom: 4px; }
    .playlist-nav__list li a { white-space: normal; }
    .playlist-nav__saved { display: grid; grid-template-columns: 1fr; }
    .sidebar-reflinks {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    }
    .sidebar-ref-list { grid-template-columns: 1fr; }
    .sidebar-shortcut { grid-column: auto; margin-top: 14px; }
    .sidebar-shortcut--extra .playlist-nav__saved-link { width: 100%; min-width: 0; }
}

/* ================================================================
   MOBILE (≤1024px) – logo z topbara widoczne, sidebar jako drawer
   ================================================================ */
@media (max-width: 1024px) {
    /* Ukryj logo sidebarze na mobile */
    .site-sidebar-logo {
        display: none !important;
    }
}