/* ============================================================
   Greek Library of London LMS — brand typography
   Poppins (Latin) + Commissioner (Greek)

   Poppins ships no Greek glyphs at all. Left on its own, every
   Greek page — which is most of them, Greek being the default
   language — would silently fall back to the system UI font and
   lose the brand entirely.

   Commissioner is listed second so the browser resolves it
   per glyph: Latin text still renders in Poppins exactly as
   before, and only Greek characters fall through to
   Commissioner, which was drawn with Greek as a first-class
   script and sits close to Poppins in weight and proportion.
   ============================================================ */
/* Self-hosted rather than @import-ed from fonts.googleapis.com.
   An @import here is invisible to the preload scanner: the browser
   could not even discover the fonts until this file had downloaded
   and parsed, then paid a fresh DNS+TLS to googleapis for the CSS
   and another to gstatic for the files — four serialised hops
   before first paint. Same-origin files collapse that to one.

   Only the subsets that can actually be used are shipped: Poppins
   latin/latin-ext, Commissioner greek/latin/latin-ext. The
   unicode-range on each face is Google's own, and is what makes
   the per-glyph fallback described above work — remove it and
   Greek text stops reaching Commissioner. Weights are 400-700;
   300 and 800 were requested but never referenced by any rule.
   Commissioner ships no italic upstream, so italic Greek is
   synthesised by the browser exactly as it was before. */

/* Poppins — latin-ext 400 italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-400-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins — latin 400 italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-400-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins — latin-ext 400 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins — latin 400 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins — latin-ext 500 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins — latin 500 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins — latin-ext 600 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins — latin 600 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins — latin-ext 700 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins — latin 700 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Commissioner — greek 400 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/commissioner-greek-400.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Commissioner — latin-ext 400 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/commissioner-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Commissioner — latin 400 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/commissioner-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Commissioner — greek 500 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/commissioner-greek-500.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Commissioner — latin-ext 500 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/commissioner-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Commissioner — latin 500 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/commissioner-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Commissioner — greek 600 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/commissioner-greek-600.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Commissioner — latin-ext 600 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/commissioner-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Commissioner — latin 600 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/commissioner-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Commissioner — greek 700 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/commissioner-greek-700.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Commissioner — latin-ext 700 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/commissioner-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Commissioner — latin 700 */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/commissioner-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   Greek Library of London LMS - main.css
   Brand palette: coral #FB3453 · navy #00378F · lime #AAC10A
   ============================================================ */

:root {
    /* Typography — see the font note at the top of this file for
       why Commissioner sits between Poppins and the system stack. */
    --font-display: 'Poppins', 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Poppins', 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Surfaces */
    --color-bg:            #f7f8fb;
    --color-surface:       #ffffff;
    --color-border:        #e6e8ef;
    --color-border-subtle: #f0f1f5;

    /* Accent - GLL coral */
    --color-accent:       #FB3453;
    --color-accent-soft:  rgba(251,52,83,0.10);
    --color-accent-hover: #d91e3d;

    /* Brand navy */
    --color-navy:      #00378F;
    --color-navy-soft: rgba(0,55,143,0.08);

    /* Brand lime (decorative / success accents) */
    --color-lime:      #AAC10A;
    --color-lime-soft: rgba(170,193,10,0.14);

    /* Dark ink — sidebar / footers */
    --color-ink:       #0b1023;
    --color-ink-soft:  #141a35;

    /* Semantic */
    --color-green:      #16a34a;
    --color-green-soft: rgba(22, 163, 74, 0.09);
    --color-red:        #dc2626;
    --color-red-soft:   rgba(220, 38, 38, 0.09);
    --color-amber:      #d97706;
    --color-amber-soft: rgba(217, 119, 6, 0.09);
    --color-blue:       #2563eb;
    --color-blue-soft:  rgba(37, 99, 235, 0.09);
    --color-purple:     #7c3aed;
    --color-purple-soft: rgba(124, 58, 237, 0.09);

    /* Text */
    --color-text:        #111827;
    --color-text-soft:   #374151;
    --color-muted:       #6b7280;
    --color-muted-light: #9ca3af;

    /* Layout */
    --sidebar-width: 220px;
    --content-max:   1260px;

    /* Radii */
    --radius:    8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-sm: 5px;
    --radius-full: 9999px;

    /* Spacing */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* Shadows */
    --shadow-xs:  0 1px 3px rgba(0,0,0,0.05);
    --shadow-sm:  0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:  0 10px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);

    /* Motion */
    --ease: 150ms ease;
}

/* -- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

/* Full-bleed phone layouts (the member dashboard's hero photo, the
   stat rail, etc.) rely on elements sitting flush with the screen
   edge. One overlooked element a few px too wide anywhere on a page
   is enough to let the whole document scroll sideways, which pulls
   every "flush" element away from the edge with it. Clip it here
   once instead of chasing the overflow site-wide. */
html, body { overflow-x: hidden; }

/* ...but `hidden` on the body makes the body itself a scroll container,
   and every position:sticky bar on the site then sticks to the body's
   own scrollport instead of the viewport. The body's scrollport never
   scrolls, so the header, the catalogue sidebar, the member app bar and
   the staff page header all scrolled away as if they were static.
   `clip` clips exactly the same way without creating a scroll container.
   Browsers too old for it fall back to the `hidden` above, which is
   where the whole site was until now. */
@supports (overflow-x: clip) {
    body { overflow-x: clip; }
}

body {
    font-family:            var(--font-body);
    background-color:       var(--color-bg);
    color:                  var(--color-text);
    line-height:            1.6;
    min-height:             100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering:         optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
ul { list-style: none; }
img { display: block; max-width: 100%; }

h1, h2, h3 {
    font-family:    var(--font-display);
    font-weight:    600;
    line-height:    1.2;
    letter-spacing: -0.02em;
}

h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
}

hr { border: none; border-top: 1px solid var(--color-border); }


/* ================================================================
   APP SHELL
   ================================================================ */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
}


/* -- Sidebar ------------------------------------------------- */
.sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    overflow-y: auto;
    z-index: 100;
}

/* Brand / logo area */
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-5);
    border-bottom: 1px solid var(--color-border-subtle);
}

.sidebar__brand-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: var(--color-accent);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar__brand-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

/* Nav */
.sidebar__nav {
    padding: var(--sp-4) var(--sp-3);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar__footer {
    padding: var(--sp-3) var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.6rem var(--sp-4);
    border-radius: var(--radius);
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    transition: color var(--ease), background var(--ease);
}

.sidebar__nav-item:hover {
    color: var(--color-text);
    background: var(--color-bg);
    text-decoration: none;
}

.sidebar__nav-item--active {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    font-weight: 500;
}

.sidebar__nav-item--active:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* Icon squares matching Libra screenshots */
.sidebar__nav-icon {
    font-size: 0.95rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

.sidebar__nav-item--active .sidebar__nav-icon {
    background: var(--color-accent);
    color: #fff;
    font-size: 0.85rem;
}

/* -- Main Content -------------------------------------------- */
.main-content {
    margin-left: var(--sidebar-width);
    min-width: 0;
    width: calc(100vw - var(--sidebar-width));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    background: var(--color-bg);
}

/* -- Page Header --------------------------------------------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-6) var(--sp-8) var(--sp-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-header__title {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.025em;
    font-family: var(--font-display);
}

.page-header__sub {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-top: 0.1rem;
    font-family: var(--font-body);
    font-weight: 400;
}

.page-header__actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* -- Page Body ----------------------------------------------- */
.page-body {
    flex: 1;
    padding: var(--sp-6) var(--sp-8) var(--sp-12);
    width: 100%;
    box-sizing: border-box;
}


/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.text-muted  { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.text-green  { color: var(--color-green); }
.text-red    { color: var(--color-red); }
.text-amber  { color: var(--color-amber); }


/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.855rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
    line-height: 1.4;
}

.btn--primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    text-decoration: none;
}

.btn--secondary {
    background: var(--color-text);
    color: var(--color-surface);
    border-color: var(--color-text);
}

.btn--secondary:hover {
    background: var(--color-text-soft);
    border-color: var(--color-text-soft);
    color: var(--color-surface);
    text-decoration: none;
}

.btn--ghost {
    background: transparent;
    color: var(--color-muted);
    border-color: var(--color-border);
}

.btn--ghost:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
    text-decoration: none;
}

.btn--danger {
    background: var(--color-red);
    color: #fff;
    border-color: var(--color-red);
}

.btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    text-decoration: none;
}

.btn--small {
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
}

.btn--outline-primary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn--outline-primary:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}


/* ================================================================
   CARDS
   ================================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-xs);
}

.card--flush { padding: 0; }

.card__header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.card__body { padding: var(--sp-5) var(--sp-6); }


/* ================================================================
   STAT CARDS - matching Libra dashboard top row
   ================================================================ */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-5);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--ease);
}

.stat-card:hover { box-shadow: var(--shadow-sm); }

/* Icon circle - navy by default, matches Libra screenshots */
.stat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #fff;
}

.stat-card__icon--navy   { background: var(--color-navy); }
.stat-card__icon--accent { background: var(--color-accent); }
.stat-card__icon--green  { background: var(--color-green); }
.stat-card__icon--red    { background: var(--color-red); }
.stat-card__icon--amber  { background: var(--color-amber); }
.stat-card__icon--blue   { background: var(--color-blue); }

.stat-card__content { flex: 1; min-width: 0; }

.stat-card__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-muted);
    margin-bottom: var(--sp-2);
    line-height: 1.3;
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.03em;
    line-height: 1;
}

.stat-card__sub {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: var(--sp-1);
}

