/* ==========================================================================
   BASE STYLES — shared across every Potify page (index, playlists, upload)
   This is the single source of truth for global look & feel. Page-specific
   CSS files should only contain rules unique to that page.
   ========================================================================== */

:root {
    /* Theme — defaults; auth.js overwrites these from the signed-in profile. */
    --accent: #1db954;
    --accent-rgb: 29, 185, 84;
    --accent-hover: #4ade80;
    --on-accent: #000000;
    --bg: #121212;
    /* Height of the bottom tab bar; 0 on desktop where the nav is a top row. */
    --tabbar-h: 0px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Zero in a browser tab, where Safari's own chrome sits above the page.
       Installed to the home screen there is no chrome, so without this the
       heading and the search bar sit underneath the notch and the clock. */
    --safe-top: env(safe-area-inset-top, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: calc(var(--safe-top) + 20px) 20px 20px;
    background-color: var(--bg);
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* Room for the docked mini player once something is playing */
body.has-player {
    padding-bottom: calc(96px + var(--tabbar-h) + var(--safe-bottom) + var(--jelly-bar-h));
}

/* Phones: no 300ms tap delay, no grey tap flash, no accidental text selection on controls */
a, button, input, select, summary, label {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
button {
    -webkit-user-select: none;
    user-select: none;
}

/* The app is one page with three tabs; only the active one shows. */
.view {
    display: none;
}
.view.active {
    display: block;
}

#app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 10px;
}

h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 24px 0;
    letter-spacing: -0.3px;
}

.hidden {
    display: none !important;
}

/* ---------- Top navigation ---------- */
.nav-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    transition: background 0.2s, transform 0.2s;
}
.nav-link:hover {
    background: rgba(var(--accent-rgb), 0.15);
    transform: translateY(-1px);
}
.nav-link.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    font-weight: 700;
}
.label-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-link.active:hover {
    transform: none;
}

/* ---------- Form elements ---------- */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #b3b3b3;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    background: #2a2a2a;
    border: 1px solid #3e3e3e;
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 0.95rem;
    color: #b3b3b3;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}
input[type="file"]::file-selector-button {
    background: #2a2a2a;
    color: #ffffff;
    border: 1px solid #3e3e3e;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    margin-right: 14px;
}
input[type="file"]::file-selector-button:hover {
    background: #383838;
    border-color: var(--accent);
}

button {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
button:hover {
    background: var(--accent-hover);
}
button:active {
    transform: scale(0.97);
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Icon system ----------
   Every icon is an inline SVG (see js/icons.js) sized by its wrapper.
   `stroke`/`fill` use currentColor, so a button's `color` controls the icon. */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    line-height: 0;
}
.icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }

/* ---------- Icon-only utility button (used for inline edit/rename controls) ---------- */
.icon-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #b3b3b3;
    border: 1px solid #3e3e3e;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* ---------- Small text-link-style button (e.g. "Reset", "Clear") ---------- */
.text-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    cursor: pointer;
    width: auto;
}
.text-btn:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    :root { --tabbar-h: 60px; }

    /* Clear the fixed tab bar at the bottom */
    body { padding: calc(var(--safe-top) + 12px) 12px calc(var(--tabbar-h) + var(--safe-bottom) + var(--jelly-bar-h) + 20px); }
    #app { padding: 0; max-width: 100%; }
    h1 { font-size: 1.3rem; text-align: left; margin: 4px 0 12px; }

    /* Bottom tab bar (Spotify-style): always reachable with a thumb, and it
       never scrolls away like the old top links did. */
    .nav-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1800;
        gap: 0;
        margin: 0;
        flex-wrap: nowrap;
        height: calc(var(--tabbar-h) + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        background: color-mix(in srgb, var(--bg) 97%, transparent);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid #282828;
    }
    .nav-link {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        font-size: 0.7rem;
        font-weight: 600;
        color: #8d8d8d;
        background: transparent;
        border: none;
        border-radius: 0;
        white-space: nowrap;
    }
    .nav-link:hover {
        background: transparent;
        transform: none;
    }
    .nav-link .icon { width: 24px; height: 24px; }
    .nav-link.active {
        background: transparent;
        color: #ffffff;
    }
    .nav-link.active .icon { color: var(--accent); }

    input[type="text"],
    input[type="file"] {
        font-size: 1rem;
    }
}