/* /Components/FRBR/SearchItemFrbr.razor.rz.scp.css */

/* /Components/Layout/SearchItem.razor.rz.scp.css */

/* /Components/Layout/SearchItemWithoutFRBR.razor.rz.scp.css */

/* /Components/Pages/Account/Delivery.razor.rz.scp.css */
body[b-8yqmk0n82w] {
}
/* /Components/Pages/Assets.razor.rz.scp.css */
.custom-card[custom-scope-identifier] {
    width: 150px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

    .custom-card:hover[custom-scope-identifier] {
        background-color: #e0e0e0;
    }

.selected[custom-scope-identifier] {
    border: 3px solid #007bff;
    background-color: #d0e8ff;
}

.card-image[custom-scope-identifier] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
}

.card-title[custom-scope-identifier] {
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
}

.label-column[custom-scope-identifier] {
    /* Keep if no equivalent in global-site.css */
    display: flex;
    align-items: center;
}

.time-slot-container[custom-scope-identifier] {
    /* Empty if flex-container is used from global-site.css */
}

.time-slot-btn[custom-scope-identifier] {
    background-color: cyan;
    color: black;
    width: 80px;
}

    .time-slot-btn.selected[custom-scope-identifier] {
        background-color: #86a723;
        color: white;
    }

.clear-btn[custom-scope-identifier] {
    color: red;
    float: right;
    margin-top: 5px;
}

.book-btn[custom-scope-identifier] {
    background-color: green;
    color: white;
}

.time-slot[custom-scope-identifier] {
    display: coverage;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 30px;
}

.color-box[custom-scope-identifier] {
    width: 15px;
    height: 15px;
    border-radius: 3px;
}

.main-container[custom-scope-identifier] {
    position: relative;
}

.blurPanel[custom-scope-identifier] {
    filter: blur(0.5px);
}

.time-slot.disabled[custom-scope-identifier] {
    pointer-events: none;
    cursor: not-allowed;
}

.rz-view-header[custom-scope-identifier] {
    font-weight: bold;
}

.rz-slot-header[custom-scope-identifier] {
    font-size: large;
}

.rz-slot-title[custom-scope-identifier] {
    text-align: center !important;
}

.rz-scheduler-month-view .rz-scheduler-table .rz-scheduler-date[custom-scope-identifier] {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    position: relative;
}

    .rz-scheduler-month-view .rz-scheduler-table .rz-scheduler-date:hover[custom-scope-identifier] {
        background-color: inherit !important;
    }

.rz-scheduler-month-view .rz-scheduler-date-header[custom-scope-identifier] {
    position: relative;
    z-index: 1;
    padding: 2px;
    font-weight: bold;
}

.rz-scheduler-month-view .rz-scheduler-date-content[custom-scope-identifier] {
    height: 100%;
    width: 100%;
    position: relative;
}

.rz-event-content[custom-scope-identifier] {
    height: 100% !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.rz-event-list-btn[custom-scope-identifier] {
    display: none;
}

.rz-slot[custom-scope-identifier] {
    border: 0.5px solid #00000078 !important;
}

.bordered-scheduler[custom-scope-identifier],
.bordered-scheduler .rz-scheduler-month-view .rz-scheduler-table td[custom-scope-identifier],
.bordered-scheduler .rz-scheduler-month-view .rz-scheduler-header[custom-scope-identifier],
.bordered-scheduler .rz-scheduler-month-view .rz-scheduler-header-cell[custom-scope-identifier],
.bordered-scheduler .rz-scheduler-month-view .rz-scheduler-appointment[custom-scope-identifier] {
    border: 1px solid #00000078 !important;
}

.rz-scheduler-month-view .rz-scheduler-appointment[custom-scope-identifier] {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*.rz-row {
    margin-top: var(--rz-mt, 0px) !important;
}
*/
/* /Components/Pages/ComputerBooking.razor.rz.scp.css */
/*body {
}
*/
/* /Components/Pages/ItemDetailFrbr.razor.rz.scp.css */
.col2[b-003bfzdzzo] {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
}

.loading-overlay[b-003bfzdzzo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.col3[b-003bfzdzzo] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
/* /Components/Pages/PatronDashboard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   PATRON DASHBOARD — Compact, elegant, WCAG AA compliant
   ══════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────── */
.pd-shell[b-fm7byoc9lg] {
    /* Spacing scale (4/8/12/16/24/32/48) */
    --pd-s1: 0.25rem;
    --pd-s2: 0.5rem;
    --pd-s3: 0.75rem;
    --pd-s4: 1rem;
    --pd-s5: 1.5rem;
    --pd-s6: 2rem;
    --pd-s7: 3rem;

    /* Type scale */
    --pd-t-xs: 0.75rem;
    --pd-t-sm: 0.8125rem;
    --pd-t-base: 0.875rem;
    --pd-t-md: 1rem;
    --pd-t-lg: 1.125rem;
    --pd-t-xl: 1.5rem;
    --pd-t-hero: 1.75rem;

    /* Colors (all AA-compliant on white) */
    --pd-bg: #f7f8fa;
    --pd-surface: #ffffff;
    --pd-surface-2: #f9fafb;
    --pd-border: #e5e7eb;
    --pd-border-strong: #d1d5db;

    --pd-text: #111827;            /* 16.1:1 */
    --pd-text-secondary: #4b5563;  /* 7.6:1  */
    --pd-text-muted: #6b7280;      /* 4.8:1  */

    --pd-primary: #2563eb;         /* 4.6:1  */
    /*--pd-primary-hover: #1d4ed8;*/
    --pd-primary-hover-new: #1d7199;
    --pd-primary-soft: #eff6ff;

    --pd-success: #15803d;         /* 4.8:1  */
    --pd-success-soft: #dcfce7;
    --pd-warning: #b45309;         /* 4.8:1  */
    --pd-warning-soft: #fef3c7;
    --pd-danger: #b91c1c;          /* 5.9:1  */
    --pd-danger-soft: #fee2e2;

    /* Radii / shadows */
    --pd-r-sm: 6px;
    --pd-r-md: 8px;
    --pd-r-lg: 12px;
    --pd-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
    --pd-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06);
    --pd-shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.08);

    --pd-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

    background-color: var(--pd-bg);
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    padding: var(--pd-s5) var(--pd-s4);
    color: var(--pd-text);
    font-size: var(--pd-t-base);
    line-height: 1.5;
}

/* ── Skip link (keyboard users) ───────────────────────────── */
.pd-skip-link[b-fm7byoc9lg] {
    position: absolute;
    top: -40px;
    left: 0.5rem;
    background-color: var(--rz-primary);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: var(--pd-r-sm);
    font-weight: 600;
    z-index: 100;
    text-decoration: none;
    transition: top 0.15s ease;
}

.pd-skip-link:focus[b-fm7byoc9lg] {
    top: 0.5rem;
    outline: none;
    box-shadow: var(--pd-focus);
}

/* ── Screen-reader only ───────────────────────────────────── */
.pd-sr-only[b-fm7byoc9lg] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Layout (content + sidebar) ───────────────────────────── */
.pd-layout[b-fm7byoc9lg] {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--pd-s5);
    align-items: start;
    position: relative;
}