.stat-card__trend {
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: var(--sp-1);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.stat-card__trend--up   { color: var(--color-green); }
.stat-card__trend--down { color: var(--color-red); }


/* ================================================================
   BADGES - matching Libra pill styles
   ================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.6;
}

.badge--accent { color: var(--color-accent); background: var(--color-accent-soft); }
.badge--green  { color: var(--color-green); background: var(--color-green-soft); }
.badge--red    { color: var(--color-red); background: var(--color-red-soft); }
.badge--amber  { color: var(--color-amber); background: var(--color-amber-soft); }
.badge--blue   { color: var(--color-blue); background: var(--color-blue-soft); }
.badge--gray   { color: var(--color-muted); background: rgba(107,114,128,0.09); }
.badge--navy   { color: var(--color-navy); background: var(--color-navy-soft); }
.badge--purple { color: var(--color-purple); background: var(--color-purple-soft); }

/* Solid variants */
.badge--solid-accent { background: var(--color-accent); color: #fff; }
.badge--solid-green  { background: var(--color-green); color: #fff; }
.badge--solid-navy   { background: var(--color-navy); color: #fff; }

/* Dot variant - status indicators */
.badge--dot { padding-left: 0.5rem; }

.badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.4rem;
    flex-shrink: 0;
    display: inline-block;
}

.badge--dot.badge--green::before  { background: var(--color-green); }
.badge--dot.badge--red::before    { background: var(--color-red); }
.badge--dot.badge--amber::before  { background: var(--color-amber); }
.badge--dot.badge--gray::before   { background: var(--color-muted); }

/* Membership type badges - styled like Libra (Premium = navy, Standard = amber, Basic = grey) */
.badge--premium  { background: var(--color-navy); color: #fff; }
.badge--standard { background: var(--color-amber-soft); color: var(--color-amber); }
.badge--basic    { background: rgba(107,114,128,0.09); color: var(--color-muted); }


/* ================================================================
   DATA TABLES - matching Libra clean table style
   ================================================================ */
.table-wrap { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

.data-table thead th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
    padding: 0.75rem var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    background: transparent;
    letter-spacing: 0.01em;
}

/* Sort arrows to match screenshots */
.data-table thead th.sortable::after {
    content: ' v';
    opacity: 0.35;
    font-size: 0.65rem;
}

.data-table tbody td {
    padding: 0.9rem var(--sp-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
    color: var(--color-text-soft);
    line-height: 1.45;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr {
    transition: background var(--ease);
}

.data-table tbody tr:hover td { background: #fafafa; }

.table-link {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--ease);
}

.table-link:hover { color: var(--color-accent); }

/* Member info cell - avatar + name + membership# */
.member-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
}

.member-cell__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.82rem;
    flex-shrink: 0;
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-border);
}

/* A member's own profile photo, where they have set one — see
   app/helpers/Avatars.php. The circle keeps its ring and its size;
   only what is inside it changes, so a list of members with and
   without photos still reads as one column. */
.member-cell__avatar--photo,
.member-avatar--photo {
    overflow: hidden;
    background: var(--color-border-subtle, #f0f1f5);
    padding: 0;
}
.member-cell__avatar img,
.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.member-cell__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-cell__name {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

.member-cell__id {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 0.05rem;
}

/* Book info cell */
.book-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.book-cell__cover {
    width: 30px;
    height: 42px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
    background: var(--color-bg);
}

.book-cell__cover--placeholder {
    width: 30px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.book-cell__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.book-cell__title {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

.book-cell__sub {
    font-size: 0.72rem;
    color: var(--color-muted);
}


/* ================================================================
   TOOLBAR / SEARCH BAR - matches Libra search + filter bar
   ================================================================ */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.toolbar__search { flex: 1; min-width: 220px; }
.toolbar__filter { width: 180px; flex-shrink: 0; }
.toolbar__actions { margin-left: auto; }


/* ================================================================
   FORM ELEMENTS
   ================================================================ */
.form-field { display: flex; flex-direction: column; }

.form-field__input,
.form-field__select {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    width: 100%;
    line-height: 1.5;
    transition: border-color var(--ease), box-shadow var(--ease);
    -webkit-appearance: none;
}

.form-field__input:focus,
.form-field__select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.form-field__input::placeholder { color: var(--color-muted-light); }

textarea.form-field__input {
    resize: vertical;
    min-height: 80px;
}

.form-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-bottom: var(--sp-1);
}

.form-hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: var(--sp-1);
}

.form-required { color: var(--color-red); }

/* ── Searchable combobox (author / publisher / category pickers) ──
   Filters a list already rendered to the page — no AJAX. See
   catalog/create.php. */
.combo-select { position: relative; }

.combo-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
}

.combo-select__item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
}
.combo-select__item:last-child { border-bottom: none; }
.combo-select__item:hover,
.combo-select__item--active { background: var(--color-accent-soft); }
.combo-select__item-main { display: block; font-size: 0.85rem; }
.combo-select__item-sub { display: block; font-size: 0.72rem; color: var(--color-muted); margin-top: 1px; }
.combo-select__item--create { color: var(--color-accent-hover); font-weight: 600; font-size: 0.85rem; }
.combo-select__empty { padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--color-muted); }

/* Drill-down browse mode (category parent picker) — breadcrumbs plus a
   per-level "use this" row above that level's children. See
   categories/create.php. */
.combo-select__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.combo-select__crumb {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.78rem;
    color: var(--color-accent-hover);
    cursor: pointer;
    padding: 0.1rem 0.2rem;
}
.combo-select__crumb:hover { text-decoration: underline; }
.combo-select__crumb-sep { font-size: 0.72rem; color: var(--color-muted); }
.combo-select__item--here { color: var(--color-accent-hover); font-weight: 600; background: var(--color-accent-soft); }

/* "Browse by Dewey class" modal body — same breadcrumb/row classes as the
   inline combobox above, just given real room to scroll instead of a
   260px popover. See categories/create.php. */
.pbrowse-list {
    margin-top: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.combo-select__item--browse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.combo-select__drill {
    flex: none;
    font-size: 0.9rem;
    color: var(--color-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}
.combo-select__drill:hover { color: var(--color-text); background: var(--color-accent-soft); }

/* Additional-category pills */
.cat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cat-chips:empty { display: none; }
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    font-size: 0.78rem;
    font-weight: 600;
}
.cat-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    opacity: 0.7;
}
.cat-chip button:hover { opacity: 1; background: rgba(0,0,0,0.08); }

/* Form grid layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
}

.form-row { display: flex; flex-direction: column; }
.form-row--full { grid-column: 1 / -1; }

/* Form section titles - styled like Libra's "Basic Info" sections */
.form-section-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--sp-8);
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
}

.form-section-title:first-child { margin-top: 0; }

.form-section-desc {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-5);
    line-height: 1.5;
}

/* Checkbox */
.form-label--checkbox {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.855rem;
    cursor: pointer;
    font-weight: 400;
    margin-top: var(--sp-6);
}

.form-label--checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent);
}

/* Form actions */
.form-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--sp-4);
}


/* ================================================================
   ALERT / TOAST
   ================================================================ */
.alert {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    font-size: 0.855rem;
    margin-bottom: var(--sp-5);
    border: 1px solid transparent;
}

.alert--error {
    background: var(--color-red-soft);
    border-color: rgba(220,38,38,0.15);
    color: var(--color-red);
}

.alert__list {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    list-style: disc;
    padding-left: var(--sp-5);
}

/* Flash messages. Shared by the staff, member, OPAC, auth and kiosk
   layouts, so this is the single definition — keep it that way.
   The 3px leading rule is always the same hue as the fill; a
   contrasting stripe (lime on a green toast) reads as a mistake. */
.toast {
    display: none;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    /* Centred in its column: capped at a readable width, then given
       equal margins either side so it sits under the middle of the
       page rather than hugging the left gutter. */
    margin: 0 auto var(--sp-5);
    max-width: 640px;   /* a flash message stretched to 1200px is unreadable */
    text-align: center;
}

.toast--visible { display: block; }

.toast--success {
    background: var(--color-green-soft);
    border-color: rgba(22, 163, 74, 0.22);
    border-left-color: var(--color-green);
    color: #166534;   /* 6.1:1 on the tinted fill; #15803d only reached 4.29:1 */
}

.toast--error {
    background: var(--color-red-soft);
    border-color: rgba(220, 38, 38, 0.22);
    border-left-color: var(--color-red);
    color: #b91c1c;
}

.toast--info {
    background: var(--color-blue-soft);
    border-color: rgba(37, 99, 235, 0.22);
    border-left-color: var(--color-blue);
    color: #1d4ed8;
}


/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state {
    text-align: center;
    padding: var(--sp-16) var(--sp-8);
}

.empty-state__icon {
    font-size: 2.5rem;
    margin-bottom: var(--sp-4);
    opacity: 0.25;
}

.empty-state__message {
    font-size: 0.925rem;
    color: var(--color-muted);
}


/* ================================================================
   RESULT COUNT
   ================================================================ */
.catalog-result-count {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-4);
}


/* ================================================================
   BOOK GRID - matching Libra grid view
   ================================================================ */
.grid-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--sp-6) var(--sp-4);
}

.book-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: transform 180ms ease;
}

.book-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
}

.book-card__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    display: block;
    transition: box-shadow 180ms ease;
    box-shadow: var(--shadow-sm);
}

.book-card:hover .book-card__cover { box-shadow: var(--shadow-md); }

.book-card__cover--placeholder {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    aspect-ratio: 2 / 3;
    width: 100%;
    box-shadow: var(--shadow-sm);
    color: var(--color-muted-light);
}

.book-card__body { padding: 0.65rem 0.15rem 0; }

.book-card__title {
    font-family: var(--font-display);
    font-size: 0.855rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--ease);
}

.book-card:hover .book-card__title { color: var(--color-accent); }

.book-card__author {
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.3;
    margin-bottom: 0.45rem;
}

.book-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.book-card__year {
    font-size: 0.7rem;
    margin-top: 0.2rem;
    color: var(--color-muted-light);
}


/* ================================================================
   BOOK TABLE - list view matching Libra screenshots
   ================================================================ */
.books-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.books-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

.books-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-muted);
    padding: 0.75rem var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.books-table tbody td {
    padding: 0.85rem var(--sp-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
    color: var(--color-text-soft);
}

.books-table tbody tr:last-child td { border-bottom: none; }
.books-table tbody tr:hover td { background: #fafafa; }


/* ================================================================
   BOOK DETAIL - matching screenshot layout
   ================================================================ */
.book-detail__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-5);
    text-decoration: none;
    transition: color var(--ease);
}

.book-detail__back:hover { color: var(--color-accent); }

.book-detail__layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: var(--sp-10);
    align-items: start;
}

.book-detail__cover-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Stacked action buttons under the cover */
.book-detail__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.book-detail__actions .btn {
    width: 100%;
    font-size: 0.8rem;
}

.book-detail__actions form { width: 100%; }

.book-detail__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    display: block;
    box-shadow: var(--shadow-md);
}

.book-detail__cover--placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    box-shadow: var(--shadow-sm);
    color: var(--color-muted-light);
}

/* Vinyl sleeves are square, not book-shaped — .vinyl-card/.vinyl-detail
   mark the vinyl-specific card/detail wrappers that reuse these book
   classes, overriding the shared 2:3 portrait ratio to 1:1.
   (.opac-card__cover's own override lives in opac.css instead — its base
   rule is also in opac.css, which loads after this file, so an override
   here would lose the same-specificity tie-break.) */
.vinyl-card .book-card__cover,
.vinyl-card .book-card__cover--placeholder,
.vinyl-card .book-card__cover-wrap {
    aspect-ratio: 1 / 1;
}
.vinyl-detail .book-detail__cover,
.vinyl-detail .book-detail__cover--placeholder,
.vinyl-detail .bk-detail__cover,
.vinyl-detail .bk-detail__cover--placeholder {
    aspect-ratio: 1 / 1;
}

.book-detail__info { padding-top: var(--sp-2); }

/* Category eyebrow pill */
.book-detail__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    padding: 0.2rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--sp-3);
}

.book-detail__title {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-text);
    line-height: 1.15;
    margin-bottom: var(--sp-2);
}

.book-detail__author-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: color var(--ease), border-color var(--ease);
}

.book-detail__author-link:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.book-detail__author {
    font-size: 1rem;
    color: var(--color-muted);
    font-style: italic;
    font-family: var(--font-display);
    margin-bottom: var(--sp-4);
}

.book-detail__translator {
    font-size: 0.875rem;
    color: var(--color-muted);
    font-style: italic;
    margin-top: -0.5rem;
    margin-bottom: var(--sp-4);
}

