/* ============================================================
   APP.CSS — Leveny
   Shared chrome for "after login" pages (sidebar + topbar +
   footer). Used by downloads.html, watch-history.html,
   watch-later.html, donation.html.

   CHANGELOG (this pass):
   - Brought app.css's responsive strategy in line with
     design.css: fluid clamp() scaling for 1025–1440px, then
     discrete breakpoints at 1024 / 768 / 480 / 360, matching the
     same screen classes design.css targets, instead of the
     single min-width:1025px block this file had before.
   - .app-page-title's margin-left (added this pass at the base
     level) and .downloads-empty's margin-left (also added this
     pass, originally a flat 450px meant to center the empty
     state against the desktop-width sidebar-fab) are now fluid:
     they scale down smoothly through each breakpoint instead of
     jumping from 450px straight to an 11px hotfix at 1024px.
   - .sidebar-fab, .app-main-inner padding, .downloads-grid
     columns, and .app-page-title font-size now step down at the
     same breakpoints design.css uses for nav/hero elements, so
     the whole page chrome resizes as one coherent system.
   - FOOTER FIX (latest pass): .app-footer used to be
     position:fixed, pinned just above the mobile bottom nav (or
     12px from the bottom on desktop) so it floated over the page
     content permanently, on every screen, at all times. That's
     been changed to a normal in-flow element. body.app-page is
     already display:flex; flex-direction:column with min-height
     100vh, and .app-main already has flex:1 — so with the footer
     no longer taken out of flow, it now naturally sits pinned to
     the bottom of the viewport when page content is short, and
     gets pushed below the fold (only reachable by scrolling) once
     content is taller than the viewport. .app-main no longer
     needs the extra +60px of padding-bottom that used to exist
     solely to keep content clear of the floating footer, and the
     footer itself picks up bottom spacing on mobile so it isn't
     hidden behind the fixed #mobileBottomNav bar.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600;700&display=swap');

:root {
    --accent:      #00A8FF;
    --accent-soft: #EBF5FF;
    --accent-glow: rgba(0,168,255,0.45);
    --accent-dim:  rgba(0,168,255,0.12);

    --app-header-h: 58px;
    --app-bottomnav-h: 62px;
    --sidebar-w-open: 260px;
    --fab-size: 50px;
}

/* ============================================================
   PAGE BACKGROUND
============================================================ */
body.app-page {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #ddeeff;
    color: #111;
    transition: background-color 1s ease, color 0.4s ease;
    position: relative;
}

body.app-page.dark-mode {
    background-color: #0D0D0D;
    color: #f0f0f0;
}

body.app-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.65;
    background:
        radial-gradient(ellipse 100% 55% at 50% -5%, var(--accent-glow) 0%, transparent 70%),
        linear-gradient(160deg, var(--accent-dim) 0%, transparent 60%);
    transition: background 1s ease;
}

body.app-page.dark-mode::after {
    background:
        radial-gradient(ellipse 90% 55% at 50% -5%, var(--accent-glow) 0%, transparent 65%),
        linear-gradient(160deg, var(--accent-dim) 0%, transparent 55%);
}

/* ============================================================
   DESKTOP TOP BAR
============================================================ */
.app-header {
    background: transparent;
}

.app-header .nav_bar {
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding-top: 30px;
    padding-bottom: 12px;
    margin-top: -20px;
}

.app-header hr {
    border-color: rgba(255, 255, 255, 0.08);
    margin-top: 0;
}


/* ============================================================
   SIDEBAR — off-canvas overlay drawer on every breakpoint.
   Hidden by default (translateX(-100%)), slid in over the page
   when body carries .sidebar-open. Never affects layout of
   .app-main, so content never shifts.
============================================================ */
.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    width: min(var(--sidebar-w-open), 82vw);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.28s ease, background 0.4s ease, border-color 1s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.28);

    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255,255,255,0.5);
}

body.dark-mode .app-sidebar {
    background: rgba(13,13,13,0.94);
    border-right: 1px solid var(--accent-dim);
}

body.sidebar-open .app-sidebar {
    transform: translateX(0);
}

/* Suppresses the slide-in transition on first paint when a
   restored session state opens the sidebar immediately — avoids
   a visible "slam open" animation on page load. Removed by JS
   one frame after init. */
body.sidebar-no-transition .app-sidebar,
body.sidebar-no-transition .sidebar-backdrop {
    transition: none !important;
}

/* Dim + click-to-close layer behind the drawer */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 960;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.sidebar-scroll::-webkit-scrollbar { display: none; }

/* ---- Profile row ---- */
.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 14px;
    white-space: nowrap;
}

.avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.sidebar-avatar-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 18px;
    border: 1px solid var(--accent);
    transition: box-shadow 1s ease;
}