.pd-content[b-fm7byoc9lg] {
    display: flex;
    flex-direction: column;
    gap: var(--pd-s5);
    min-width: 0; /* prevent grid blowout */
}

/* ── Sidebar ──────────────────────────────────────────────── */
.pd-sidebar[b-fm7byoc9lg] {
    position: sticky;
    top: var(--pd-s4);
    display: flex;
    flex-direction: column;
    gap: var(--pd-s3);
    max-height: calc(100vh - var(--pd-s5) * 2);
    max-height: calc(var(--vh, 1vh) * 100 - var(--pd-s5) * 2);
    overflow-y: auto;
    padding-right: 2px; /* space for scrollbar */
}

.pd-sidebar[b-fm7byoc9lg]::-webkit-scrollbar {
    width: 6px;
}

.pd-sidebar[b-fm7byoc9lg]::-webkit-scrollbar-thumb {
    background-color: var(--pd-border-strong);
    border-radius: 3px;
}

/* Sidebar header (only shown on mobile drawer) */
.pd-sidebar-header[b-fm7byoc9lg] {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--pd-s3);
    border-bottom: 1px solid var(--pd-border);
    margin-bottom: var(--pd-s1);
}

.pd-sidebar-title[b-fm7byoc9lg] {
    font-size: var(--pd-t-md);
    font-weight: 700;
    margin: 0;
    color: var(--pd-text);
}

.pd-sidebar-close[b-fm7byoc9lg] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--pd-r-sm);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pd-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-sidebar-close:hover[b-fm7byoc9lg] {
    background-color: var(--pd-surface-2);
    color: var(--pd-text);
}

.pd-sidebar-close:focus-visible[b-fm7byoc9lg] {
    outline: none;
    box-shadow: var(--pd-focus);
}

/* Mobile toggle button */
.pd-sidebar-toggle[b-fm7byoc9lg] {
    display: none;
    align-items: center;
    gap: var(--pd-s2);
    padding: 0.45rem 0.85rem;
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-border-strong);
    border-radius: var(--pd-r-sm);
    color: var(--pd-text-secondary);
    font-size: var(--pd-t-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    font-family: inherit;
    min-height: 36px;
}

.pd-sidebar-toggle:hover[b-fm7byoc9lg] {
    background-color: var(--pd-primary-soft);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.pd-sidebar-toggle:focus-visible[b-fm7byoc9lg] {
    outline: none;
    box-shadow: var(--pd-focus);
}

.pd-sidebar-toggle-icon[b-fm7byoc9lg] {
    font-size: 1.1rem;
    line-height: 1;
}

/* Hero actions wrapper (holds date + toggle) */
.pd-hero-actions[b-fm7byoc9lg] {
    display: flex;
    align-items: center;
    gap: var(--pd-s3);
}

/* ── Sidebar cards ────────────────────────────────────────── */
.pd-side-card[b-fm7byoc9lg] {
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-r-lg);
    padding: var(--pd-s4);
    display: flex;
    flex-direction: column;
    gap: var(--pd-s2);
}

.pd-side-card-head[b-fm7byoc9lg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pd-s2);
}

.pd-side-card-title[b-fm7byoc9lg] {
    font-size: var(--pd-t-sm);
    font-weight: 700;
    color: var(--pd-text);
    margin: 0;
    letter-spacing: -0.005em;
}

.pd-side-link[b-fm7byoc9lg] {
    /* Works identically as either <a> or <button> */
    display:         inline;
    font-size:       var(--pd-t-xs);
    font-weight:     700;
    color:           var(--rz-primary);
    text-decoration: none;
    margin-top:      var(--pd-s1);
    /* <button> resets */
    background:      none;
    border:          none;
    padding:         0;
    cursor:          pointer;
    font-family:     inherit;
    line-height:     inherit;
}

.pd-side-link:hover[b-fm7byoc9lg] {
    text-decoration: underline;
}

.pd-side-link:focus-visible[b-fm7byoc9lg] {
    outline:       none;
    box-shadow:    var(--pd-focus);
    border-radius: 3px;
}

/* Quick Actions grid */
.pd-qa-grid[b-fm7byoc9lg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pd-s2);
}

.pd-qa-btn[b-fm7byoc9lg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: var(--pd-s3) var(--pd-s2);
    background-color: var(--pd-surface-2);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-r-md);
    color: var(--pd-text-secondary);
    font-size: var(--pd-t-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
    font-family: inherit;
    min-height: 68px;
}

.pd-qa-btn:hover[b-fm7byoc9lg] {
    background-color: var(--pd-primary-soft);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    transform: translateY(-1px);
}

.pd-qa-btn:focus-visible[b-fm7byoc9lg] {
    outline: none;
    box-shadow: var(--pd-focus);
}

.pd-qa-btn .pd-qa-icon[b-fm7byoc9lg] {
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
}

.pd-qa-label[b-fm7byoc9lg] {
    font-weight: 600;
}

/* Library status */
.pd-status[b-fm7byoc9lg] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

.pd-status--open[b-fm7byoc9lg] {
    background-color: var(--pd-success-soft);
    color: var(--pd-success);
}

.pd-status-dot[b-fm7byoc9lg] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--pd-success);
    box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.6);
    animation: pd-pulse-green-b-fm7byoc9lg 2s ease-in-out infinite;
}

@keyframes pd-pulse-green-b-fm7byoc9lg {
    0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.6); }
    50%      { box-shadow: 0 0 0 5px rgba(21, 128, 61, 0); }
}