/* Availability bar */
.availability-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-bg);
    border-radius: var(--radius);
    margin-bottom: var(--sp-5);
    border: 1px solid var(--color-border-subtle);
}

.availability-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.availability-bar__dot--green { background: var(--color-green); }
.availability-bar__dot--red   { background: var(--color-red); }

.availability-bar__label {
    font-size: 0.855rem;
    color: var(--color-text-soft);
    font-weight: 500;
}

.availability-bar__count {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-left: auto;
}

/* Metadata rows - matching Libra's clean key/value grid */
.book-detail__meta {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-5);
    border-top: 1px solid var(--color-border-subtle);
}

.book-detail__meta-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: var(--sp-4);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.book-detail__meta-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
    padding-top: 0.05rem;
}

.book-detail__meta-value {
    font-size: 0.875rem;
    color: var(--color-text-soft);
    line-height: 1.4;
}


/* ── AI-generated genre/mood/theme tags ──────────────────────
   partials/book_ai_tags.php — shown on the public book page
   (opac/show.php) and the staff catalog view (catalog/show.php).
   Same block, .bk-tags--staff adds the confidence badge, the
   setting/pacing/format meta list, and the disclaimer line. */
.bk-tags { margin: var(--sp-4) 0; }
.bk-tags--public { margin: 0 0 var(--sp-4); }

.bk-tags__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.bk-tags__genre {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.bk-tags__chip {
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Staff-only: confidence badge, structured meta, disclaimer. */
.bk-tags__confidence {
    margin-left: auto;
    padding: 0.22rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.bk-tags__confidence--high {
    background: var(--color-green-soft);
    color: var(--color-green);
}
.bk-tags__confidence--low {
    background: var(--color-amber-soft);
    color: var(--color-amber);
}

/* Click-to-open (native <details>) popover explaining the AI tags —
   see partials/book_ai_tags_info.php. Positioned relative so the
   popover anchors to the icon, not the whole tag row. */
.bk-tags__info { position: relative; display: inline-flex; }
.bk-tags__info summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    color: var(--color-muted);
    opacity: 0.75;
    cursor: pointer;
    list-style: none;
}
.bk-tags__info summary::-webkit-details-marker { display: none; }
.bk-tags__info summary:hover,
.bk-tags__info summary:focus-visible {
    opacity: 1;
    color: var(--color-accent-hover);
    outline: none;
}
.bk-tags__info[open] summary { opacity: 1; color: var(--color-accent-hover); }

.bk-tags__info-pop {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    width: 230px;
    max-width: 75vw;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.bk-tags__info:hover .bk-tags__info-pop,
.bk-tags__info:focus-within .bk-tags__info-pop,
.bk-tags__info[open] .bk-tags__info-pop {
    display: block;
}

.bk-tags__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    margin: 0.6rem 0 0;
}
.bk-tags__meta > div { display: flex; gap: 0.35rem; }
.bk-tags__meta dt {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
}
.bk-tags__meta dd {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-soft);
}

.bk-tags__disclaimer {
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
    color: var(--color-muted);
}
.bk-tags__disclaimer code {
    font-size: 0.7rem;
    background: var(--color-bg);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

/* On a phone the public block sits centred like the rest of the
   head (title, author, rating) — same rule .bk-rating already
   follows, in the .opac-body block further down this file. */
@media (max-width: 768px) {
    .opac-body .bk-tags--public .bk-tags__row { justify-content: center; }
}

/* Keywords */
.book-detail__keywords { margin: var(--sp-4) 0; }

.book-detail__keywords-list {
    font-size: 0.855rem;
    color: var(--color-text-soft);
    line-height: 1.5;
    margin-top: 0.3rem;
}

/* Description */
.book-detail__description { margin-top: var(--sp-5); }

.book-detail__description-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
    margin-bottom: var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.book-detail__description p {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    line-height: 1.75;
}

/* Detail actions */
.detail-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border-subtle);
}

.detail-actions__delete { display: inline; }


/* ================================================================
   BOOK DETAIL — Tabs (CSS-only, radio-driven)
   ================================================================ */
.book-tabs { margin-top: var(--sp-2); }

.book-tabs__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.book-tabs__nav {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border-subtle);
}

.book-tabs__btn {
    display: inline-block;
    padding: 0.6rem 0.2rem;
    margin-right: var(--sp-5);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--ease), border-color var(--ease);
    user-select: none;
}

.book-tabs__btn:hover { color: var(--color-text); }

.book-tabs__panel { display: none; }

#book-tab-overview:checked ~ .book-tabs__nav label[for="book-tab-overview"],
#book-tab-extended:checked ~ .book-tabs__nav label[for="book-tab-extended"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

#book-tab-overview:checked ~ #book-panel-overview,
#book-tab-extended:checked ~ #book-panel-extended {
    display: block;
}


/* ================================================================
   BOOK DETAIL — Physical Copies card
   ================================================================ */
.copies-card { margin-top: var(--sp-6); }

.copies-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.copies-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

.copies-card__count {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.copies-card__add {
    border-top: 1px solid var(--color-border);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
}


/* ================================================================
   MEMBER AVATAR
   ================================================================ */
.member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.member-avatar--large {
    width: 88px;
    height: 88px;
    font-size: 2.2rem;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}


/* ================================================================
   MEMBERS TABLE - matching Libra members screenshot
   ================================================================ */
.members-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

.members-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-muted);
    padding: 0.75rem var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.members-table tbody td {
    padding: 0.9rem var(--sp-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
    color: var(--color-text-soft);
}

.members-table tbody tr:last-child td { border-bottom: none; }
.members-table tbody tr:hover td { background: #fafafa; }

.member-name-link {
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--ease);
}

.member-name-link:hover { color: var(--color-accent); }


/* ================================================================
   MEMBER PROFILE LAYOUT - matching Libra Member Details screenshot
   ================================================================ */
.member-profile {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-6);
    align-items: start;
}

.member-profile__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.member-profile__main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* Profile card */
.profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    box-shadow: var(--shadow-xs);
}

.profile-card__avatar { margin: 0 auto var(--sp-4); }

.profile-card__name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--sp-1);
}

.profile-card__id {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-3);
}

.profile-card__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.profile-card__details {
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    text-align: left;
}

.profile-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.profile-detail__label { color: var(--color-muted); }

.profile-detail__value {
    color: var(--color-text);
    font-weight: 500;
    text-align: right;
}

/* Contact info card */
.contact-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.contact-card__header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border-subtle);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.contact-card__body {
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.contact-item__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.contact-item__content { display: flex; flex-direction: column; }
.contact-item__label { font-size: 0.72rem; color: var(--color-muted); }

.contact-item__value {
    font-size: 0.855rem;
    color: var(--color-text);
    font-weight: 500;
}


/* ================================================================
   CHECKOUTS TABLE
   ================================================================ */
.checkouts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

.checkouts-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-muted);
    padding: 0.75rem var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.checkouts-table tbody td {
    padding: 0.85rem var(--sp-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
    color: var(--color-text-soft);
}

.checkouts-table tbody tr:last-child td { border-bottom: none; }
.checkouts-table tbody tr:hover td { background: #fafafa; }
.checkouts-table tbody tr.row--overdue td { background: rgba(220,38,38,0.025); }

.co-book-title {
    display: block;
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.875rem;
}

.co-book-author {
    display: block;
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 0.1rem;
}

.co-email {
    display: block;
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 0.1rem;
}

.co-date { font-size: 0.82rem; }

.co-actions form { display: inline; }

.co-returned-date { font-size: 0.78rem; }

.overdue-pill {
    display: inline-block;
    background: var(--color-red-soft);
    color: var(--color-red);
    font-size: 0.67rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    margin-left: 0.3rem;
}

.due-soon-pill {
    display: inline-block;
    background: var(--color-amber-soft);
    color: var(--color-amber);
    font-size: 0.67rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    margin-left: 0.3rem;
}


/* ================================================================
   FILTER TABS - pill style matching Libra
   ================================================================ */
.filter-tabs {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all var(--ease);
}

.filter-tab:hover {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}

.filter-tab--active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.filter-tab--active:hover {
    background: var(--color-accent-hover);
    color: #fff;
}

.filter-tab__count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 0.35rem;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.2);
}


/* ================================================================
   FINES PAGE
   ================================================================ */
.fines-stats {
    display: flex;
    gap: var(--sp-6);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.fines-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.fines-stat__value {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.fines-stat__label {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.fines-tabs {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.fines-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all var(--ease);
}

.fines-tab:hover {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}

.fines-tab--active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Accruing fines block — live totals on books that are still out,
   visually separated from charged fines because they cannot be
   paid or waived until the book comes back. */
.fines-accruing {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.fines-accruing__head {
    margin-bottom: var(--sp-3);
}

.fines-accruing__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.fines-accruing__note {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin: 0;
    max-width: 60ch;
}

.fine-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.fine-action-btn {
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--ease);
}

.fine-action-btn--pay {
    background: var(--color-green-soft);
    color: var(--color-green);
    border-color: rgba(22,163,74,0.2);
}

.fine-action-btn--pay:hover {
    background: var(--color-green);
    color: #fff;
}

.fine-action-btn--waive {
    background: var(--color-amber-soft);
    color: var(--color-amber);
    border-color: rgba(217,119,6,0.2);
}

.fine-action-btn--waive:hover {
    background: var(--color-amber);
    color: #fff;
}


/* ================================================================
   CHECKOUT FORM
   ================================================================ */
.checkout-form-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-xs);
    max-width: 640px;
}

.checkout-form-hint {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-6);
    line-height: 1.6;
    background: var(--color-accent-soft);
    border: 1px solid rgba(255,107,53,0.15);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
}

.checkout-form-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.checkout-form-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border-subtle);
}


/* ================================================================
   DASHBOARD
   ================================================================ */
.dashboard-stats { margin-bottom: var(--sp-2); }

.dashboard-recent h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-body);
    letter-spacing: -0.01em;
}

/* Section card wrapper for dashboard panels */
.dashboard-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.dashboard-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border-subtle);
}

.dashboard-panel__title {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-body);
}

.dashboard-panel__body { padding: 0; }


/* ================================================================
   REPORTS PAGE
   ================================================================ */
.reports { }

.report-columns {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-6);
    align-items: start;
}

.report-column-right {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.report-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-xs);
}

.report-card { margin-bottom: 0; }

.report-section__title {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--sp-5);
    letter-spacing: -0.01em;
}

.report-bar-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.report-bar-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-1);
}

.report-bar-item__label {
    font-size: 0.82rem;
    color: var(--color-text-soft);
}

.report-bar-item__count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.report-bar-track {
    height: 8px;
    background: var(--color-bg);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.report-bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    min-width: 2px;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

.report-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-muted);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.report-table tbody td {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-soft);
}

.report-table tbody tr:last-child td { border-bottom: none; }

/* Legacy compat */
.bar-chart { display: flex; flex-direction: column; gap: var(--sp-3); }

.bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: var(--sp-4);
}