.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-menu {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 980;
    min-width: 160px;
    padding: 6px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

body.dark-mode .avatar-menu {
    background: rgba(20,20,20,0.98);
    border: 1px solid var(--accent-dim);
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

.avatar-menu[hidden] { display: none; }

.avatar-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: "Roboto Slab", Rockwell, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

body.dark-mode .avatar-menu-item {
    color: #eee;
}

.avatar-menu-item:hover {
    background: var(--accent-dim);
    color: var(--accent);
}

.avatar-menu-item.avatar-menu-danger:hover {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
}

.sidebar-username {
    font-family: "Roboto Slab", Rockwell, sans-serif;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Nav items ---- */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    gap: 4px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-family: "Roboto Slab", Rockwell, sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

body.dark-mode .sidebar-nav-item {
    color: #ccc;
}

.sidebar-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sidebar-nav-item:hover {
    background: rgba(0,0,0,0.05);
}

body.dark-mode .sidebar-nav-item:hover {
    background: rgba(255,255,255,0.06);
}

.sidebar-nav-item.active {
    background: var(--accent-dim);
    color: var(--accent);
}

/* ---- Bottom: logout ---- */
.sidebar-bottom {
    padding: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

body.dark-mode .sidebar-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    font-family: "Roboto Slab", Rockwell, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    color: #e74c3c;
    transition: background 0.2s ease;
}

.sidebar-logout i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sidebar-logout:hover {
    background: rgba(231,76,60,0.1);
}

/* ============================================================
   SIDEBAR FAB — the circular open/close button, pinned to the
   bottom-left of the viewport on every breakpoint.
============================================================ */
.sidebar-fab {
    position: fixed;
    left: 16px;
    bottom: calc(var(--app-bottomnav-h) + 16px);
    z-index: 950;
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--accent);
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--accent);
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    transition: background 0.3s ease, box-shadow 0.2s ease, border-color 1s ease, color 1s ease, transform 0.2s ease;
}

body.dark-mode .sidebar-fab {
    background: rgba(13,13,13,0.82);
    box-shadow: 0 4px 18px rgba(0,0,0,0.55);
}

.sidebar-fab:hover {
    box-shadow: 0 0 0 6px var(--accent-dim);
}

.sidebar-fab:active {
    transform: scale(0.94);
}

body.sidebar-open .sidebar-fab {
    background: var(--accent);
    color: #fff;
}

/* ============================================================
   MAIN CONTENT — always full width; the sidebar never reserves
   layout space on any breakpoint.

   padding-bottom only needs to clear the fixed mobile bottom nav
   now — the old "+60px" on top of that existed purely to keep
   content clear of the floating fixed footer, which no longer
   floats over content (see .app-footer below).
============================================================ */
.app-main {
    position: relative;
    z-index: 1;
    margin-left: 0;
    padding-top: 14px;
    padding-bottom: var(--app-bottomnav-h);
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
}

.app-main-inner {
    padding: 0 16px;
}

.app-page-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 100;
    letter-spacing: 3px;
    font-size: 30px;
    margin: 0 0 20px;
    color: #111;
    margin-left: 30px;
}

body.dark-mode .app-page-title {
    color: #fff;
}

/* ---- Downloads: empty state ---- */
.downloads-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-family: "Roboto Slab", Rockwell, sans-serif;
    margin-left: 450px;
}

body.dark-mode .downloads-empty {
    color: #888;
}

.downloads-empty i {
    font-size: 40px;
    margin-bottom: 14px;
    color: var(--accent);
    display: block;
}

.downloads-empty p {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #333;
}

body.dark-mode .downloads-empty p {
    color: #eee;
}

.downloads-empty span {
    font-size: 13px;
}

/* ---- Downloads: populated grid ---- */
.downloads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.downloads-grid[hidden] { display: none; }

.dl-card {
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.6);
}

body.dark-mode .dl-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.dl-card-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
}

.dl-card-title {
    padding: 8px 10px;
    font-size: 12px;
    font-family: "Roboto Slab", Rockwell, sans-serif;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-mode .dl-card-title {
    color: #f0f0f0;
}

/* ============================================================
   FOOTER — now a normal in-flow block instead of position:fixed.
   body.app-page is a flex column with min-height:100vh and
   .app-main is flex:1, so this footer is the last flex item:
   it sits pinned to the bottom of the viewport when the page's
   content is shorter than the screen, and gets pushed down below
   the fold — only visible once the user scrolls all the way down
   — once content is taller than the viewport. It also picks up
   bottom spacing on mobile so the fixed #mobileBottomNav bar
   never sits on top of it.
============================================================ */
.app-footer {
    width: 100%;
    text-align: center;
    padding: 16px 12px calc(16px + var(--app-bottomnav-h));
    font-size: 15px;
    font-family: "Roboto Slab", Rockwell, sans-serif;

}

.app-footer a {
    color: #555;
    text-decoration: none;
    pointer-events: auto;
    transition: color 0.4s ease;
}

body.dark-mode .app-footer a {
    color: #999;
}

/* ============================================================
   DESKTOP (≥1025px)
============================================================ */
@media screen and (min-width: 1025px) {

    .app-main {
        padding-top: 100px;
        padding-bottom: 30px;
    }

    .app-main-inner {
        padding: 0 40px;
        max-width: 1100px;
    }

    .app-page-title {
        font-size: 38px;
    }

    .downloads-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
    }

    /* No bottom nav to clear on desktop, so the footer doesn't
       need the extra bottom padding reserved for it on mobile. */
    .app-footer {
        padding: 20px 12px;
    font-size: 15px;
}

    .sidebar-fab {
        bottom: 24px;
    }
}

