:root {
    --primary: #127178;
    --secondary: #279da1;
    --accent: #2cb1b6;
    --bg: #ffffff;
    --panel: #f0f4f8;
    --text: #1a1a1a;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    /* Stops the page rubber-banding/shifting sideways on mobile when
       something briefly overflows the viewport width (e.g. during a
       layout reflow while images load). */
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.top-bar {
    background: var(--primary);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}

.top-bar input[type="search"] {
    flex: 1 1 150px;
    min-width: 0;
}

.top-bar h1 {
    font-size: 1.25rem;
    margin: 0 1rem 0 0;
    font-weight: 700;
}

.spacer { flex: 1; }

button, input[type="text"], input[type="password"], input[type="search"] {
    font-family: inherit;
    font-size: 16px;
}

.btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover { background: var(--secondary); }

.btn.secondary { background: var(--secondary); }

input[type="text"], input[type="password"], input[type="search"] {
    padding: 0.45rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.book-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    max-width: 900px;
    margin: 0 auto;
    /* The list is swapped out for "Loading…" and back on every search or
       filter change. Without this, the browser's scroll anchoring tries to
       keep the old content in view as the list grows back, undoing any
       scroll-to-top we do. */
    overflow-anchor: none;
}

.book-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--panel);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    position: relative;
}

.book-row .favourite-star {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.book-row .cover-placeholder {
    width: 40px;
    height: 60px;
    background: var(--panel);
    border-radius: 3px;
    flex-shrink: 0;
}

.book-row img.cover-placeholder {
    object-fit: cover;
    object-position: top center;
    display: block;
}

.book-row .title { font-weight: 600; overflow-wrap: break-word; }
.book-row .meta { color: #555; font-size: 0.85rem; }

/* Generic toggle-pill list, shared by the Add Book genre picker and the
   library filter panel. */
.pill-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.pill-option {
    padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer;
    font-size: 0.85rem; border: 1px solid #ccc; background: #fff;
    color: var(--text);
}
.pill-option.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Scrollable checkbox list for filter categories with large vocabularies
   (genre, author, collection) — easier to scan/tap on mobile than a
   native multi-select. */
.filter-checklist {
    margin-top: 0.4rem; max-height: 9rem; overflow-y: auto;
    background: #fff; border-radius: 6px; padding: 0.4rem 0.6rem;
}
.filter-checklist label {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0; font-size: 0.9rem; color: var(--text); cursor: pointer;
}
.filter-checklist input[type="checkbox"] { flex-shrink: 0; }
.filter-search { margin-top: 0.4rem; font-size: 16px; padding: 0.35rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; width: 100%; }

.sort-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; }
.sort-row label { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.sort-row select { padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }

#incomplete-banner {
    margin: 0.5rem 1rem; padding: 0.6rem 0.9rem; background: #fff3cd;
    border: 1px solid #ffe69c; border-radius: 6px; font-size: 0.85rem;
}
#incomplete-banner a { color: var(--primary); margin-left: 0.4rem; }

.login-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: var(--panel);
}

.login-card {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.login-card h1 {
    color: var(--primary);
    font-size: 1.4rem;
    margin-top: 0;
}

.login-card form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

.login-card .error { color: #b3261e; font-size: 0.9rem; min-height: 1.2em; }

.login-card hr { border: none; border-top: 1px solid #eee; margin: 1.25rem 0; }

/* ---------- Mobile-optimized layout ---------- */

.bottom-nav { display: none; }

/* Search panel and Filters panel (library view) — two separate blocks,
   each always visible under the top bar on desktop; on mobile each is
   hidden until opened from its own bottom-nav tab (see .open below). */
#search-controls, #filters-panel {
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1.25rem 1rem;
}
#search-controls .search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
#search-controls .search-row input[type="search"] {
    flex: 1 1 150px;
    min-width: 0;
}
.filter-group { margin-top: 0.5rem; }
.filter-group h4 { margin: 0 0 0.25rem; font-size: 0.85rem; color: #cfe9ea; }

/* Close button inside the Search/Filters panels — desktop doesn't need
   it (the panels are always visible there), so it only shows up under
   the mobile media query below. */
.panel-header { display: none; }
.panel-header h3 { margin: 0; font-size: 1rem; }
.panel-close-btn { padding: 0.3rem 0.6rem; }

#active-filters:not(:empty) { margin-top: 0.75rem; margin-bottom: -0.25rem; }
#active-filters .pill-option {
    background: var(--panel); display: inline-flex; align-items: center; gap: 0.35rem;
}
#active-filters .pill-option button {
    background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; color: inherit;
}

/* ---------- Desktop: left sidebar (Search/Sort/Filters) + a bigger,
   grid-style book list — closer to the original desktop app's layout.
   Pure grid-area repositioning, so the underlying markup order (and
   therefore the mobile layout below, which never applies this grid)
   is untouched. ---------- */
@media (min-width: 769px) {
    #page-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        grid-template-areas:
            "search   active"
            "sort     banner"
            "filters  list";
        align-items: start;
        gap: 0 1.5rem;
        padding: 1rem 1.5rem 1rem 0;
    }
    /* Sticky sidebar: search/sort sit in short rows above the (usually
       much taller) filters+book-list row, so they stick briefly and
       unstick again almost immediately as their own short row scrolls
       past — filters is the one that stays stuck for the long haul,
       for as long as the book list below it keeps scrolling. Without
       this, all three were plain in-flow grid items and scrolled away
       with the rest of the page instead of staying visible. */
    #search-controls { grid-area: search; border-radius: 8px; position: sticky; top: 1rem; }
    #filters-panel {
        grid-area: filters; border-radius: 8px; padding-bottom: 1.25rem;
        position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
    }
    #active-filters { grid-area: active; padding: 0 !important; }
    #incomplete-banner { grid-area: banner; margin: 0.5rem 0; }
    .book-list { grid-area: list; }

    .sort-row {
        grid-area: sort;
        background: var(--primary);
        color: #fff;
        border-radius: 8px;
        padding: 0.75rem 1.25rem;
        margin: 0;
        position: sticky;
        top: 1rem;
    }
    .sort-row label { color: #fff; }

    /* Bigger cards than the compact list-row look, echoing the desktop
       app's cover-grid view. */
    .book-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1.25rem;
        max-width: none;
        padding: 0;
    }
    .book-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 0.75rem;
    }
    .book-row .cover-placeholder {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
        border-radius: 4px;
    }
    .book-row img.cover-placeholder {
        object-fit: cover;
        object-position: top center;
    }
    .book-row .title { font-size: 1rem; }
    .book-row .meta { font-size: 0.85rem; }
}

@media (max-width: 768px) {
    .desktop-only { display: none !important; }

    body.has-bottom-nav { padding-bottom: 4.5rem; }

    #search-controls, #filters-panel { display: none; }
    #search-controls.open, #filters-panel.open { display: block; }
    .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }

    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #ddd;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: 20;
    }

    .bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.5rem 0 0.6rem;
        color: var(--text);
        text-decoration: none;
        font-size: 0.72rem;
        background: none;
        border: none;
        font-family: inherit;
        cursor: pointer;
        min-width: 0;
    }

    .bottom-nav__item--active { color: var(--accent); font-weight: 600; }
    .bottom-nav__icon { font-size: 1.3rem; }

    .book-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .book-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        min-width: 0;
    }

    .book-row .cover-placeholder {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
    }

    .book-row img.cover-placeholder {
        object-fit: contain;
        background: var(--panel);
    }

    .top-bar h1 {
        flex: 1 1 100%;
        margin: 0 0 0.25rem;
    }
}