.bar-row__label {
    font-size: 0.82rem;
    color: var(--color-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-row__track {
    height: 8px;
    background: var(--color-bg);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar-row__fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    min-width: 2px;
}

.bar-row__value {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* ================================================================
   DASHBOARD PANELS - 4-panel grid layout
   ================================================================ */

/* 2x2 panel grid */
.db-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
}

/* Red left border on panel titles */
.db-panel__accent-bar {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--sp-3);
}

/* Item list */
.db-item-list { list-style: none; margin: 0; padding: 0; }

.db-item-list__empty {
    padding: var(--sp-6) var(--sp-5);
    font-size: 0.82rem;
    color: var(--color-muted);
    text-align: center;
}

.db-item { border-bottom: 1px solid var(--color-border-subtle); }
.db-item:last-child { border-bottom: none; }

.db-item__link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    text-decoration: none;
    transition: background var(--ease);
}
.db-item__link:hover { background: #fafafa; text-decoration: none; }

/* Book cover thumbnail */
.db-item__cover {
    width: 52px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}
.db-item__cover--placeholder {
    width: 52px;
    height: 72px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-item__cover--overdue {
    border-color: rgba(220,38,38,0.25);
    background: var(--color-red-soft);
}

/* Member avatar circle */
.db-item__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Text block */
.db-item__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.db-item__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item__sub   { font-size: 0.78rem; color: var(--color-muted); }
.db-item__due   { font-size: 0.75rem; color: var(--color-muted); }
.db-item__due--overdue { color: var(--color-red); font-weight: 500; }

/* Quick-action Modals */
.db-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.db-modal-backdrop[hidden] { display: none; }

.db-modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.db-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    border-bottom: 1px solid var(--color-border-subtle);
}
.db-modal__title {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.db-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--sp-1);
    transition: color var(--ease);
}
.db-modal__close:hover { color: var(--color-text); }

.db-modal__body { padding: var(--sp-6); overflow-y: auto; flex: 1; }

.db-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--color-border-subtle);
}

/* Autocomplete dropdown */
.db-ac-wrap { position: relative; }

.db-ac-list {
    position: absolute;
    top: calc(100% - 0.25rem);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}
.db-ac-list[hidden] { display: none; }

.db-ac-item {
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    font-size: 0.855rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    transition: background var(--ease);
}
.db-ac-item:last-child { border-bottom: none; }
.db-ac-item:hover,
.db-ac-item.is-focused { background: var(--color-accent-soft); }
.db-ac-item__sub      { font-size: 0.72rem; color: var(--color-muted); }
.db-ac-item__inactive { font-size: 0.72rem; color: var(--color-red); }

/* Selected pill shown after picking */
.db-selected-pill {
    margin-top: var(--sp-2);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid rgba(255,107,53,0.2);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.db-selected-pill[hidden] { display: none; }

.db-pill-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.1rem;
}
.db-pill-clear:hover { color: var(--color-accent-hover); }

/* ── Dashboard analytics widgets ────────────────────────── */
.db-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
}
.db-analytics-grid--two { grid-template-columns: 3fr 2fr; }

.db-panel-pad { padding: var(--sp-5); }

.db-widget-empty {
    padding: var(--sp-6) 0;
    font-size: 0.82rem;
    color: var(--color-muted);
    text-align: center;
    margin: 0;
}

.db-widget-caption { font-size: 0.75rem; color: var(--color-muted); }

/* Trend chart (server-rendered SVG polylines) */
.db-trend-legend {
    display: flex;
    gap: var(--sp-4);
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-3);
}
.db-trend-legend span { display: flex; align-items: center; gap: 0.35rem; }
.db-trend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.db-trend-dot--navy   { background: var(--color-navy); }
.db-trend-dot--accent { background: var(--color-accent); }

.db-trend-svg { width: 100%; height: 130px; display: block; }
.db-trend-axis { stroke: var(--color-border); stroke-width: 1; }
.db-trend-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.db-trend-line--navy   { stroke: var(--color-navy); }
.db-trend-line--accent { stroke: var(--color-accent); }

.db-trend-xlabels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-muted-light);
    margin-top: var(--sp-1);
}

/* Colored variants of the report bar fill */
.db-bar-fill--green { background: var(--color-green); }
.db-bar-fill--navy  { background: var(--color-navy); }
.db-bar-fill--amber { background: var(--color-amber); }
.db-bar-fill--red   { background: var(--color-red); }

/* Fees & fines rows */
.db-fee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.db-fee-row:last-child { border-bottom: none; }
.db-fee-row--divider { border-top: 2px solid var(--color-border); }
.db-fee-row__label { font-size: 0.82rem; color: var(--color-muted); }
.db-fee-row__value { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Author leaderboard medal */
.db-rank-medal { margin-left: auto; font-size: 1.1rem; flex-shrink: 0; }

/* Tables inside dashboard panels */
.db-table-wrap { overflow-x: auto; padding: 0 var(--sp-5) var(--sp-4); }
.db-table-link { color: var(--color-text); text-decoration: none; }
.db-table-link:hover { color: var(--color-accent); }

/* ── Staff catalog book-card grid ───────────────────────── */
.book-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-4);
}

.book-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--ease), transform var(--ease);
}
.book-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.book-card__cover-wrap {
    position: relative;
    aspect-ratio: 2 / 3;
    background: var(--color-bg);
}
.book-card__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.book-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    height: 100%;
}
.book-card__status {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    /* Sitting on top of cover art, a 9%-tint badge disappears against a
       pale cover. White ground + a ring in the badge's own colour keeps
       it readable over anything. */
    background: #fff;
    border: 1px solid currentColor;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.book-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.book-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-card__author {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.book-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: 0.2rem;
}
.book-card__copies {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}
.book-card__year {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 1200px) {
    .db-analytics-grid { grid-template-columns: 1fr 1fr; }
    .db-analytics-grid--two { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .db-grid { grid-template-columns: 1fr; }
    .db-analytics-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   AUTH LAYOUT
   ================================================================ */
.auth-body {
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.auth-wrapper {
    width: 100%;
    max-width: 380px;
    padding: var(--sp-4);
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

.auth-brand__icon { font-size: 1.5rem; }

.auth-brand__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
}


/* ================================================================
   OPAC - Public catalogue layout
   ================================================================ */
.opac-body { background: var(--color-bg); }

.opac-header {
    background: #ffffff00;
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-4) var(--sp-8);
}

.opac-header__inner {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
}

.opac-header__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
}

.opac-header__brand-icon { font-size: 1rem; opacity: 0.65; }

.opac-header__logo {
    height: 40px;
    width: auto;
    display: block;
}

.opac-header__brand-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
}

.opac-header__tagline { font-size: 0.78rem; color: var(--color-muted); }

.opac-main {
    max-width: 1260px;
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-8) var(--sp-16);
}

.opac-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--sp-5) var(--sp-8);
    margin-top: auto;
}

.opac-footer__inner {
    max-width: 1260px;
    margin: 0 auto;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.opac-page-header { margin-bottom: var(--sp-8); }

.opac-page-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: var(--sp-1);
}

.opac-page-sub { font-size: 0.875rem; color: var(--color-muted); }
.opac-page-sub em { font-style: normal; color: var(--color-text-soft); font-weight: 500; }
.opac-page-sub a { color: var(--color-accent); }

.opac-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.opac-toolbar__search { flex: 1; min-width: 200px; }
.opac-toolbar__filter { width: 180px; flex-shrink: 0; }

.opac-back {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-8);
    transition: color var(--ease);
}

.opac-back:hover { color: #111827; }

.opac-detail__layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sp-10);
    align-items: start;
}

.opac-detail__cover-wrap { position: relative; }

.opac-detail__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-sm);
}

.opac-detail__cover--placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.opac-detail__info { padding-top: var(--sp-2); }

.opac-detail__category {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--sp-3);
}

.opac-detail__title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-text);
    line-height: 1.15;
    margin-bottom: var(--sp-2);
}

.opac-detail__author {
    font-size: 1rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-6);
    font-style: italic;
    font-family: var(--font-display);
}

.opac-avail {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
}

.opac-avail--yes { background: var(--color-green-soft); border-color: rgba(22,163,74,.15); }
.opac-avail--no  { background: var(--color-red-soft); border-color: rgba(220,38,38,.12); }

.opac-avail__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.opac-avail--yes .opac-avail__dot { background: var(--color-green); }
.opac-avail--no  .opac-avail__dot { background: var(--color-red); }
.opac-avail__label { font-size: 0.855rem; color: var(--color-text-soft); }

.opac-meta {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border-subtle);
    margin-bottom: var(--sp-6);
}

.opac-meta__row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.opac-meta__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding-top: 0.12rem;
}

.opac-meta__value {
    font-size: 0.875rem;
    color: var(--color-text-soft);
    line-height: 1.4;
}

.opac-meta__value--mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.opac-cat-link { color: var(--color-accent); }

.opac-description { padding-top: var(--sp-5); }

.opac-description__heading {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--sp-3);
}

.opac-description p {
    font-size: 0.925rem;
    color: var(--color-text-soft);
    line-height: 1.75;
}



/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .report-columns {
        grid-template-columns: 1fr;
    }
    .report-column-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5);
    }
}

@media (max-width: 900px) {
    /* sidebar handling now lives in the brand responsive layer
       (off-canvas ≤1024px) — only page spacing adjusts here */
    .page-body { padding: var(--sp-5) var(--sp-4) var(--sp-8); }

    .page-header { padding: var(--sp-4) var(--sp-4); position: relative; }

    .book-detail__layout,
    .opac-detail__layout {
        grid-template-columns: 160px 1fr;
        gap: var(--sp-6);
    }

    .member-profile { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }

    .report-column-right { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .book-detail__layout,
    .opac-detail__layout {
        grid-template-columns: 1fr;
    }

    .grid-books {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}


/* ================================================================
   OPAC REDESIGN — new components
   ================================================================ */

/* -- Header nav ------------------------------------------------ */
.opac-header__inner {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
}

.opac-nav {
    display: flex;
    gap: var(--sp-1);
    flex: 1;
    align-items: center;
    justify-content: center;
}

.opac-nav__item {
    font-size: 0.875rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    color: var(--color-muted);
    font-weight: 400;
    transition: color var(--ease), background var(--ease);
}

.opac-nav__item:hover {
    color: var(--color-text);
    background: var(--color-bg);
}

.opac-nav__item--active {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    font-weight: 500;
}

.opac-nav__item--active:hover {
    color: #111827;
    background: #f3f4f6;
}

.opac-header__actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-left: auto;
}

.opac-member-btn {
    background: var(--color-accent) !important;
    color: #fff !important;
    border-color: var(--color-accent) !important;
}

.opac-member-btn:hover {
    background: #111827 !important;
    color: #fff !important;
    border-color: #111827 !important;
}

/* -- Hero ------------------------------------------------------ */
.opac-hero {
    background: var(--color-bg);
    border-bottom: none;
    padding: var(--sp-12) var(--sp-8) var(--sp-10);
    text-align: center;
}

.opac-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--sp-3);
}

.opac-hero__title {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: var(--sp-2);
    line-height: 1.15;
}

.opac-hero__sub {
    font-size: 0.925rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-6);
}