/* ============================================================
   Small Laptops / Narrow Desktops (1025px – 1440px)
   Fluid clamp() scaling — mirrors design.css's own 1025–1440
   block so app.css shrinks proportionally instead of jumping
   straight from the big-screen 450px/38px values to the tablet
   breakpoint below. Has no effect above 1440px.
============================================================ */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .app-main-inner {
        padding: 0 clamp(20px, 3.5vw, 40px);
        max-width: 100%;
    }

    .app-page-title {
        font-size: clamp(28px, 3vw, 38px);
        margin-left: clamp(12px, 2vw, 30px);
    }

    .downloads-empty {
        margin-left: clamp(120px, 28vw, 450px);
        padding: clamp(40px, 6vw, 60px) 20px;
    }

    .downloads-grid {
        grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 12vw, 160px), 1fr));
        gap: clamp(14px, 1.8vw, 20px);
    }

    .sidebar-fab {
        left: clamp(12px, 1.6vw, 16px);
        bottom: clamp(18px, 2.4vw, 24px);
    }
}

/* ============================================================
   Large Tablets (1024px and below)
============================================================ */
@media screen and (max-width: 1024px) {
    .app-main-inner {
        padding: 0 20px;
    }

    .app-page-title {
        font-size: 26px;
        margin-left: 12px;
    }

    .downloads-empty {
        margin-left: 11px;
        padding: 50px 20px;
    }

    .downloads-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }

    .sidebar-fab {
        left: 14px;
        bottom: calc(var(--app-bottomnav-h) + 14px);
    }
}

/* ============================================================
   Small Tablets / Large Phones (768px and below)
============================================================ */
@media screen and (max-width: 768px) {
    .app-main-inner {
        padding: 0 16px;
    }

    .app-page-title {
        font-size: 24px;
        margin: 0 0 16px;
        margin-left: 8px;
    }

    .downloads-empty {
        margin-left: 0;
        padding: 40px 16px;
    }

    .downloads-empty i {
        font-size: 34px;
        margin-bottom: 10px;
    }

    .downloads-empty p {
        font-size: 15px;
    }

    .downloads-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .dl-card-title {
        font-size: 11px;
    }

    .sidebar-fab {
        width: 46px;
        height: 46px;
        font-size: 16px;
        left: 12px;
        bottom: calc(var(--app-bottomnav-h) + 12px);
    }

    .app-footer {
        font-size: 12px;
    

}
}

/* ============================================================
   Mobile Phones (480px and below)
============================================================ */
@media screen and (max-width: 480px) {
    .app-main-inner {
        padding: 0 12px;
    }

    .app-page-title {
        font-size: 21px;
        letter-spacing: 2px;
        margin: 0 0 14px;
        margin-left: 4px;
    }

    .downloads-empty {
        padding: 32px 12px;
    }

    .downloads-empty i {
        font-size: 30px;
    }

    .downloads-empty p {
        font-size: 14px;
    }

    .downloads-empty span {
        font-size: 12px;
    }

    .downloads-grid {
        gap: 10px;
    }

    .dl-card-title {
        padding: 6px 8px;
        font-size: 10.5px;
    }

    .sidebar-fab {
        width: 42px;
        height: 42px;
        font-size: 15px;
        left: 10px;
        bottom: calc(var(--app-bottomnav-h) + 10px);
    }

    .sidebar-profile {
        padding: 14px 12px;
    }

    .sidebar-nav-item {
        padding: 10px 10px;
        font-size: 13px;
    }
}

/* ============================================================
   Small Mobile Phones (360px and below)
============================================================ */
@media screen and (max-width: 360px) {
    .app-page-title {
        font-size: 19px;
        margin-left: 2px;
    }

    .downloads-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .downloads-empty i {
        font-size: 26px;
    }

    .sidebar-fab {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* ============================================================
   Landscape Mode (short-height phones/tablets, touch)
============================================================ */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .app-main {
        padding-top: 8px;
        padding-bottom: calc(var(--app-bottomnav-h) + 10px);
    }

    .app-page-title {
        font-size: 20px;
        margin: 0 0 10px;
    }

    .downloads-empty {
        padding: 20px 16px;
    }

    .sidebar-fab {
        width: 40px;
        height: 40px;
        bottom: calc(var(--app-bottomnav-h) + 8px);
    }
}

/* ============================================================
   Notch-safe padding for the sidebar + FAB on mobile
============================================================ */
@supports (padding: max(0px)) {
    @media screen and (max-width: 1024px) {
        .app-sidebar {
            padding-left: env(safe-area-inset-left);
        }

        .sidebar-fab {
            left: max(14px, env(safe-area-inset-left));
        }

        .downloads-empty {
            margin-left: 11px;
        }
    }

    @media screen and (max-width: 480px) {
        .sidebar-fab {
            left: max(10px, env(safe-area-inset-left));
        }
    }
}