/* ==============================================
   LIBRARY PAGE -- Claude Design reskin
   Ported from the "unQbd Library page redesign" (Library.dc.html).
   Scope: page chrome (hero + sticky controls) + the books grid shell
   and its loading/empty/load-more/end states. The book card itself
   stays BookCard / book-card.css (shared with Discover/Search/Author),
   so it is intentionally NOT restyled here. The status badges are a
   shared primitive standardized in book-card.css (not here).
   --lib-* tokens resolve from brand-tokens.css with safe fallbacks.
   Dark mode is handled via body.dark-mode (never prefers-color-scheme).
   ============================================== */

@keyframes library-spin { to { transform: rotate(360deg); } }
@keyframes lib-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==============================================
   TOKEN LAYER
   ============================================== */

.page-library {
    --lib-blue: var(--brand-primary, #00B4FF);
    --lib-blue-deep: var(--brand-secondary, #0174B1);
    --lib-blue-light: var(--brand-primary-light, #4DB8FF);
    --lib-orange: var(--brand-cta, #FFAA00);

    --lib-page: #FFFFFF;
    --lib-surface: #FFFFFF;
    --lib-surface-alt: #F8FAFC;
    --lib-bar-bg: rgba(255, 255, 255, 0.85);
    --lib-fg: var(--brand-charcoal, #222222);
    --lib-fg-secondary: #475569;
    --lib-fg-muted: #64748B;
    --lib-border: #E5EAF0;
    --lib-track: #E5EAF0;

    --lib-hero-grad: radial-gradient(120% 92% at 50% -12%, #E6F7FF 0%, #F6FBFF 55%, #FFFFFF 100%);
    --lib-accent-soft: #E6F7FF;

    --lib-shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.06);
    --lib-shadow-md: 0 8px 24px rgba(2, 6, 23, 0.08);
    --lib-shadow-blue: 0 10px 28px rgba(0, 180, 255, 0.28);

    --lib-r-md: 10px;
    --lib-r-lg: 14px;
    --lib-r-xl: 20px;
    --lib-r-2xl: 28px;
    --lib-r-pill: 999px;
    --lib-ease: cubic-bezier(0.22, 1, 0.36, 1);

    min-height: 100vh;
    min-height: 100dvh;
    background: var(--lib-page);
    color: var(--lib-fg);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

body.dark-mode .page-library {
    --lib-page: #0B1119;
    --lib-surface: #141D29;
    --lib-surface-alt: #10171F;
    --lib-bar-bg: rgba(11, 17, 25, 0.82);
    --lib-fg: #EAF1F8;
    --lib-fg-secondary: #9FB1C4;
    --lib-fg-muted: #6E8096;
    --lib-border: #253347;
    --lib-track: #253347;

    --lib-hero-grad: radial-gradient(120% 92% at 50% -12%, rgba(0, 180, 255, 0.18) 0%, rgba(0, 180, 255, 0.05) 46%, #0B1119 100%);
    --lib-accent-soft: rgba(0, 180, 255, 0.15);

    --lib-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --lib-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.library-content {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}

/* ==============================================
   FULL-PAGE LOADING / SIGNED-OUT STATE
   (rendered outside .page-library, so it uses brand tokens directly)
   ============================================== */

.library-loading {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 2rem;
    background: #FFFFFF;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body.dark-mode .library-loading { background: #0B1119; }

.library-loading-spinner {
    width: 46px;
    height: 46px;
    margin-bottom: 1.25rem;
    border: 3px solid #E5EAF0;
    border-top-color: var(--brand-primary, #00B4FF);
    border-radius: 50%;
    animation: library-spin 0.8s linear infinite;
}

body.dark-mode .library-loading-spinner {
    border-color: #253347;
    border-top-color: var(--brand-primary-light, #4DB8FF);
}

.library-loading-text {
    margin: 0;
    color: #64748B;
    font-size: 0.95rem;
    font-weight: 500;
}

body.dark-mode .library-loading-text { color: #6E8096; }

/* ==============================================
   HERO
   ============================================== */

.library-header-section {
    width: 100%;
    margin: 0;
    padding: 7.5rem 0 2.75rem;
    background: var(--lib-hero-grad);
    border-bottom: 1px solid var(--lib-border);
}

.library-header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.library-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.library-icon {
    width: 66px;
    height: 66px;
    margin-bottom: 20px;
    border-radius: var(--lib-r-xl);
    background: var(--lib-accent-soft);
    color: var(--lib-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: var(--lib-shadow-sm);
    transition: background 200ms var(--lib-ease);
}

body.dark-mode .library-icon { color: var(--lib-blue-light); }

.library-title {
    margin: 0;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--lib-fg);
}

.library-subtitle {
    margin: 12px 0 0;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--lib-fg-secondary);
}

/* ==============================================
   STICKY CONTROLS BAR
   ============================================== */

.library-controls-section {
    position: sticky;
    top: 70px;
    z-index: 40;
    background: var(--lib-bar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lib-border);
}

.library-controls-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
}

.library-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Filter tabs (segmented group) */
.library-filter-tabs {
    display: flex;
    gap: 3px;
    padding: 4px;
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    border-radius: var(--lib-r-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.library-filter-tabs::-webkit-scrollbar { display: none; }

.library-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--lib-fg-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 160ms var(--lib-ease);
}

.library-filter-tab:hover { color: var(--lib-fg); }

.library-filter-tab.active {
    background: var(--lib-blue);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(0, 180, 255, 0.30);
}

.library-filter-tab i { font-size: 18px; line-height: 1; }

/* Right group: category + search */
.library-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Category dropdown (native select, styled) */
.library-category-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.library-category-select {
    width: 100%;
    padding: 10px 30px 10px 32px;
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    border-radius: var(--lib-r-md);
    color: var(--lib-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 160ms var(--lib-ease), box-shadow 160ms var(--lib-ease);
}

.library-category-select:hover { border-color: var(--lib-blue); }

.library-category-select:focus {
    outline: none;
    border-color: var(--lib-blue);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.2);
}

.library-category-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lib-fg-muted);
    font-size: 18px;
    pointer-events: none;
}

.library-dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lib-fg-muted);
    font-size: 18px;
    pointer-events: none;
}

/* Search */
.library-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
}

.library-search-icon {
    position: absolute;
    left: 12px;
    color: var(--lib-fg-muted);
    font-size: 18px;
    pointer-events: none;
}

.library-search-input {
    width: 100%;
    padding: 10px 38px;
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    border-radius: var(--lib-r-pill);
    color: var(--lib-fg);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 160ms var(--lib-ease), box-shadow 160ms var(--lib-ease);
}

.library-search-input::placeholder { color: var(--lib-fg-muted); }

.library-search-input:focus {
    border-color: var(--lib-blue);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.2);
}

.library-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: var(--lib-surface-alt);
    color: var(--lib-fg-muted);
    cursor: pointer;
    transition: background 160ms var(--lib-ease), color 160ms var(--lib-ease);
}

.library-search-clear:hover {
    background: var(--lib-border);
    color: var(--lib-fg);
}

.library-search-clear i { font-size: 14px; }

/* ==============================================
   BOOKS SECTION
   ============================================== */

.library-books-section {
    padding: 30px 0 88px;
}

.library-books-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 46vh;
}

/* ==============================================
   BOOK DISPLAY COMPONENT (grid shell + states)
   ============================================== */

/* Inline loading */
.book-display-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 96px 0;
    text-align: center;
}

.book-display-spinner {
    width: 46px;
    height: 46px;
    border: 3px solid var(--lib-track);
    border-top-color: var(--lib-blue);
    border-radius: 999px;
    animation: library-spin 0.8s linear infinite;
}

.book-display-spinner.small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.book-display-loading-text {
    margin: 0;
    color: var(--lib-fg-muted);
    font-size: 15px;
    font-weight: 500;
}

/* Empty state */
.book-display-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
    padding: 76px 24px;
    animation: lib-fade 240ms var(--lib-ease);
}

.book-display-empty-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
    border-radius: var(--lib-r-2xl);
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    color: var(--lib-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--lib-shadow-sm);
}