.opac-hero__search {
    display: flex;
    max-width: 560px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.opac-hero__search-icon {
    padding: 0 0 0 var(--sp-4);
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    opacity: 0.5;
    flex-shrink: 0;
}

.opac-hero__search-input {
    flex: 1;
    border: none;
    padding: var(--sp-3) var(--sp-3);
    font-size: 0.925rem;
    background: transparent;
    outline: none;
    color: var(--color-text);
    font-family: var(--font-body);
    min-width: 0;
}

.opac-hero__search-btn {
    padding: var(--sp-3) var(--sp-5);
    background: var(--color-accent);
    color: #fff;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background var(--ease);
    flex-shrink: 0;
}

.opac-hero__search-btn:hover {
    background: #111827;
}

/* -- Stats bar ------------------------------------------------- */
.opac-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-4) var(--sp-8);
}

.opac-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--sp-8);
}

.opac-stat__num {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.opac-stat__lbl {
    font-size: 0.72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-top: 0.15rem;
}

.opac-stat__divider {
    width: 1px;
    height: 32px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* -- Main content area ----------------------------------------- */
.opac-main {
    max-width: 1260px;
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-8) var(--sp-16);
    width: 100%;
}

/* -- Sections -------------------------------------------------- */
.opac-section {
    padding: var(--sp-8) 0;
}

.opac-section__hdr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
}

.opac-section__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.opac-section__title em {
    font-style: normal;
    color: var(--color-accent);
}

.opac-section__link {
    font-size: 0.8rem;
    color: var(--color-muted);
    transition: color var(--ease);
}

.opac-section__link:hover { color: #111827; }

.opac-divider {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
}

/* -- New arrivals strip --------------------------------------- */
.opac-arrivals {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.opac-arrival {
    flex: 0 0 100px;
    text-decoration: none;
    color: inherit;
}

.opac-arrival__cover {
    width: 100px;
    height: 148px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--color-border-subtle);
    display: block;
    margin-bottom: var(--sp-2);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--ease);
}

.opac-arrival:hover .opac-arrival__cover {
    box-shadow: var(--shadow-md);
}

.opac-arrival__cover--placeholder {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

.opac-arrival__title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.2rem;
}

.opac-arrival__author {
    font-size: 0.7rem;
    color: var(--color-muted);
}

/* Full-width 6-column arrivals grid (home page rows) */
.opac-arrivals__row-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
    margin: 0 0 .75rem;
}
.opac-arrivals-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-5);
}
.opac-arrival-grid-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.opac-arrival-grid-card__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    display: block;
    margin-bottom: var(--sp-2);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--ease), transform var(--ease);
}
.opac-arrival-grid-card:hover .opac-arrival-grid-card__cover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.opac-arrival-grid-card__cover--placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    margin-bottom: var(--sp-2);
}
.opac-arrival-grid-card__title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .2rem;
}
.opac-arrival-grid-card__author {
    font-size: .75rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 900px) {
    .opac-arrivals-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .opac-arrivals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
}

/* -- Category chips ------------------------------------------- */
.opac-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.opac-chip {
    font-size: 0.8rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    transition: color var(--ease), background var(--ease), border-color var(--ease);
    text-decoration: none;
}

.opac-chip:hover {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--color-bg);
}

.opac-chip--active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: rgba(232,24,90,0.3);
    font-weight: 500;
}

.opac-chip--active:hover {
    color: #111827;
    background: #f3f4f6;
}

/* -- Result count --------------------------------------------- */
.opac-result-count {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-5);
}

/* -- Book grid ------------------------------------------------- */
.opac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--sp-4);
}

.opac-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ease), border-color var(--ease);
    display: block;
}

.opac-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border);
}

.opac-card__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--color-border-subtle);
}

.opac-card__cover--placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.opac-card__body {
    padding: var(--sp-3);
}

.opac-card__title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.35;
    margin-bottom: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.opac-card__author {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opac-card__avail {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 0.7rem;
    font-weight: 500;
}

.opac-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.opac-card__avail--yes { color: var(--color-green); }
.opac-card__avail--yes .opac-card__dot { background: var(--color-green); }
.opac-card__avail--no  { color: var(--color-red); }
.opac-card__avail--no  .opac-card__dot { background: var(--color-red); }

/* -- A–Z ------------------------------------------------------- */
.opac-az {
    padding: var(--sp-8) 0 var(--sp-6);
}

.opac-az__script-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--sp-3);
}

.opac-az__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.opac-az__letter {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ease), color var(--ease);
}

.opac-az__letter--empty {
    color: var(--color-border);
    cursor: default;
}

.opac-az__letter--has {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

.opac-az__letter--has:hover {
    background: #111827;
    color: #fff;
}

.opac-az__letter--active {
    background: var(--color-accent) !important;
    color: #fff !important;
}

/* -- Responsive ----------------------------------------------- */
@media (max-width: 700px) {
    .opac-hero { padding: var(--sp-8) var(--sp-4) var(--sp-6); }
    .opac-hero__title { font-size: 1.7rem; }
    .opac-stats { gap: 0; }
    .opac-stat { padding: 0 var(--sp-4); }
    .opac-main { padding: var(--sp-6) var(--sp-4) var(--sp-12); }
    .opac-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .opac-header__actions .opac-member-btn { display: none; }
}


/* ================================================================
   OPAC — Sub-navigation (catalog section tabs)
   ================================================================ */
.opac-subnav {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--sp-6);
}

.opac-subnav__inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 var(--sp-8);
    display: flex;
    gap: 0;
}

.opac-subnav__item {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-muted);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 2px solid transparent;
    transition: color var(--ease), border-color var(--ease);
    text-decoration: none;
}

.opac-subnav__item:hover {
    color: var(--color-text);
}

.opac-subnav__item--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    font-weight: 500;
}

/* ================================================================
   OPAC — Persistent header search
   ================================================================ */
.opac-header__search {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-bg);
    flex: 0 0 220px;
}

.opac-header__search-input {
    border: none;
    background: transparent;
    padding: 0.4rem var(--sp-3);
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--color-text);
    outline: none;
    width: 100%;
    min-width: 0;
}

.opac-header__search-btn {
    border: none;
    background: transparent;
    padding: 0.4rem var(--sp-3) 0.4rem 0;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-muted);
    flex-shrink: 0;
}

/* ================================================================
   OPAC — Quick links (home page)
   ================================================================ */
.opac-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
    padding: 0 0 var(--sp-8);
}

.opac-quicklink {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ease), border-color var(--ease);
}

.opac-quicklink:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
    color: #111827;
}

.opac-quicklink__icon { font-size: 1.2rem; flex-shrink: 0; }

.opac-quicklink__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    flex: 1;
}

.opac-quicklink:hover .opac-quicklink__label { color: #111827; }

.opac-quicklink__arrow {
    font-size: 0.875rem;
    color: var(--color-muted);
    flex-shrink: 0;
}

/* ================================================================
   OPAC — Index cards (categories / authors / publishers list)
   ================================================================ */
.opac-index-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.opac-index-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background var(--ease), border-color var(--ease);
}

.opac-index-card:hover {
    background: var(--color-bg);
    border-color: var(--color-border);
}

.opac-index-card__icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.opac-index-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
}

.opac-index-card__body { flex: 1; min-width: 0; }

.opac-index-card__name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opac-index-card__count {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 1px;
}

.opac-index-card__arrow {
    font-size: 0.875rem;
    color: var(--color-muted);
    flex-shrink: 0;
    transition: color var(--ease);
}

.opac-index-card:hover .opac-index-card__arrow { color: var(--color-accent); }

/* ================================================================
   OPAC — Profile banner (author / publisher detail)
   ================================================================ */
.opac-profile {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-6);
}

.opac-profile__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 1.4rem;
    font-weight: 600;
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.opac-profile__avatar--pub {
    background: var(--color-navy-soft);
    color: var(--color-navy);
    font-size: 1.5rem;
}

.opac-profile__name {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--sp-1);
}

.opac-profile__meta {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* ================================================================
   OPAC — A-Z hint
   ================================================================ */
.opac-az__hint {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-top: var(--sp-6);
    text-align: center;
    padding: var(--sp-8) 0;
}

/* ================================================================
   OPAC — Main padding adjustment (no hero on inner pages)
   ================================================================ */
.opac-main--inner {
    padding-top: 0;
}

/* ================================================================
   Responsive additions
   ================================================================ */
@media (max-width: 700px) {
    .opac-header__search { display: none; }
    .opac-subnav__inner { padding: 0 var(--sp-4); overflow-x: auto; }
    .opac-subnav__item { padding: var(--sp-3) var(--sp-3); white-space: nowrap; }
    .opac-quicklinks { grid-template-columns: 1fr 1fr; }
    .opac-profile { flex-direction: column; text-align: center; }
}

/* ================================================================
   OPAC — Catalog sidebar layout
   ================================================================ */

.opac-catalog-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--sp-8);
    align-items: start;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — filter cards
   ════════════════════════════════════════════════════════════════ */
.opac-sidebar {
    position: sticky;
    top: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* each filter card */
.sf-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* card header — click to collapse */
.sf-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background var(--ease);
}
.sf-card__head:hover { background: var(--color-bg); }

.sf-card__title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text);
}

.sf-card__chevron {
    color: var(--color-muted);
    transition: transform 200ms ease;
    flex-shrink: 0;
}
.sf-card--collapsed .sf-card__chevron { transform: rotate(-90deg); }
.sf-card--collapsed .sf-card__body    { display: none; }

.sf-card__body { padding: var(--sp-3) var(--sp-4); }