.pd-hours-main[b-fm7byoc9lg] {
    font-size: var(--pd-t-md);
    font-weight: 700;
    color: var(--pd-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.pd-hours-note[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-muted);
    margin: 0;
}

/* Reading Goal styles moved to ReadingInsightsCard sub-component */

/* Tip card */
.pd-side-card--tip[b-fm7byoc9lg] {
    background: linear-gradient(135deg, var(--pd-warning-soft) 0%, var(--pd-surface) 70%);
    border-color: #fde68a;
}

.pd-tip-icon[b-fm7byoc9lg] {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: -0.25rem;
}

.pd-tip-text[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Mobile backdrop */
.pd-sidebar-backdrop[b-fm7byoc9lg] {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 40;
    animation: pd-fade-in-b-fm7byoc9lg 0.2s ease;
}

@keyframes pd-fade-in-b-fm7byoc9lg {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── HERO ─────────────────────────────────────────────────── */
.pd-hero[b-fm7byoc9lg] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pd-s4);
    padding-bottom: var(--pd-s3);
    border-bottom: 1px solid var(--pd-border);
}

.pd-hero-title[b-fm7byoc9lg] {
    font-size: var(--pd-t-hero);
    font-weight: 700;
    color: var(--pd-text);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.pd-hero-name[b-fm7byoc9lg] {
    color: var(--rz-primary);
}

.pd-hero-subtitle[b-fm7byoc9lg] {
    font-size: var(--pd-t-sm);
    color: var(--pd-text-secondary);
    margin: var(--pd-s1) 0 0;
}

.pd-hero-date[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── Section primitives ───────────────────────────────────── */
.pd-section[b-fm7byoc9lg] {
    display: flex;
    flex-direction: column;
    gap: var(--pd-s3);
}

.pd-section-head[b-fm7byoc9lg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pd-s3);
}

.pd-section-title[b-fm7byoc9lg] {
    font-size: var(--pd-t-lg);
    font-weight: 700;
    color: var(--pd-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.pd-section-subtitle[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-muted);
    margin: var(--pd-s1) 0 0;
}

.pd-hl-success[b-fm7byoc9lg] {
    color: var(--pd-success);
    font-weight: 600;
}

/* Link buttons — accessible focus state */
.pd-link-btn :deep button[b-fm7byoc9lg],
.pd-link-btn[b-fm7byoc9lg] {
    color: var(--rz-primary) !important;
    font-size: var(--pd-t-sm) !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: var(--pd-r-sm) !important;
}

.pd-link-btn :deep button:focus-visible[b-fm7byoc9lg] {
    outline: none;
    box-shadow: var(--pd-focus);
}

.pd-inline-link[b-fm7byoc9lg] {
    color: var(--rz-primary);
    font-weight: 600;
    text-decoration: underline;
}

.pd-inline-link:focus-visible[b-fm7byoc9lg] {
    outline: none;
    box-shadow: var(--pd-focus);
    border-radius: 3px;
}

/* ── Stats grid ───────────────────────────────────────────── */
.pd-stats-grid[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pd-s3);
}

/* ── Alerts list ──────────────────────────────────────────── */
.pd-alerts-list[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pd-s2);
}

/* ══════════════════════════════════════════════════════════════
   EVENTS TABS
   ══════════════════════════════════════════════════════════════ */
.pd-tabs[b-fm7byoc9lg] {
    display:        flex;
    gap:            var(--pd-s2);
    margin-bottom:  var(--pd-s4);
    border-bottom:  1px solid var(--pd-border);
}

.pd-tab[b-fm7byoc9lg] {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    background:      none;
    border:          none;
    padding:         0.55rem 0.85rem;
    font:            inherit;
    font-size:       var(--pd-t-sm);
    font-weight:     600;
    color:           var(--pd-text-muted);
    cursor:          pointer;
    border-bottom:   2px solid transparent;
    margin-bottom:   -1px;
    transition:      color 0.15s ease, border-color 0.15s ease;
}

.pd-tab:hover[b-fm7byoc9lg] {
    color: var(--pd-text);
}

.pd-tab:focus-visible[b-fm7byoc9lg] {
    outline:        none;
    box-shadow:     var(--pd-focus);
    border-radius:  var(--pd-r-sm);
}

.pd-tab--active[b-fm7byoc9lg] {
    color:                 var(--rz-primary);
    border-bottom-color:   var(--rz-primary);
}

.pd-tab-count[b-fm7byoc9lg] {
    background:     var(--pd-primary-soft);
    color:          var(--rz-primary);
    border-radius:  999px;
    font-size:      0.65rem;
    font-weight:    700;
    padding:        0.1rem 0.45rem;
    line-height:    1.5;
}

.pd-tab--active .pd-tab-count[b-fm7byoc9lg] {
    background: var(--rz-primary);
    color:      #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .pd-tab[b-fm7byoc9lg] { transition: none; }
}

/* ── Events toggle button ─────────────────────────────────── */
.pd-events-toggle[b-fm7byoc9lg] {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    background:  none;
    border:      none;
    padding:     0;
    cursor:      pointer;
    font-family: inherit;
    /* text colour / size inherited from .pd-link-btn */
}

.pd-events-toggle-chevron[b-fm7byoc9lg] {
    display:    inline-block;
    width:      0;
    height:     0;
    border-left:   4px solid transparent;
    border-right:  4px solid transparent;
    border-top:    5px solid currentColor;
    transition:    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink:   0;
    /* nudge down a hair for optical alignment */
    margin-top:    1px;
}

.pd-events-toggle-chevron--open[b-fm7byoc9lg] {
    transform: rotate(-180deg);
}

/* ── Events grid ──────────────────────────────────────────── */
.pd-events-grid[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pd-s3);
}

/* ── Extra events — slide-down panel ─────────────────────── */
/*
 * max-height: 0  →  overflow hidden clips the content (collapsed).
 * max-height: 2400px  →  generous ceiling for up to 3 extra rows of cards.
 * The ease-out curve makes the opening feel snappy and the closing smooth.
 *
 * The inner __inner div translates up slightly and fades in on expand,
 * giving a polished "cards rising into view" effect.
 */
.pd-events-extra[b-fm7byoc9lg] {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-events-extra--open[b-fm7byoc9lg] {
    max-height: 2400px;
    /* slower ease-in so the closing doesn't feel abrupt */
    transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-events-extra__inner[b-fm7byoc9lg] {
    padding-top: var(--pd-s3);
    /* slide + fade while the container is opening */
    transform: translateY(-10px);
    opacity:   0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
                opacity   0.3s  ease                          0.04s;
}

.pd-events-extra--open .pd-events-extra__inner[b-fm7byoc9lg] {
    transform: translateY(0);
    opacity:   1;
}

/* "Browse all events →" footer row inside the expanded panel */
.pd-events-browse-row[b-fm7byoc9lg] {
    display:         flex;
    justify-content: flex-end;
    margin-top:      var(--pd-s2);
}

.pd-events-browse-link[b-fm7byoc9lg] {
    font-size:   var(--pd-t-sm);
    font-weight: 700;
    background:  none;
    border:      none;
    padding:     0;
    cursor:      pointer;
    font-family: inherit;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .pd-events-extra[b-fm7byoc9lg],
    .pd-events-extra--open[b-fm7byoc9lg] {
        transition: none;
    }
    .pd-events-extra__inner[b-fm7byoc9lg],
    .pd-events-extra--open .pd-events-extra__inner[b-fm7byoc9lg] {
        transition:  none;
        transform:   none;
        opacity:     1;
    }
    .pd-events-toggle-chevron[b-fm7byoc9lg] {
        transition: none;
    }
}

/* ── Panel list (used for recommendations and new titles) ── */
.pd-panel-list[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pd-s2);
    max-height: 500px; /* Show about 5-6 items before scrolling */
    overflow-y: auto;
    padding-right: var(--pd-s2); /* space for scrollbar */
}

/* Custom scrollbar for the panel lists */
.pd-panel-list[b-fm7byoc9lg]::-webkit-scrollbar {
    width: 6px;
}

.pd-panel-list[b-fm7byoc9lg]::-webkit-scrollbar-track {
    background: transparent;
}

.pd-panel-list[b-fm7byoc9lg]::-webkit-scrollbar-thumb {
    background-color: var(--pd-border-strong);
    border-radius: 3px;
}

.pd-panel-list[b-fm7byoc9lg]::-webkit-scrollbar-thumb:hover {
    background-color: var(--pd-text-muted);
}

/* Borrowed list ────────────────────────────────────────── */
.pd-borrowed-list[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pd-s2);
}