body.dark-mode .book-display-empty-icon { color: var(--lib-blue-light); }

.book-display-empty-icon i { font-size: 40px; }

.book-display-empty-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lib-fg);
}

.book-display-empty-description {
    margin: 8px 0 0;
    max-width: 380px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lib-fg-secondary);
}

.book-display-empty-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.book-display-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: 0;
    border-radius: var(--lib-r-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms var(--lib-ease), transform 200ms var(--lib-ease);
}

.book-display-empty-btn.primary {
    background: var(--lib-blue);
    color: #FFFFFF;
    box-shadow: var(--lib-shadow-blue);
}

.book-display-empty-btn.primary:hover {
    background: var(--lib-blue-deep);
    transform: translateY(-1px);
}

.book-display-empty-btn i { font-size: 18px; }

/* Grid */
.book-display-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.book-display-item { width: 100%; }

/* Loading more */
.book-display-loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
    color: var(--lib-fg-muted);
    font-size: 14px;
    font-weight: 500;
}

/* End of results */
.book-display-end {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 44px;
    color: var(--lib-fg-muted);
}

.book-display-end-line {
    flex: 1;
    height: 1px;
    background: var(--lib-border);
}

.book-display-end-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Status badges are standardized in book-card.css (shared primitive). */

/* ==============================================
   RESPONSIVE
   ============================================== */