/* Search card */
.sf-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg);
}
.sf-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.85rem;
    color: var(--color-text);
    font-family: var(--font-body);
    outline: none;
}
.sf-search-btn {
    border: none;
    background: var(--color-accent);
    color: #fff;
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--ease);
    flex-shrink: 0;
}
.sf-search-btn:hover { background: #111827; }

/* Category list */
.sf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.sf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    font-size: 0.83rem;
    color: var(--color-text-soft);
    text-decoration: none;
    transition: background var(--ease), color var(--ease);
}
.sf-item:hover { background: var(--color-bg); color: #111827; }
.sf-item--active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 500;
}
.sf-item--active:hover { background: var(--color-accent-soft); color: #111827; }
.sf-item__count {
    font-size: 0.72rem;
    color: var(--color-muted);
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* Year range */
.sf-year-row {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
.sf-year-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-2);
    font-size: 0.82rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    outline: none;
    text-align: center;
    transition: border-color var(--ease);
}
.sf-year-input:focus { border-color: var(--color-accent); }
.sf-year-sep { font-size: 0.75rem; color: var(--color-muted); flex-shrink: 0; }
.sf-year-btn {
    width: 100%;
    margin-top: var(--sp-3);
    padding: var(--sp-2) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: transparent;
    font-size: 0.8rem;
    color: var(--color-text-soft);
    font-family: var(--font-body);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.sf-year-btn:hover { background: #111827; color: #fff; border-color: #111827; }

/* Availability toggle — members only */
.sf-avail {
    display: flex;
    gap: var(--sp-2);
}
.sf-avail-btn {
    flex: 1;
    padding: var(--sp-2) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: transparent;
    font-size: 0.8rem;
    color: var(--color-text-soft);
    font-family: var(--font-body);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
    text-align: center;
}
.sf-avail-btn:hover { background: var(--color-bg); color: #111827; }
.sf-avail-btn--active {
    background: var(--color-green-soft);
    border-color: rgba(22,163,74,.3);
    color: var(--color-green);
    font-weight: 500;
}

/* ── Catalog main area ───────────────────────────────────────── */
.opac-catalog-main { min-width: 0; }

/* ── Top bar: search + browse links + sort + view toggle ──────── */
.cat-topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.cat-topbar__search {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
    flex: 0 0 280px;
}
.cat-topbar__search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.85rem;
    color: var(--color-text);
    font-family: var(--font-body);
    outline: none;
}
.cat-topbar__search-btn {
    border: none;
    background: transparent;
    padding: var(--sp-2) var(--sp-3);
    color: var(--color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color var(--ease);
    flex-shrink: 0;
}
.cat-topbar__search-btn:hover { color: #111827; }

.cat-browse {
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
    flex-shrink: 0;
}
.cat-browse__link {
    font-size: 0.8rem;
    color: var(--color-muted);
    text-decoration: none;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: color var(--ease), border-color var(--ease), background var(--ease);
    white-space: nowrap;
}
.cat-browse__link:hover { color: #111827; border-color: #111827; background: var(--color-bg); }

.cat-sort {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--color-text-soft);
    background: var(--color-surface);
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}
.cat-view-toggle {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}
.cat-view-btn {
    border: none;
    background: transparent;
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    transition: background var(--ease), color var(--ease);
}
.cat-view-btn:hover { background: var(--color-bg); color: #111827; }
.cat-view-btn--active { background: #111827; color: #fff; }
.cat-view-btn + .cat-view-btn { border-left: 1px solid var(--color-border); }

/* ── Active filter pills ──────────────────────────────────────── */
.cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.cat-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 0.78rem;
    padding: 3px var(--sp-3);
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid rgba(232,24,90,.2);
    font-weight: 500;
}
.cat-filter-pill__x {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    color: inherit;
}
.cat-filter-pill__x:hover { opacity: 1; }

/* ── Result count ──────────────────────────────────────────────── */
.cat-count {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-4);
}
.cat-count em { font-style: normal; color: var(--color-text-soft); font-weight: 500; }

/* ── Card meta row (grid mode) ────────────────────────────────── */
.opac-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
}
.opac-card__year { font-size: 0.68rem; color: var(--color-muted); }

/* ── List view — Option A ─────────────────────────────────────── */
.cat-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.cat-list-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ease), border-color var(--ease);
}
.cat-list-row:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border); }

.cat-list-row__cover {
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
    display: block;
}
.cat-list-row__cover--placeholder {
    width: 44px;
    height: 60px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
}
.cat-list-row__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-list-row__author {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    flex: 0 0 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-list-row__year {
    font-size: 0.78rem;
    color: var(--color-muted);
    flex: 0 0 40px;
    text-align: center;
}
.cat-list-row__cat {
    font-size: 0.72rem;
    color: var(--color-muted);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    white-space: nowrap;
}
.cat-list-row__avail {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    flex: 0 0 80px;
    justify-content: flex-end;
}
.cat-list-row__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cat-list-row__avail--yes { color: var(--color-green); }
.cat-list-row__avail--yes .cat-list-row__dot { background: var(--color-green); }
.cat-list-row__avail--no  { color: var(--color-red); }
.cat-list-row__avail--no  .cat-list-row__dot { background: var(--color-red); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 780px) {
    .opac-catalog-layout { grid-template-columns: 1fr; }
    .opac-sidebar { position: static; }
    .cat-topbar { flex-wrap: wrap; }
    .cat-topbar__search { flex: 1 1 100%; }
    .cat-browse { margin-left: 0; }
    .cat-list-row__author { display: none; }
    .cat-list-row__cat    { display: none; }
}


/* ================================================================
   BOOK DETAIL PAGE — 3-column redesign (bk-*)
   ================================================================ */

/* Breadcrumb */
.bk-breadcrumb {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: var(--sp-8);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.bk-breadcrumb a {
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--ease);
}
.bk-breadcrumb a:hover { color: #111827; }
.bk-breadcrumb__sep { color: var(--color-border); }

/* 3-column grid */
.bk-detail {
    display: grid;
    grid-template-columns: 280px 1fr 260px;
    gap: var(--sp-10);
    align-items: start;
}

/* Col 1 — Cover */
.bk-detail__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: block;
}
.bk-detail__cover--placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--color-border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

/* Col 2 — Info */
.bk-detail__title {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-text);
    line-height: 1.15;
    margin-bottom: var(--sp-2);
}
.bk-detail__subtitle {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-text-soft);
    line-height: 1.3;
    margin: calc(var(--sp-2) * -1) 0 var(--sp-2);
}
.bk-detail__author {
    font-size: 1rem;
    color: var(--color-text-soft);
    margin-bottom: var(--sp-4);
}
.bk-detail__author-link {
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color var(--ease);
}
.bk-detail__author-link:hover { color: #111827; }

/* Goodreads rating — stars, score, rating count */
.bk-rating {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin: calc(var(--sp-4) * -1) 0 var(--sp-4);
    font-size: 0.85rem;
}
/* No rating to show (and none coming): collapse so the description
   keeps its original spacing under the author line. */
.bk-rating--empty {
    margin: 0;
    min-height: 0;
}
.bk-stars {
    position: relative;
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}
.bk-stars__empty { fill: #d8dce3; }
.bk-stars__full {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    fill: #e8ac3f;
}
.bk-rating__value {
    font-weight: 600;
    color: var(--color-text);
}
.bk-rating__count { color: var(--color-text-soft); }
.bk-rating__count a {
    color: var(--color-text-soft);
    text-decoration: none;
    border-bottom: 1px solid #d8dce3;
    transition: color var(--ease);
}
.bk-rating__count a:hover { color: #111827; }

/* Description */
.bk-detail__desc {
    font-size: 0.925rem;
    color: var(--color-text-soft);
    line-height: 1.75;
    margin-bottom: var(--sp-5);
}

/* Long blurbs collapse behind a "See more" toggle. The clamp and the
   button are both switched on by JS only when the text actually
   overflows, so short descriptions — and pages without scripting —
   keep showing in full. */
.bk-detail__desc--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--sp-2);
}
.bk-detail__desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: var(--sp-5);
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-navy);
    cursor: pointer;
    transition: color var(--ease);
}
.bk-detail__desc-toggle:hover { color: var(--color-accent); }
.bk-detail__desc-toggle svg {
    transition: transform var(--ease);
}
.bk-detail__desc-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Printing has no toggle to click, so never hide anything. */
@media print {
    .bk-detail__desc--clamped {
        display: block;
        overflow: visible;
        -webkit-line-clamp: none;
        line-clamp: none;
    }
    .bk-detail__desc-toggle { display: none; }
}

/* Details table */
.bk-detail__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: var(--sp-5);
}
.bk-detail__table tr {
    border-bottom: 1px solid var(--color-border-subtle);
}
.bk-detail__table tr:last-child { border-bottom: none; }
.bk-detail__table th,
.bk-detail__table td {
    padding: var(--sp-2) 0;
    text-align: left;
    font-weight: 400;
}
.bk-detail__table th {
    width: 140px;
    color: var(--color-muted);
    white-space: nowrap;
}
.bk-detail__table td { color: var(--color-text-soft); }
.bk-detail__meta-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--ease);
}
.bk-detail__meta-link:hover { color: #111827; }
.bk-detail__meta-sub {
    color: var(--color-muted);
    font-size: 0.85em;
    margin-left: 0.35em;
}

/* Col 3 — Sidebar card */
.bk-detail__sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: sticky;
    top: 88px;
}

/* Availability row */
.bk-sidebar__avail {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--sp-1);
}
.bk-sidebar__avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bk-sidebar__avail--yes .bk-sidebar__avail-dot { background: var(--color-green); }
.bk-sidebar__avail--yes .bk-sidebar__avail-label { color: var(--color-green); }
.bk-sidebar__avail--no  .bk-sidebar__avail-dot { background: var(--color-red); }
.bk-sidebar__avail--no  .bk-sidebar__avail-label { color: var(--color-red); }

.bk-sidebar__copies-summary {
    font-size: 0.78rem;
    color: var(--color-muted);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--sp-1);
}

/* "Your status" panel — you have this on loan, or it's on the hold
   shelf waiting for you. Sits between the availability summary and
   the reserve/wishlist/favourite buttons. */
.bk-mystatus {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--radius);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-soft, #f9fafb);
    margin-bottom: var(--sp-1);
}
.bk-mystatus--loan    { border-color: var(--color-accent-soft); background: var(--color-accent-soft); }
.bk-mystatus--overdue { border-color: var(--color-red-soft); background: var(--color-red-soft); }
.bk-mystatus--ready   { border-color: var(--color-green-soft); background: var(--color-green-soft); }
.bk-mystatus__icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--color-accent);
}
.bk-mystatus--overdue .bk-mystatus__icon { color: var(--color-red); }
.bk-mystatus--ready   .bk-mystatus__icon { color: var(--color-green); }
.bk-mystatus__body { min-width: 0; }
.bk-mystatus__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.15rem;
}
.bk-mystatus__detail {
    font-size: 0.78rem;
    color: var(--color-text-soft);
    margin: 0 0 0.4rem;
}
.bk-mystatus__body .badge { margin-bottom: 0.4rem; }
.bk-mystatus__link {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.bk-mystatus__link:hover { color: var(--color-accent-hover); }

/* Buttons */
.bk-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
    text-decoration: none;
    border: 1.5px solid transparent;
}
.bk-btn--primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.bk-btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
}
.bk-btn--primary:disabled,
.bk-btn--primary[disabled] {
    opacity: 0.6;
    cursor: default;
}
.bk-btn--ghost {
    background: transparent;
    color: var(--color-text-soft);
    border-color: var(--color-border);
}
.bk-btn--ghost:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.bk-sidebar__hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    text-align: center;
}
.bk-sidebar__hint a {
    color: var(--color-accent);
    text-decoration: none;
}
.bk-sidebar__hint a:hover { color: var(--color-accent-hover); }

/* Share / Print action buttons */
.bk-detail__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border-subtle);
}
/* "Report incorrect info" sits under the details table it comments on,
   quietly — it is a correction to this data, not a page-level action. */
.bk-detail__report-row {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-border-subtle);
}
.bk-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.bk-action-btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* Report incorrect info — panel opened by the action button above.
   Sits in the flow under the actions row rather than in a modal, so it
   never covers the record the reader is describing. */
.bk-report {
    margin-top: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}
.bk-report__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
}
.bk-report__heading {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-text);
}
.bk-report__close {
    display: inline-flex;
    padding: var(--sp-1);
    color: var(--color-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}
.bk-report__close:hover { color: var(--color-accent); }

.bk-report__intro {
    margin-top: var(--sp-2);
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--color-muted);
}
.bk-report__form { margin-top: var(--sp-4); }

.bk-report__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
.bk-report__legend {
    padding: 0;
    margin-bottom: var(--sp-2);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}