@media (max-width: 640px) {
    .pd-borrowed-list[b-fm7byoc9lg] {
        grid-template-columns: 1fr;
    }
}

/* ── Empty states ─────────────────────────────────────────── */
.pd-empty[b-fm7byoc9lg] {
    font-size: var(--pd-t-sm);
    color: var(--pd-text-muted);
    background-color: var(--pd-surface-2);
    border: 1px dashed var(--pd-border);
    border-radius: var(--pd-r-md);
    padding: var(--pd-s4);
    margin: 0;
    text-align: center;
}

.pd-empty-state[b-fm7byoc9lg] {
    text-align: center;
    padding: var(--pd-s6) var(--pd-s4);
    background-color: var(--pd-surface-2);
    border: 1px dashed var(--pd-border);
    border-radius: var(--pd-r-lg);
}

.pd-empty-icon[b-fm7byoc9lg] {
    font-size: 2rem;
    margin-bottom: var(--pd-s2);
    opacity: 0.7;
}

.pd-empty-title[b-fm7byoc9lg] {
    font-size: var(--pd-t-md);
    font-weight: 700;
    color: var(--pd-text-secondary);
    margin: 0 0 var(--pd-s1);
}

.pd-empty-text[b-fm7byoc9lg] {
    font-size: var(--pd-t-sm);
    color: var(--pd-text-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   HOLDS & RESERVATIONS
   ══════════════════════════════════════════════════════════════ */

/* New compact 2-column grid (used by HoldCard sub-component).
   Collapses to a single column on narrow viewports for legibility. */
.pd-holds-grid[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pd-s3);
}

.pd-holds-grid > li[b-fm7byoc9lg] {
    display: flex;
    width: 100%;   /* force the cell to fill its grid column */
}

@media (max-width: 720px) {
    .pd-holds-grid[b-fm7byoc9lg] {
        grid-template-columns: 1fr;
    }
}

/* Legacy single-column list (kept for backward compatibility) */
.pd-holds-list[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pd-s3);
}