/* The filter tab group carries six tabs (All / Reading / Finished / Following /
   Audiobooks / Read-along). Below ~1200px it can no longer share a row with the
   category + search controls without clipping the last (Read-along) tab, so drop
   the controls onto their own full-width row first. Tab labels stay visible here;
   the icon-only treatment kicks in lower down at 768px. */
@media (max-width: 1199px) {
    .library-controls-row { flex-wrap: wrap; }
    .library-controls-right { flex: 1 1 100%; }
    .library-search-bar { flex: 1 1 200px; width: auto; }
}

@media (max-width: 992px) {
    .library-header-section { padding: 7rem 0 2rem; }
    .library-icon { width: 56px; height: 56px; font-size: 26px; }
}

@media (max-width: 768px) {
    .library-header-section { padding: 6.5rem 0 1.5rem; }
    .library-header-container { padding: 0 16px; }

    .library-controls-section { top: 60px; }
    .library-controls-container { padding: 12px 16px; }
    /* row wrap + full-width controls are inherited from the max-width:1199px block */

    .library-filter-tab { padding: 9px 12px; }
    .library-filter-tab span { display: none; }
    .library-filter-tab i { font-size: 20px; }

    .library-search-bar { flex: 1 1 160px; width: auto; }

    .library-books-container { padding: 0 16px; }
    .book-display-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
}

@media (max-width: 480px) {
    .library-header-section { padding: 6rem 0 1.25rem; }
    .library-title { font-size: 26px; }
    .library-subtitle { font-size: 15px; }
    .library-books-section { padding: 20px 0 64px; }

    /* On phones the native category <select> sizes itself to its widest option
       ("Classics & Literary Fiction"), which crushes the search input on the
       same row down to just its icon. Stack the two so the search bar always
       gets the full row width and stays readable. */
    .library-controls-right { flex-direction: column; align-items: stretch; }
    .library-category-dropdown { width: 100%; }
    .library-search-bar { width: 100%; flex: none; }
}

@media (max-width: 380px) {
    .book-display-grid { grid-template-columns: repeat(2, 1fr); }
}