.bk-report__option {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--radius);
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--color-text);
    cursor: pointer;
}
.bk-report__option:hover { background: var(--color-accent-soft); }
.bk-report__option input {
    margin-top: 0.15rem;
    accent-color: var(--color-accent);
    flex: 0 0 auto;
}

.bk-report__label {
    display: block;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-2);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}
.bk-report__textarea {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    resize: vertical;
}
.bk-report__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}
.bk-report__hint {
    margin-top: var(--sp-2);
    font-size: 0.74rem;
    color: var(--color-muted);
}
.bk-report__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
.bk-report__submit {
    width: auto;
    padding-inline: var(--sp-5);
}

/* The whole block is a way to send us something — there is nothing in it
   worth putting on paper. */
@media print {
    .bk-action-btn--report,
    .bk-report { display: none !important; }
}

/* Related / More in this category */
.bk-related {
    margin-top: var(--sp-12);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--color-border-subtle);
}
.bk-related__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
}
.bk-related__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.bk-related__cat-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--ease);
}
.bk-related__cat-link:hover { color: var(--color-accent-hover); }
.bk-related__see-all {
    font-size: 0.82rem;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--ease);
    white-space: nowrap;
}
.bk-related__see-all:hover { color: var(--color-accent-hover); }
.bk-related__grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

/* ── Copies (holdings table) ─────────────────────────────────── */
.bk-holdings {
    margin-top: var(--sp-12);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--color-border-subtle);
}
.bk-holdings__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--sp-5);
}
.bk-holdings__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.bk-holdings__table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.bk-holdings__table th,
.bk-holdings__table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    white-space: nowrap;
}
.bk-holdings__table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.bk-holdings__table tbody tr {
    border-bottom: 1px solid var(--color-border-subtle);
}
.bk-holdings__table tbody tr:last-child { border-bottom: none; }
.bk-holdings__table td { color: var(--color-text-soft); }

/* Call number cell — the number plus its own shelf trigger, since each
   copy can sit in a different physical spot on the shelves. */
.bk-holdings__call {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3);
}

/* Browse shelf trigger — deliberately small and quiet: it's a link-like
   secondary action inside a table cell, not a call to action. */
.bk-shelf-toggle {
    padding: 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0,55,143,0.35);
    color: var(--color-navy);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
}
.bk-shelf-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
.bk-shelf-toggle.is-active { color: var(--color-accent); border-color: var(--color-accent); font-weight: 600; }
.bk-shelf-toggle:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; }

/* Browse shelf — its own card below the table, so opening it never
   reflows the columns above. */
.bk-shelf {
    margin-top: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.bk-shelf__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-subtle);
}
.bk-shelf__heading {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}
.bk-shelf__heading svg { color: var(--color-accent); flex-shrink: 0; }
.bk-shelf__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-muted);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.bk-shelf__close:hover { background: var(--color-border-subtle); color: var(--color-text); }
.bk-shelf__close:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.bk-shelf__body {
    position: relative;
    padding: var(--sp-5) 0;
}
.bk-shelf__track {
    display: flex;
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 0 var(--sp-8);
}
.bk-shelf__card {
    flex: 0 0 168px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: var(--sp-3);
    border-radius: var(--radius);
    border: 2px solid transparent;
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease);
}
.bk-shelf__card:hover { background: var(--color-surface); }
.bk-shelf__card:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.bk-shelf__card--current {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}
.bk-shelf__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-3);
    display: block;
}
.bk-shelf__cover--placeholder {
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    color: var(--color-muted);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bk-shelf__call {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 2px;
}
.bk-shelf__label {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bk-shelf__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    cursor: pointer;
    z-index: 2;
    transition: border-color var(--ease), color var(--ease);
}
.bk-shelf__nav:hover { border-color: var(--color-navy); color: var(--color-navy); }
.bk-shelf__nav:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.bk-shelf__nav--prev { left: 8px; }
.bk-shelf__nav--next { right: 8px; }

@media (prefers-reduced-motion: reduce) {
    .bk-shelf__track { scroll-behavior: auto; }
}

@media (max-width: 600px) {
    .bk-shelf__track { padding: 0 var(--sp-4); }
    .bk-shelf__card { flex-basis: 128px; }
    .bk-shelf__nav { display: none; }
}

/* Responsive — tablet */
@media (max-width: 900px) {
    .bk-detail {
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto auto;
    }
    .bk-detail__sidebar {
        grid-column: 1 / -1;
    }
}

/* Responsive — mobile */
@media (max-width: 600px) {
    .bk-detail {
        grid-template-columns: 1fr;
    }
    .bk-detail__cover {
        max-width: 200px;
    }
}


/* ================================================================
   ════════════════════════════════════════════════════════════════
   GREEK LIBRARY OF LONDON — BRAND THEME + RESPONSIVE LAYER
   Appended override layer: restyles the shell, navigation, tables,
   forms and adds full mobile/tablet responsiveness.
   ════════════════════════════════════════════════════════════════
   ================================================================ */

/* ----------------------------------------------------------------
   1. Light sidebar with navy accents (brand identity)
   ---------------------------------------------------------------- */
.sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    transition: transform 0.25s ease;
}

.sidebar__brand {
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--sp-5);
}

.sidebar__brand-icon {
    background: var(--color-navy);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,55,143,0.25);
}

.sidebar__brand-name {
    color: var(--color-navy);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}

.sidebar .sidebar__nav-item,
.sidebar .sidebar__group-toggle {
    color: var(--color-text-soft);
    font-weight: 400;
}

.sidebar .sidebar__nav-item .sidebar__nav-icon,
.sidebar .sidebar__group-toggle .sidebar__nav-icon {
    color: var(--color-navy);
}

.sidebar .sidebar__nav-item:hover,
.sidebar .sidebar__group-toggle:hover {
    color: var(--color-navy);
    background: var(--color-navy-soft);
}

.sidebar .sidebar__nav-item--active,
.sidebar .sidebar__nav-item--active:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    font-weight: 600;
}

.sidebar__nav-item--active .sidebar__nav-icon {
    background: var(--color-accent);
    color: #fff;
}

.sidebar__footer {
    border-top: 1px solid var(--color-border-subtle);
}

/* ----------------------------------------------------------------
   2. Mobile topbar + off-canvas sidebar
   ---------------------------------------------------------------- */
.mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 200;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.65rem var(--sp-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy);
}

.mobile-topbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    background: var(--color-navy-soft);
    color: var(--color-navy);
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-navy);
    line-height: 1.25;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,16,35,0.4);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (max-width: 1024px) {
    .app-shell { grid-template-columns: 1fr; display: block; }

    .mobile-topbar { display: flex; }

    .sidebar {
        transform: translateX(-100%);
        width: min(300px, 85vw);
        box-shadow: none;
        z-index: 300;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0,0,0,0.35);
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
        opacity: 1;
    }

    body.sidebar-open { overflow: hidden; }

    .main-content {
        margin-left: 0;
        width: 100%;
    }
}

/* ----------------------------------------------------------------
   3. Page header & body — responsive spacing
   ---------------------------------------------------------------- */
.page-header {
    flex-wrap: wrap;
    gap: var(--sp-3);
}

@media (max-width: 1024px) {
    .page-header { position: static; }
}

@media (max-width: 700px) {
    .page-header { padding: var(--sp-4); }
    .page-header__title { font-size: 1.2rem; }
    .page-header__actions { width: 100%; flex-wrap: wrap; }
    .page-body { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
}

/* ----------------------------------------------------------------
   4. Buttons — brand states, focus rings, touch targets
   ---------------------------------------------------------------- */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn--secondary {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.btn--secondary:hover {
    background: #002a6e;
    border-color: #002a6e;
    color: #fff;
}

@media (max-width: 700px) {
    .btn { min-height: 42px; }
}

/* ----------------------------------------------------------------
   5. Tables — sticky headers, hover states, mobile scroll
   ---------------------------------------------------------------- */
.table-wrap,
.books-table-wrap,
.members-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

table thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 5;
}

tbody tr { transition: background var(--ease); }
tbody tr:hover { background: var(--color-bg); }

/* ----------------------------------------------------------------
   6. Forms — consistent focus, comfortable mobile inputs
   ---------------------------------------------------------------- */
.form-field__input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(0,55,143,0.12);
}

@media (max-width: 700px) {
    input, select, textarea { font-size: 16px; } /* prevents iOS zoom */
}

/* ----------------------------------------------------------------
   7. Cards, misc polish
   (Toast colours live with the component above — this layer used to
   re-stripe them in lime, which clashed with the green fill.)
   ---------------------------------------------------------------- */
::selection { background: rgba(0,55,143,0.18); }

@media (max-width: 700px) {
    .toast { max-width: calc(100vw - 2rem) !important; }
}

/* ----------------------------------------------------------------
   8. OPAC (public site) — responsive header & nav
   ---------------------------------------------------------------- */
@media (max-width: 700px) {
    /* restore the member login button (previously hidden on mobile) */
    .opac-header__actions .opac-member-btn { display: inline-flex; }

    .opac-header__inner {
        gap: var(--sp-3);
    }

    .opac-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .opac-nav__item { white-space: nowrap; flex-shrink: 0; }

    /* Logo sizing lives in opac.css (it differs per lockup) — leaving a
       max-height here would clamp both of them to the same height. */

    .opac-footer__inner { padding: var(--sp-4); text-align: center; }
}

.opac-member-btn:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

.opac-nav__item--active:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* ============================================================
   Pagination — shared across all list views
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    flex-wrap: wrap;
}

.pagination__btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.pagination__btn:hover:not(.is-disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pagination__btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    justify-content: center;
}

.pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.pagination__page:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.pagination__page--active {
    background: var(--color-accent);
    color: var(--color-surface);
}

.pagination__ellipsis {
    color: var(--color-muted-light);
    font-size: 0.85rem;
    padding: 0 0.15rem;
}



/* ================================================================
   AUTHORS — directory cards + profile
   Shared by the staff pages (/authors) and the public OPAC, so the
   same author reads the same way on either side of the desk.

   Laid out as a contributors page in a magazine: the portrait leads,
   the name sits under it, and the biography runs as ranged-left prose
   underneath. Portraits and biographies come from Biblionet — every
   rule here has to hold up for an author who has neither.
   ================================================================ */

/* -- Directory toolbar ---------------------------------------- */
.author-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

.author-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.author-search__input {
    width: 100%;
    height: 44px;
    padding: 0 var(--sp-4) 0 2.6rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: border-color var(--ease), box-shadow var(--ease);
}

.author-search__input::placeholder { color: var(--color-muted-light); }

.author-search__input:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px var(--color-navy-soft);
}

.author-search__icon {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    transform: translateY(-50%);
    color: var(--color-muted-light);
    pointer-events: none;
}

.author-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.author-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0 0.95rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-soft);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color var(--ease), background var(--ease), border-color var(--ease);
}

.author-chip:hover {
    color: var(--color-navy);
    border-color: var(--color-navy);
    text-decoration: none;
}

.author-chip--active,
.author-chip--active:hover {
    color: #fff;
    background: var(--color-navy);
    border-color: var(--color-navy);
}

/* -- Directory grid ------------------------------------------- */
.grid-authors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: var(--sp-5);
}