.pd-hold[b-fm7byoc9lg] {
    position: relative;
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-r-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pd-hold:hover[b-fm7byoc9lg],
.pd-hold:focus-within[b-fm7byoc9lg] {
    box-shadow: var(--pd-shadow-md);
    transform: translateY(-1px);
}

.pd-hold--ready[b-fm7byoc9lg] {
    border-color: #86efac;
    background: linear-gradient(135deg, #f0fdf4 0%, var(--pd-surface) 55%);
}

.pd-hold--queue[b-fm7byoc9lg]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #4f46e5, var(--rz-primary));
}

/* Ribbon */
.pd-hold-ribbon[b-fm7byoc9lg] {
    display: flex;
    align-items: center;
    gap: var(--pd-s2);
    background: linear-gradient(90deg, #16a34a, #15803d);
    color: #ffffff;
    font-size: var(--pd-t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem var(--pd-s4);
}

.pd-hold-ribbon-dot[b-fm7byoc9lg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: pd-pulse-b-fm7byoc9lg 2s ease-in-out infinite;
}

@keyframes pd-pulse-b-fm7byoc9lg {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Main row */
.pd-hold-main[b-fm7byoc9lg] {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--pd-s4);
    padding: var(--pd-s4);
}

.pd-hold-cover[b-fm7byoc9lg] {
    width: 64px;
    height: 90px;
    border-radius: var(--pd-r-sm);
    overflow: hidden;
    background-color: var(--pd-border);
    box-shadow: var(--pd-shadow-sm);
    flex-shrink: 0;
}

.pd-hold-cover img[b-fm7byoc9lg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-hold-cover-ph[b-fm7byoc9lg] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pd-text-muted);
    font-size: 1.5rem;
}

.pd-hold-body[b-fm7byoc9lg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-hold-title[b-fm7byoc9lg] {
    font-size: var(--pd-t-md);
    font-weight: 700;
    color: var(--pd-text);
    line-height: 1.25;
    margin: 0 0 var(--pd-s1);
}

.pd-hold-author[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-muted);
    margin: 0 0 var(--pd-s3);
}

/* Ready details */
.pd-hold-details[b-fm7byoc9lg] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.pd-hold-detail dd[b-fm7byoc9lg] {
    font-size: var(--pd-t-sm);
    color: var(--pd-text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--pd-s2);
}

.pd-hold-detail--urgent dd[b-fm7byoc9lg] {
    color: var(--pd-warning);
    font-weight: 500;
}

.pd-hold-detail dd strong[b-fm7byoc9lg] {
    color: var(--pd-text);
    font-weight: 700;
}

.pd-hold-detail-icon[b-fm7byoc9lg] {
    font-size: var(--pd-t-base);
    line-height: 1;
    flex-shrink: 0;
}

/* Queue state */
.pd-hold-queue[b-fm7byoc9lg] {
    display: flex;
    flex-direction: column;
    gap: var(--pd-s2);
}

.pd-hold-queue-stat[b-fm7byoc9lg] {
    display: flex;
    align-items: baseline;
    gap: var(--pd-s2);
    flex-wrap: wrap;
}

.pd-hold-pos[b-fm7byoc9lg] {
    font-size: var(--pd-t-xl);
    font-weight: 800;
    color: #4f46e5;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pd-hold-pos-label[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.pd-hold-eta[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-muted);
    margin-left: auto;
}

.pd-hold-eta strong[b-fm7byoc9lg] {
    color: var(--pd-text-secondary);
    font-weight: 700;
}

.pd-hold-track[b-fm7byoc9lg] {
    position: relative;
    height: 5px;
    background-color: var(--pd-border);
    border-radius: 999px;
    margin-top: var(--pd-s1);
}

.pd-hold-fill[b-fm7byoc9lg] {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #4f46e5, var(--rz-primary));
    border-radius: 999px;
    transition: width 0.6s ease;
}

.pd-hold-marker[b-fm7byoc9lg] {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pd-surface);
    border: 2px solid #4f46e5;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
}

.pd-hold-legend[b-fm7byoc9lg] {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--pd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-top: var(--pd-s1);
}

/* Actions */
.pd-hold-actions[b-fm7byoc9lg] {
    display: flex;
    gap: var(--pd-s2);
    padding: var(--pd-s3) var(--pd-s4);
    border-top: 1px dashed var(--pd-border);
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS (accessible, consistent)
   ══════════════════════════════════════════════════════════════ */
.pd-btn[b-fm7byoc9lg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pd-s2);
    padding: 0.45rem 0.85rem;
    border-radius: var(--pd-r-sm);
    font-size: var(--pd-t-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    font-family: inherit;
    line-height: 1.2;
    min-height: 34px; /* 44px touch target when wrapped */
}

.pd-btn:focus-visible[b-fm7byoc9lg] {
    outline: none;
    box-shadow: var(--pd-focus);
}

.pd-btn--primary[b-fm7byoc9lg] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(21, 128, 61, 0.3);
}

.pd-btn--primary:hover[b-fm7byoc9lg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(21, 128, 61, 0.4);
}

.pd-btn--ghost[b-fm7byoc9lg] {
    background-color: transparent;
    border-color: var(--pd-border-strong);
    color: var(--pd-text-secondary);
}

    .pd-btn--ghost:hover[b-fm7byoc9lg] {
        border-color: var(--rz-danger);
        color: var(--rz-danger);
        background-color: var(--pd-danger-soft);
    }

.pd-btn--subtle[b-fm7byoc9lg] {
    background-color: var(--pd-primary-soft);
    color: var(--rz-primary);
}

.pd-btn--subtle:hover[b-fm7byoc9lg] {
    background-color: #dbeafe;
}

.pd-btn-arrow[b-fm7byoc9lg] {
    transition: transform 0.2s ease;
}

.pd-btn--primary:hover .pd-btn-arrow[b-fm7byoc9lg] {
    transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════
   DISCOVER (Recommended + New Titles)
   ══════════════════════════════════════════════════════════════ */
.pd-discover-grid[b-fm7byoc9lg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pd-s4);
}

.pd-panel[b-fm7byoc9lg] {
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pd-panel-head[b-fm7byoc9lg] {
    display: flex;
    align-items: center;
    gap: var(--pd-s3);
    padding: var(--pd-s3) var(--pd-s4);
    border-bottom: 1px solid var(--pd-border);
}

.pd-panel-icon[b-fm7byoc9lg] {
    width: 28px;
    height: 28px;
    border-radius: var(--pd-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pd-t-md);
    flex-shrink: 0;
    font-weight: 700;
}

.pd-panel-icon--rec[b-fm7byoc9lg] {
    background-color: var(--pd-warning-soft);
    color: var(--pd-warning);
}

.pd-panel-icon--new[b-fm7byoc9lg] {
    background-color: var(--pd-primary-soft);
    color: var(--rz-primary);
}

.pd-panel-titles[b-fm7byoc9lg] {
    flex: 1;
    min-width: 0;
}

.pd-panel-title[b-fm7byoc9lg] {
    font-size: var(--pd-t-base);
    font-weight: 700;
    color: var(--pd-text);
    margin: 0;
    line-height: 1.2;
}

.pd-panel-subtitle[b-fm7byoc9lg] {
    font-size: var(--pd-t-xs);
    color: var(--pd-text-muted);
    margin: 2px 0 0;
}

.pd-panel-body[b-fm7byoc9lg] {
    padding: 0;
}

.pd-panel-list[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   FOCUS STYLES (global, accessible)
   ══════════════════════════════════════════════════════════════ */
.pd-shell button:focus-visible[b-fm7byoc9lg],
.pd-shell a:focus-visible[b-fm7byoc9lg],
.pd-shell input:focus-visible[b-fm7byoc9lg],
.pd-shell [role="button"]:focus-visible[b-fm7byoc9lg] {
    outline: none;
    box-shadow: var(--pd-focus);
    border-radius: var(--pd-r-sm);
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .pd-shell *[b-fm7byoc9lg],
    .pd-shell *[b-fm7byoc9lg]::before,
    .pd-shell *[b-fm7byoc9lg]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST
   ══════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
    .pd-shell[b-fm7byoc9lg] {
        --pd-border: #000000;
        --pd-border-strong: #000000;
        --pd-text-muted: #374151;
    }
    .pd-hold[b-fm7byoc9lg],
    .pd-panel[b-fm7byoc9lg] {
        border-width: 2px;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Below 1024px: sidebar becomes slide-in drawer ───────── */
@media (max-width: 1024px) {
    .pd-layout[b-fm7byoc9lg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-sidebar-toggle[b-fm7byoc9lg] {
        display: inline-flex;
    }

    .pd-sidebar[b-fm7byoc9lg] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(340px, 90vw);
        max-height: 100vh;
        max-height: calc(var(--vh, 1vh) * 100);
        background-color: var(--pd-bg);
        border-left: 1px solid var(--pd-border);
        padding: var(--pd-s4);
        gap: var(--pd-s3);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 50;
        box-shadow: -8px 0 24px rgba(17, 24, 39, 0.1);
    }

    .pd-sidebar--open[b-fm7byoc9lg] {
        transform: translateX(0);
    }

    .pd-sidebar-header[b-fm7byoc9lg] {
        display: flex;
    }

    .pd-sidebar-backdrop[b-fm7byoc9lg] {
        display: block;
    }
}

@media (max-width: 960px) {
    .pd-stats-grid[b-fm7byoc9lg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pd-events-grid[b-fm7byoc9lg] {
        grid-template-columns: 1fr;
    }
    .pd-discover-grid[b-fm7byoc9lg] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pd-shell[b-fm7byoc9lg] {
        padding: var(--pd-s4) var(--pd-s3);
    }

    .pd-hero[b-fm7byoc9lg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-hero-title[b-fm7byoc9lg] {
        font-size: var(--pd-t-xl);
    }

    .pd-hero-date[b-fm7byoc9lg] {
        font-size: 0.7rem;
    }

    .pd-section-head[b-fm7byoc9lg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-hold-main[b-fm7byoc9lg] {
        grid-template-columns: 52px 1fr;
        gap: var(--pd-s3);
        padding: var(--pd-s3);
    }

    .pd-hold-cover[b-fm7byoc9lg] {
        width: 52px;
        height: 72px;
    }

    .pd-hold-eta[b-fm7byoc9lg] {
        margin-left: 0;
        flex-basis: 100%;
    }

    .pd-hold-actions[b-fm7byoc9lg] {
        flex-direction: column;
        padding: var(--pd-s3);
    }

    .pd-btn[b-fm7byoc9lg] {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .pd-stats-grid[b-fm7byoc9lg] {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════
   ASK INSIGNIA (AI) VIEW — matches dashboard tokens
   ══════════════════════════════════════════════════════════════ */
.pd-askai-wrap[b-fm7byoc9lg] {
    display: flex;
    flex-direction: column;
    gap: var(--pd-s4);
}

    /* Title line — same weight/size as other section titles, with a subtle primary-tinted icon chip */
    .pd-askai-wrap .pd-askai-title[b-fm7byoc9lg] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

.pd-askai-icon[b-fm7byoc9lg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--pd-r-sm);
    background-color: var(--pd-primary-soft);
    color: var(--rz-primary);
    line-height: 1;
}

    .pd-askai-icon .rzi[b-fm7byoc9lg],
    .pd-askai-icon .rz-icon[b-fm7byoc9lg] {
        font-size: 1.1rem;
        color: inherit;
    }

.pd-askai-body[b-fm7byoc9lg] {
    /* AskAI paints its own chrome — this wrapper is just a sizing container
       so the component inherits the dashboard's typography/spacing. */
    background-color: transparent;
    border: none;
    padding: 0;
    min-height: 420px;
}

/* Active state for Quick-Action toggle buttons — uses the dashboard primary */
.pd-qa-btn--active[b-fm7byoc9lg] {
    background-color: var(--rz-primary);
    border-color: var(--rz-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

    .pd-qa-btn--active:hover[b-fm7byoc9lg] {
        background-color: var(--rz-primary-dark);
        border-color: var(--rz-primary-dark);
        /*background-color: var(--pd-primary-hover-new);
        border-color: var(--pd-primary-hover-new);*/
        color: #ffffff;
        transform: translateY(-1px);
    }

    .pd-qa-btn--active .pd-qa-icon[b-fm7byoc9lg],
    .pd-qa-btn--active .pd-qa-label[b-fm7byoc9lg] {
        color: #ffffff;
    }

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING STATES
   Shimmer placeholders shown while each section's data is
   loading.  Each section flips its _loading* flag to false
   once data arrives, swapping the skeleton for real content.
   ══════════════════════════════════════════════════════════════ */

@keyframes pd-shimmer-b-fm7byoc9lg {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.pd-skeleton[b-fm7byoc9lg] {
    border-radius: var(--pd-r-md);
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 600px 100%;
    animation: pd-shimmer-b-fm7byoc9lg 1.4s ease-in-out infinite;
}

/* ── Stat card placeholder ───────────────────────────────── */
.pd-skeleton--stat[b-fm7byoc9lg] {
    height: 82px;
    border-radius: var(--pd-r-lg);
}

/* ── Short subtitle line ─────────────────────────────────── */
.pd-skeleton--subtitle[b-fm7byoc9lg] {
    height: 14px;
    width: 180px;
    margin-top: 4px;
    border-radius: 4px;
}

/* ── Tab bar placeholder ─────────────────────────────────── */
.pd-skeleton--tabs[b-fm7byoc9lg] {
    height: 38px;
    width: 280px;
    margin-bottom: var(--pd-s4);
    border-radius: var(--pd-r-sm);
}

/* ── Event card placeholder ──────────────────────────────── */
.pd-skeleton--event-card[b-fm7byoc9lg] {
    height: 220px;
    border-radius: var(--pd-r-lg);
}

/* ── Hold card placeholder ───────────────────────────────── */
.pd-skeleton--hold-card[b-fm7byoc9lg] {
    height: 160px;
    border-radius: var(--pd-r-lg);
}

/* ── Borrowed book row placeholder ───────────────────────── */
.pd-skeleton--book-row[b-fm7byoc9lg] {
    height: 72px;
    border-radius: var(--pd-r-md);
}

/* ── Favorites carousel placeholder ─────────────────────── */
.pd-skeleton--carousel[b-fm7byoc9lg] {
    height: 160px;
    border-radius: var(--pd-r-lg);
}

/* ── Library hours sidebar placeholder ───────────────────── */
.pd-skeleton--hours[b-fm7byoc9lg] {
    height: 80px;
    border-radius: var(--pd-r-md);
}

/* Skeleton grid: reuse existing grid class but override child gap */
.pd-skeleton-grid[b-fm7byoc9lg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pd-s3);
}

/* Keep stat skeletons in the same 4-col grid as real stat cards */
.pd-stats-grid.pd-skeleton-grid[b-fm7byoc9lg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-direction: unset;
}

/* Keep event skeletons in the 3-col events grid */
.pd-events-grid.pd-skeleton-grid[b-fm7byoc9lg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    flex-direction: unset;
}

/* Keep hold skeletons in the 2-col holds grid */
.pd-holds-grid.pd-skeleton-grid[b-fm7byoc9lg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-direction: unset;
}

@media (prefers-reduced-motion: reduce) {
    .pd-skeleton[b-fm7byoc9lg] {
        animation: none;
        background: #ececec;
    }
}

@media (max-width: 900px) {
    .pd-stats-grid.pd-skeleton-grid[b-fm7byoc9lg] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pd-stats-grid.pd-skeleton-grid[b-fm7byoc9lg] {
        grid-template-columns: 1fr;
    }
    .pd-holds-grid.pd-skeleton-grid[b-fm7byoc9lg] {
        grid-template-columns: 1fr;
    }
}


/* ── Sidebar sign-out link ─────────────────────────────────── */
.pd-sidebar-signout[b-fm7byoc9lg] {
    padding: 0.4rem 0.75rem 1rem;
    text-align: center;
}

.pd-signout-btn[b-fm7byoc9lg] {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: color 0.15s;
}

.pd-signout-btn:hover[b-fm7byoc9lg] { color: var(--rz-danger); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE
   Applied via .pd-dark on the .pd-shell wrapper.
   The cascading parameter IsDarkMode (from MainLayout) flips
   this class — identical pattern to Setting.razor, AskAI.razor, etc.

   Strategy: override every CSS custom property declared on
   .pd-shell so that all child rules that reference those tokens
   adapt automatically.  Only a handful of elements with
   hard-coded colour literals need individual selectors.
   ══════════════════════════════════════════════════════════════ */

/* ── Design-token overrides ───────────────────────────────── */
.pd-shell.pd-dark[b-fm7byoc9lg] {
    --pd-bg:            #111214;
    --pd-surface:       #1b1d20;
    --pd-surface-2:     #25262b;
    --pd-border:        rgba(255, 255, 255, .08);
    --pd-border-strong: rgba(255, 255, 255, .14);

    --pd-text:           #f3f4f6;
    --pd-text-secondary: #d1d5db;
    --pd-text-muted:     #9ca3af;

    --pd-primary-soft:  rgba(37, 99, 235, .18);
    --pd-success-soft:  rgba(21, 128, 61,  .22);
    --pd-warning-soft:  rgba(180, 83, 9,   .22);
    --pd-danger-soft:   rgba(185, 28, 28,  .22);

    --pd-shadow-sm: 0 1px  2px rgba(0, 0, 0, .45);
    --pd-shadow-md: 0 4px 12px rgba(0, 0, 0, .55);
    --pd-shadow-lg: 0 12px 28px rgba(0, 0, 0, .65);
}

/* ── Skeleton shimmer — dark palette ─────────────────────── */
.pd-shell.pd-dark .pd-skeleton[b-fm7byoc9lg] {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, .07) 25%,
        rgba(255, 255, 255, .03) 50%,
        rgba(255, 255, 255, .07) 75%
    );
    background-size: 600px 100%;
}

/* ── Sidebar toggle button (mobile) ──────────────────────── */
.pd-shell.pd-dark .pd-sidebar-toggle[b-fm7byoc9lg] {
    background-color: var(--pd-surface);
    border-color: var(--pd-border-strong);
    color: var(--pd-text-secondary);
}

/* ── Hold card — ready-for-pickup accent ─────────────────── */
.pd-shell.pd-dark .pd-hold--ready[b-fm7byoc9lg] {
    border-color: rgba(134, 239, 172, .25);
    background: linear-gradient(135deg, rgba(21, 128, 61, .15) 0%, var(--pd-surface) 55%);
}

/* ── Queue hold — progress bar marker (uses surface token) ── */
.pd-shell.pd-dark .pd-hold-marker[b-fm7byoc9lg] {
    background: var(--pd-surface);
}

/* ── Tip card ─────────────────────────────────────────────── */
.pd-shell.pd-dark .pd-side-card--tip[b-fm7byoc9lg] {
    background: linear-gradient(135deg, rgba(180, 83, 9, .15) 0%, var(--pd-surface) 70%);
    border-color: rgba(252, 211, 77, .14);
}

/* ── Status dot — open (green pulse already uses rgba) ────── */
.pd-shell.pd-dark .pd-status--open[b-fm7byoc9lg] {
    background-color: rgba(21, 128, 61, .25);
}

/* ── Mobile sidebar drawer ────────────────────────────────── */
@media (max-width: 1024px) {
    .pd-shell.pd-dark .pd-sidebar[b-fm7byoc9lg] {
        background-color: var(--pd-bg);
        border-left-color: var(--pd-border);
        box-shadow: -8px 0 24px rgba(0, 0, 0, .55);
    }
}

/* ── "View all" / link buttons — Radzen Variant.Text override ── */
.pd-shell.pd-dark .pd-link-btn :deep(.rz-button)[b-fm7byoc9lg],
.pd-shell.pd-dark .pd-link-btn :deep(.rz-button.rz-variant-text)[b-fm7byoc9lg] {
    background-color: transparent !important;
    color: var(--rz-primary) !important;
}

.pd-shell.pd-dark .pd-link-btn :deep(.rz-button:hover)[b-fm7byoc9lg],
.pd-shell.pd-dark .pd-link-btn :deep(.rz-button.rz-variant-text:hover)[b-fm7byoc9lg] {
    background-color: rgba(37, 99, 235, .12) !important;
    color: var(--rz-primary) !important;
}

.pd-shell.pd-dark .pd-inline-link[b-fm7byoc9lg],
.pd-shell.pd-dark .pd-events-browse-link[b-fm7byoc9lg] {
    color: var(--rz-primary);
}

/* ── Reduced-motion: static dark skeleton ────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pd-shell.pd-dark .pd-skeleton[b-fm7byoc9lg] {
        animation: none;
        background: rgba(255, 255, 255, .06);
    }
}
/* /Components/Pages/SearchResultFrbr.razor.rz.scp.css */

/* /Components/SubComponents/Borrow/LoanComponents/LoanHistory.razor.rz.scp.css */
.loaderpanel[b-gj3mr4qmor] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    filter: blur(5px);
    z-index: 1;
}

.blurPanel[b-gj3mr4qmor] {
    filter: blur(5px);
}

.loader[b-gj3mr4qmor] {
    overflow: visible;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 2;
}

.pointer-cursor[b-gj3mr4qmor] {
    cursor: pointer;
}

.fine-item-thumbnail[b-gj3mr4qmor] {
    width: 100%;
    height: 250px;
    max-width: 180px;
    /* max-height: 100%; */
    /* min-height: 180px; */
}

.rounded-button[b-gj3mr4qmor] {
    border-radius: 50%;
    position: absolute;
    top: -14px;
    right: -10px;
}

.cardcontainer[b-gj3mr4qmor] {
    position: relative;
}

.loadinglabel[b-gj3mr4qmor] {
    margin-top: 86px;
    position: absolute;
    min-width: 150px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.align-vertical-right[b-gj3mr4qmor] {
    display: flex;
    align-items: center; /* Vertical center */
    height: 100px;
}

/* /Components/SubComponents/LibraryDirectionsDialog.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Library Directions Dialog — scoped styles
   ════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (light mode defaults) ─────────────── */
.lda[b-dxyn3l2uxg] {
    --lda-text:          #111827;
    --lda-text-muted:    #6b7280;
    --lda-text-link:     #2563eb;
    --lda-text-link-h:   #1d4ed8;
    --lda-border:        #e5e7eb;
    --lda-surface:       #f9fafb;
    --lda-name-color:    #111827;
    --lda-maps-bg:       #2563eb;
    --lda-maps-bg-h:     #1d4ed8;
    --lda-maps-fg:       #ffffff;
    --lda-radius:        8px;
    --lda-radius-btn:    10px;

    padding:     0;
    font-family: inherit;
    min-width:   280px;
}

/* ── Dark mode overrides ─────────────────────────────────────── */
.lda--dark[b-dxyn3l2uxg] {
    --lda-text:          #f9fafb;
    --lda-text-muted:    #9ca3af;
    --lda-text-link:     #93c5fd;
    --lda-text-link-h:   #bfdbfe;
    --lda-border:        #374151;
    --lda-surface:       #1f2937;
    --lda-name-color:    #f9fafb;
    --lda-maps-bg:       #1d4ed8;
    --lda-maps-bg-h:     #1e40af;
    --lda-maps-fg:       #ffffff;
}

/* ── Library name ────────────────────────────────────────────── */
.lda-name[b-dxyn3l2uxg] {
    font-size:    1rem;
    font-weight:  700;
    color:        var(--lda-name-color);
    margin:       0 0 0.75rem;
    line-height:  1.3;
}

/* ── Address block ───────────────────────────────────────────── */
.lda-address[b-dxyn3l2uxg] {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    font-style:     normal;
    padding:        0.875rem 1rem;
    background:     var(--lda-surface);
    border:         1px solid var(--lda-border);
    border-radius:  var(--lda-radius);
    margin-bottom:  1rem;
}

.lda-address-line[b-dxyn3l2uxg] {
    font-size:   0.9rem;
    color:       var(--lda-text);
    line-height: 1.5;
}

/* ── Contact list ────────────────────────────────────────────── */
.lda-contacts[b-dxyn3l2uxg] {
    list-style:     none;
    margin:         0 0 1.25rem;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
}

.lda-contact-row[b-dxyn3l2uxg] {
    display:     flex;
    align-items: center;
    gap:         0.55rem;
}

.lda-contact-icon[b-dxyn3l2uxg] {
    display:     flex;
    align-items: center;
    color:       var(--lda-text-muted);
    font-size:   1rem;
    flex-shrink: 0;
    width:       20px;
}

.lda-contact-link[b-dxyn3l2uxg] {
    font-size:       0.875rem;
    color:           var(--lda-text-link);
    text-decoration: none;
    word-break:      break-all;
}

.lda-contact-link:hover[b-dxyn3l2uxg] {
    color:           var(--lda-text-link-h);
    text-decoration: underline;
}

.lda-contact-link:focus-visible[b-dxyn3l2uxg] {
    outline:    2px solid var(--lda-text-link);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Google Maps button ──────────────────────────────────────── */
.lda-maps-btn[b-dxyn3l2uxg] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.45rem;
    width:           100%;
    padding:         0.7rem 1rem;
    background:      var(--lda-maps-bg);
    color:           var(--lda-maps-fg);
    font-size:       0.9rem;
    font-weight:     600;
    border-radius:   var(--lda-radius-btn);
    text-decoration: none;
    transition:      background-color 0.15s ease, transform 0.12s ease;
}

.lda-maps-btn:hover[b-dxyn3l2uxg] {
    background: var(--lda-maps-bg-h);
    transform:  translateY(-1px);
}

.lda-maps-btn:focus-visible[b-dxyn3l2uxg] {
    outline:        2px solid var(--lda-maps-bg);
    outline-offset: 3px;
    border-radius:  var(--lda-radius-btn);
}

.lda-maps-icon[b-dxyn3l2uxg] {
    font-size: 1.05rem !important;
}

.lda-maps-arrow[b-dxyn3l2uxg] {
    font-size:   0.8rem;
    margin-left: auto;
    opacity:     0.8;
}

/* ── Empty state ─────────────────────────────────────────────── */
.lda-empty[b-dxyn3l2uxg] {
    font-size:  0.875rem;
    color:      var(--lda-text-muted);
    text-align: center;
    padding:    1.5rem 0;
    margin:     0;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lda-maps-btn[b-dxyn3l2uxg] {
        transition: none;
    }
}
/* /Components/SubComponents/LibraryHoursScheduleDialog.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Library Hours Schedule Dialog — scoped styles
   ════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (light mode defaults) ─────────────── */
.lhd[b-knzdosipur] {
    --lhd-text:          #111827;
    --lhd-text-secondary:#374151;
    --lhd-muted:         #9ca3af;
    --lhd-border:        #e5e7eb;
    --lhd-row-hover:     #f9fafb;
    --lhd-today-bg:      #eff6ff;
    --lhd-today-text:    #1d4ed8;
    --lhd-today-badge-bg:#dbeafe;
    --lhd-open-banner-bg:#ecfdf5;
    --lhd-open-banner-fg:#065f46;
    --lhd-open-dot:      #10b981;
    --lhd-closed-banner-bg:#fef2f2;
    --lhd-closed-banner-fg:#991b1b;
    --lhd-closed-dot:    #ef4444;
    --lhd-closed-row-text:#9ca3af;
    --lhd-radius:        8px;
    --lhd-radius-sm:     6px;
    --lhd-font:          inherit;
    padding: 0;
    font-family: var(--lhd-font);
    min-width: 300px;
}

/* ── Dark mode overrides ─────────────────────────────────────── */
.lhd--dark[b-knzdosipur] {
    --lhd-text:          #f9fafb;
    --lhd-text-secondary:#d1d5db;
    --lhd-muted:         #6b7280;
    --lhd-border:        #374151;
    --lhd-row-hover:     #1f2937;
    --lhd-today-bg:      #1e3a5f;
    --lhd-today-text:    #93c5fd;
    --lhd-today-badge-bg:#1e40af;
    --lhd-open-banner-bg:#064e3b;
    --lhd-open-banner-fg:#6ee7b7;
    --lhd-open-dot:      #34d399;
    --lhd-closed-banner-bg:#450a0a;
    --lhd-closed-banner-fg:#fca5a5;
    --lhd-closed-dot:    #f87171;
    --lhd-closed-row-text:#6b7280;
}

/* ── Status banner ───────────────────────────────────────────── */
.lhd-banner[b-knzdosipur] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border-radius: var(--lhd-radius);
    margin-bottom: 1.125rem;
    font-size: 0.9rem;
}

.lhd-banner--open[b-knzdosipur] {
    background-color: var(--lhd-open-banner-bg);
    color:            var(--lhd-open-banner-fg);
}

.lhd-banner--closed[b-knzdosipur] {
    background-color: var(--lhd-closed-banner-bg);
    color:            var(--lhd-closed-banner-fg);
}

.lhd-banner-dot[b-knzdosipur] {
    width:            9px;
    height:           9px;
    border-radius:    50%;
    flex-shrink:      0;
}

.lhd-banner--open  .lhd-banner-dot[b-knzdosipur] { background-color: var(--lhd-open-dot); }
.lhd-banner--closed .lhd-banner-dot[b-knzdosipur] { background-color: var(--lhd-closed-dot); }

.lhd-banner-label[b-knzdosipur] {
    font-weight: 600;
}

.lhd-banner-note[b-knzdosipur] {
    opacity: 0.85;
    font-size: 0.85rem;
}

/* ── Schedule list ────────────────────────────────────────────── */
.lhd-list[b-knzdosipur] {
    list-style: none;
    margin:     0;
    padding:    0;
    border:     1px solid var(--lhd-border);
    border-radius: var(--lhd-radius);
    overflow:   hidden;
}

.lhd-row[b-knzdosipur] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.65rem 1rem;
    border-bottom:   1px solid var(--lhd-border);
    transition:      background-color 0.12s ease;
    gap:             1rem;
}

.lhd-row:last-child[b-knzdosipur] {
    border-bottom: none;
}

.lhd-row:hover:not(.lhd-row--today)[b-knzdosipur] {
    background-color: var(--lhd-row-hover);
}

/* Today row ──────── */
.lhd-row--today[b-knzdosipur] {
    background-color: var(--lhd-today-bg);
}

/* Closed row ──────── */
.lhd-row--closed .lhd-row-day[b-knzdosipur],
.lhd-row--closed .lhd-row-hours[b-knzdosipur] {
    color: var(--lhd-closed-row-text);
}

/* ── Day name cell ───────────────────────────────────────────── */
.lhd-row-day[b-knzdosipur] {
    display:     flex;
    align-items: center;
    gap:         0.45rem;
    font-size:   0.9rem;
    font-weight: 500;
    color:       var(--lhd-text);
    min-width:   115px;
}

.lhd-row--today .lhd-row-day[b-knzdosipur] {
    color:       var(--lhd-today-text);
    font-weight: 700;
}

.lhd-today-badge[b-knzdosipur] {
    font-size:       0.68rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    color:           var(--lhd-today-text);
    background-color:var(--lhd-today-badge-bg);
    padding:         1px 7px;
    border-radius:   99px;
    line-height:     1.6;
}

/* ── Hours cell ─────────────────────────────────────────────── */
.lhd-row-hours[b-knzdosipur] {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.875rem;
    color:       var(--lhd-text-secondary);
    text-align:  right;
}

.lhd-open-dot[b-knzdosipur] {
    width:            6px;
    height:           6px;
    border-radius:    50%;
    background-color: var(--lhd-open-dot);
    flex-shrink:      0;
}

.lhd-dash[b-knzdosipur] {
    color:   var(--lhd-muted);
    padding: 0 1px;
}

.lhd-closed-label[b-knzdosipur] {
    font-style: italic;
    color:      var(--lhd-muted);
}

/* ── Empty state ────────────────────────────────────────────── */
.lhd-empty[b-knzdosipur] {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         2rem 1rem;
    color:           var(--lhd-muted);
    font-size:       0.9rem;
    text-align:      center;
}

/* ── Timezone footnote ──────────────────────────────────────── */
.lhd-tz-note[b-knzdosipur] {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         0.3rem;
    margin-top:  0.875rem;
    font-size:   0.775rem;
    color:       var(--lhd-muted);
    text-align:  center;
}

.lhd-tz-icon[b-knzdosipur] {
    font-size:       0.875rem !important;
    vertical-align:  middle;
}