.author-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    /* Colour and shadow only — a transform here would shift the card
       under the pointer and make the whole grid twitch on hover. */
    transition: border-color var(--ease), box-shadow var(--ease);
}

.author-card:hover {
    text-decoration: none;
    border-color: var(--color-navy);
    box-shadow: var(--shadow-md);
}

.author-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--sp-4);
}

.author-portrait {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    /* Portraits are framed head-and-shoulders at wildly different
       aspect ratios; anchoring high keeps the face in the circle. */
    object-position: top center;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    /* Ring rather than border, so it can change colour on hover
       without nudging the image by a pixel. */
    box-shadow: 0 0 0 1px var(--color-border), 0 0 0 5px var(--color-bg);
    transition: box-shadow var(--ease);
}

.author-card:hover .author-portrait {
    box-shadow: 0 0 0 1px var(--color-navy), 0 0 0 5px var(--color-navy-soft);
}

.author-portrait--monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-navy);
    background: var(--color-navy-soft);
}

.author-card__ident {
    min-width: 0;
    margin-top: var(--sp-4);
}

.author-card__name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.3;
    color: var(--color-text);
    transition: color var(--ease);
}

.author-card:hover .author-card__name { color: var(--color-navy); }

/* Micro-caps meta line under the name — life dates, primary role. */
.author-card__meta {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-muted-light);
    font-variant-numeric: tabular-nums;
}

.author-card__bio {
    font-size: 0.815rem;
    line-height: 1.65;
    color: var(--color-muted);
    /* Ranged left even though the head above is centred — centred
       prose is markedly harder to read at this measure. */
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--sp-4);
}

.author-card__bio--empty {
    font-style: italic;
    color: var(--color-muted-light);
}

.author-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border-subtle);
}

/* -- Profile hero --------------------------------------------- */
.author-hero {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: var(--sp-8);
    padding: var(--sp-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    margin-bottom: var(--sp-6);
}

.author-hero__portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm);
}

.author-hero__portrait--monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 600;
    color: var(--color-navy);
    background: var(--color-navy-soft);
    box-shadow: none;
}

.author-hero__body { min-width: 0; }

.author-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* Roles as an eyebrow above the name rather than pills below it —
   it reads as a byline, and it stops the hero opening with a row of
   coloured chips before the person's own name. */
.author-hero__eyebrow {
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.author-hero__name {
    font-family: var(--font-display);
    font-size: 1.95rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--color-text);
}

.author-hero__sub {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.author-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* -- Biography ------------------------------------------------- */
.author-bio {
    margin-top: var(--sp-5);
    padding-left: var(--sp-5);
    /* A rule down the left edge sets the biography apart from the
       catalogue data around it, the way a standfirst does in print. */
    border-left: 2px solid var(--color-navy-soft);
    font-size: 0.925rem;
    /* 1.75 and a capped measure — this is the one block of real prose
       in the whole interface. */
    line-height: 1.78;
    max-width: 66ch;
    color: var(--color-text-soft);
    white-space: pre-line;
}

.author-bio--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-bio__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 38px;
    margin-top: var(--sp-1);
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
}

.author-bio__toggle:hover { color: var(--color-accent-hover); }

.author-bio__toggle svg { transition: transform var(--ease); }
.author-bio__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.author-bio--empty {
    margin-top: var(--sp-4);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.author-source {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--sp-4);
    font-size: 0.74rem;
    color: var(--color-muted-light);
    text-decoration: none;
}

.author-source:hover { color: var(--color-navy); }

/* -- Profile stat strip ---------------------------------------- */
.author-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    margin-bottom: var(--sp-8);
    overflow: hidden;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 20px;
}

.author-stat {
    padding: var(--sp-5);
    background: var(--color-surface);
}

.author-stat__value {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.author-stat__value--accent { color: var(--color-navy); }

.author-stat__label {
    margin-top: 0.3rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-muted-light);
}

/* -- Section heading ------------------------------------------- */
.author-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.author-section-head__title {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.author-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--sp-8);
}

/* -- Bulk sync progress ---------------------------------------- */
.author-sync-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    font-size: 0.82rem;
    color: var(--color-text-soft);
    background: var(--color-navy-soft);
    border-radius: var(--radius-lg);
}

.author-sync-status__spinner {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 2px solid var(--color-navy);
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: author-spin 700ms linear infinite;
}

@keyframes author-spin { to { transform: rotate(360deg); } }

/* -- States ---------------------------------------------------- */

/* [hidden] has to beat the display rules above — the sync banner and
   the bio toggle both ship hidden and are revealed by script. */
.author-sync-status[hidden],
.author-bio__toggle[hidden] { display: none; }

/* Portraits are hotlinked from biblionet.gr, so one can 404 at any
   time. The monogram is rendered underneath every photo and only
   surfaces if the image actually fails to load. */
.author-portrait--fallback { display: none; }
.author-portrait--failed  { display: none; }
.author-portrait--failed + .author-portrait--fallback { display: flex; }

/* No portrait to show: the hero drops to a monogram badge rather than
   reserving a 210px column of empty space next to two lines of text. */
.author-hero--plain { grid-template-columns: 128px 1fr; align-items: start; }

.author-hero--plain .author-hero__portrait {
    width: 128px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full);
    font-size: 2.5rem;
}

/* Rename popover on the author profile — anchored to its summary so
   it never pushes the hero layout around when opened. */
.author-rename { position: relative; }
.author-rename summary::-webkit-details-marker { display: none; }

.author-rename__panel {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 280px;
    margin-top: var(--sp-2);
    padding: var(--sp-4);
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* -- Responsive ------------------------------------------------ */
@media (max-width: 720px) {
    .author-hero,
    .author-hero--plain {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
        padding: var(--sp-5);
        text-align: center;
    }

    .author-hero__portrait,
    .author-hero--plain .author-hero__portrait {
        width: 148px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: var(--radius-full);
    }

    .author-hero__top,
    .author-hero__actions { justify-content: center; }

    /* The left rule reads as a stray vertical line once the hero is
       centred, and centred prose is hard to read — so the biography
       drops the rule and stays ranged left on its own. */
    .author-bio {
        text-align: left;
        padding-left: 0;
        border-left: none;
    }

    .author-rename__panel { right: 50%; transform: translateX(50%); }

    /* Two cards per row on a phone — a 340px column fits them at
       150px, and a directory of 140 people is unusable one-up. */
    .grid-authors {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--sp-4);
    }

    .author-card { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
    .author-portrait { width: 72px; height: 72px; }
    .author-portrait--monogram { font-size: 1.3rem; }
    .author-card__name { font-size: 0.9rem; }
    .author-card__bio { -webkit-line-clamp: 2; }
    .author-stat { padding: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
    .author-card,
    .author-portrait,
    .author-bio__toggle svg { transition: none; }
    .author-sync-status__spinner { animation: none; }
}

/* Visually hidden, still read by screen readers — for labels that
   would be redundant next to an icon or a placeholder. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A quiet dot next to a menu item that wants attention but isn't
   urgent — currently only "My Profile" while the library is still
   missing a member's contact details. Deliberately not the red of an
   error: nothing is wrong, there is simply something to fill in. */
.member-nudge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: .4rem;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--color-accent);
}

/* ================================================================
   STAFF DESK DASHBOARD
   Action bar → today's counters → action queues. Ordered by what
   a person at the desk does, not by what is easiest to plot.
   ================================================================ */

/* ── Action bar ─────────────────────────────────────────── */
.db-actionbar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

/* The search is the widest thing on the row: it is what a
   barcode scanner types into, so it gets the room. */
.db-omnisearch {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
    display: flex;
    align-items: center;
}

.db-omnisearch__icon {
    position: absolute;
    left: 0.85rem;
    color: var(--color-muted);
    pointer-events: none;
}

.db-omnisearch__input {
    width: 100%;
    padding: 0.7rem 0.9rem 0.7rem 2.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.db-omnisearch__input:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.db-omnisearch__input::placeholder { color: #9ca3af; }

.db-omnisearch__list { max-height: 340px; }

.db-ac-group {
    padding: 0.45rem 0.9rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.db-ac-empty {
    padding: 0.9rem;
    font-size: 0.82rem;
    color: var(--color-muted);
    text-align: center;
}

.db-ac-item__title { font-weight: 500; }

.db-actionbar__buttons {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* Desk buttons are pressed all day, often in a hurry — bigger
   hit area than the secondary buttons elsewhere in the app. */
.db-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.05rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ── Today's counters ───────────────────────────────────── */
.db-today {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.db-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
a.db-tile:hover {
    text-decoration: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}
.db-tile--alert { border-color: rgba(220, 38, 38, 0.35); }

.db-tile__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.db-tile__value {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.db-tile__divider { color: var(--color-muted-light); font-weight: 400; }
.db-tile__sub {
    font-size: 0.72rem;
    color: var(--color-muted);
}

/* ── Needs attention ────────────────────────────────────── */
.db-attention { margin-top: var(--sp-5); }

.db-attention-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    font-size: 0.855rem;
    border-bottom: 1px solid var(--color-border-subtle);
}
.db-attention-row:last-child { border-bottom: none; }
.db-attention-row__icon { display: flex; color: var(--color-green, #16a34a); flex-shrink: 0; }
.db-attention-row--error .db-attention-row__icon { color: var(--color-red); }
.db-attention-row__text { flex: 1; min-width: 0; }
.db-attention-row__meta {
    font-size: 0.74rem;
    color: var(--color-muted);
    margin-left: var(--sp-2);
}

/* ── Action queues ──────────────────────────────────────── */
.db-queue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    align-items: start;
}

/* Holds and overdue carry per-row action buttons, so they get
   the full width rather than being squeezed into a column. */
.db-queue-panel--wide { grid-column: 1 / -1; }

.db-count-pill {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    vertical-align: middle;
}
.db-count-pill--alert {
    color: var(--color-red);
    background: var(--color-red-soft);
    border-color: rgba(220, 38, 38, 0.25);
}

.db-queue-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--color-border-subtle);
}
.db-queue-row:last-child { border-bottom: none; }

.db-queue-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.db-queue-row__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}
.db-queue-row__sub { font-size: 0.755rem; color: var(--color-muted); }

.db-queue-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-shrink: 0;
    white-space: nowrap;
}

/* The action column of a queue table must stay a real table cell.
   Making it a flex container takes it out of the column model, so
   the data columns collapse to their text and leave a dead gap
   between the last one and the buttons. Width 1% is the usual
   "shrink to content" trick: the other columns take the rest. */
.db-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.db-inline-form { display: inline-block; margin: 0; }
.db-col-actions .db-inline-form + .db-inline-form { margin-left: var(--sp-2); }

.db-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.db-table-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--color-muted);
}

/* Compact rows for the awareness feed — it is reference, not
   work, so it should not take a book-cover's worth of height. */
.db-item__link--compact { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.db-item__cover--mini {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.db-header-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

@media (max-width: 900px) {
    .db-queue-grid { grid-template-columns: 1fr; }
    .db-actionbar__buttons { width: 100%; }
    .db-action-btn { flex: 1 1 auto; justify-content: center; }
    .db-queue-row { flex-wrap: wrap; }
    .db-queue-row__actions { width: 100%; justify-content: flex-start; }
}