/* ============================================================
   VARIABILE CSS — modifică aici pentru a schimba tema globală
   ============================================================ */
:root {
    /* ── BookCard token-uri ──────────────────────────────────────────────
       Modifică aici pentru a schimba aspectul tuturor cardurilor de cărți.
       ─────────────────────────────────────────────────────────────────── */
    --bc-card-radius:          12px;
    --bc-card-bg:              #FFFDF9;
    --bc-card-border:          #E4DDD0;
    --bc-card-shadow-hover:    rgba(31,38,35,0.12);
    --bc-focus-ring:           #11766E;
    --bc-cover-bg:             #EFE9DD;
    --bc-placeholder-color:    #A39C8E;
    --bc-title-color:          #1F2623;
    --bc-author-color:         #5E6660;
    --bc-meta-size:            0.74rem;
    --bc-meta-color:           #5E6660;
    --bc-chip-size:            0.72rem;
    --bc-star-color:           #D9A233;
    --bc-rs-reading-bg:        #E3EBF0;
    --bc-rs-reading-text:      #1F4E6B;
    --bc-rs-finished-bg:       #E4EFE8;
    --bc-rs-finished-text:     #1F5A40;
    --bc-rs-abandoned-bg:      #F6E3DA;
    --bc-rs-abandoned-text:    #8A3F22;

    /* ── Fonturi ───────────────────────────────────────────────── */
    --rh-font-sans:      "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rh-font-display:   var(--rh-font-sans);   /* titluri: același font, mai gros */

    /* ── Paleta „Cartiva” (oglindită în MudProviders.razor) ───── */
    /* Primary: #11766E pe #F6F2EA ≈ 5.1:1 → WCAG AA ✓ */
    --rh-primary:        #11766E;
    --rh-primary-light:  #1A8C82;
    --rh-primary-dark:   #0F4F4A;
    --rh-primary-subtle: #E1ECE8;   /* fundal pentru tab activ, chip-uri */
    --rh-on-primary-subtle: #0F4F4A; /* text pe --rh-primary-subtle */
    --rh-secondary:      #5E6660;
    --rh-accent:         #C8704F;   /* terracotta — badge-uri, atenționări blânde */
    --rh-bg:             #F6F2EA;
    --rh-surface:        #FFFDF9;
    --rh-surface-sunken: #F1ECE2;   /* benzi de info în interiorul cardurilor */
    --rh-text:           #1F2623;
    --rh-text-muted:     #5E6660;
    --rh-border:         #E4DDD0;
    --rh-border-strong:  #CFC6B6;
    --rh-radius:         10px;
    --rh-radius-lg:      16px;
    --rh-shadow-sm:      0 1px 2px rgba(31,38,35,0.06);
    --rh-shadow:         0 4px 16px rgba(31,38,35,0.08);
    --rh-appbar-height:  72px;
    --rh-bottom-nav-height: 64px;
    color-scheme: light dark;

    /* ── Status semantic tokens ───────────────────────────────── */
    --rh-success:        #2E7D5B;
    --rh-success-text:   #1F5A40;
    --rh-success-subtle: rgba(46,125,91,0.10);
    --rh-warning:        #D9A233;
    --rh-warning-text:   #7A4A10;
    --rh-warning-subtle: rgba(230,184,74,0.16);
    --rh-error:          #B3261E;
    --rh-error-subtle:   #FBEDEA;
    --rh-info:           #1F4E6B;

    /* ── Cover / placeholder ──────────────────────────────────── */
    --rh-cover-bg:         #EFE9DD;
    --rh-cover-pattern-bg: #E8EFEA;
    --rh-cover-pattern-fg: #11766E;

    /* ── Stars / rating ───────────────────────────────────────── */
    /* ── Tooltip ──────────────────────────────────────────────── */
    --rh-tooltip-bg:     #0F4F4A;
    --rh-tooltip-text:   #F6F2EA;

    --rh-star-on:        #D9A233;
    --rh-star-off:       #D6CEBF;

    /* ── Reading-status chip tokens (notstarted adăugat) ─────── */
    --bc-rs-notstarted-bg:   #ECEFF1;
    --bc-rs-notstarted-text: #546E7A;

    /* ── Condition badge tokens ───────────────────────────────── */
    --cond-new-bg:          rgba(16,185,129,0.12); --cond-new-text:      #065F46;
    --cond-verygood-bg:     rgba(52,211,153,0.12); --cond-verygood-text: #047857;
    --cond-good-bg:         rgba(251,191,36,0.12); --cond-good-text:     #92400E;
    --cond-worn-bg:         rgba(249,115,22,0.12); --cond-worn-text:     #C2410C;
    --cond-poor-bg:         rgba(239,68,68,0.12);  --cond-poor-text:     #991B1B;
}

/* ── Coperți de rezervă ───────────────────────────────────────────────
   Clasa .rh-cover-N e aleasă din Id-ul cărții (BookCoverPalette.cs), ca
   aceeași carte să aibă aceeași culoare peste tot. Dacă adaugi/scoți o
   culoare, actualizează și BookCoverPalette.Count.
   ─────────────────────────────────────────────────────────────────── */
.rh-cover-0 { --rh-cover-face: #0F4A45; --rh-cover-spine: #0A3632; --rh-cover-ink: #E8E2D4; } /* teal     */
.rh-cover-1 { --rh-cover-face: #E6B84A; --rh-cover-spine: #CFA03A; --rh-cover-ink: #4A3510; } /* muștar   */
.rh-cover-2 { --rh-cover-face: #C8704F; --rh-cover-spine: #AE5C3E; --rh-cover-ink: #F6E6DA; } /* terracotta */
.rh-cover-3 { --rh-cover-face: #1F4E6B; --rh-cover-spine: #173D54; --rh-cover-ink: #E6E1D6; } /* bleumarin */
.rh-cover-4 { --rh-cover-face: #1F2623; --rh-cover-spine: #151A18; --rh-cover-ink: #E6B84A; } /* antracit */
.rh-cover-5 { --rh-cover-face: #92B3A0; --rh-cover-spine: #7C9D8A; --rh-cover-ink: #1C3A33; } /* salvie   */
.rh-cover-6 { --rh-cover-face: #EEE6D3; --rh-cover-spine: #D6CCB5; --rh-cover-ink: #26302C; } /* crem     */

/* În dark mode, antracitul și cremul s-ar pierde/ar orbi pe fundalul închis. */
html[data-theme="dark"] .rh-cover-4 { --rh-cover-face: #2A322E; --rh-cover-spine: #1F2623; }
html[data-theme="dark"] .rh-cover-6 { --rh-cover-face: #D9D0BB; --rh-cover-spine: #C2B89F; }

/* Dark mode — activat prin data-theme="dark" pe <html> */
html[data-theme="dark"] {
    --bc-card-bg:              #1C2421;
    --bc-card-border:          #2E3834;
    --bc-card-shadow-hover:    rgba(0,0,0,0.4);
    --bc-focus-ring:           #4FB3A7;
    --bc-cover-bg:             #232C28;
    --bc-placeholder-color:    #5C6660;
    --bc-title-color:          #EDE7DA;
    --bc-author-color:         #A9AFA7;
    --bc-meta-color:           #A9AFA7;
    --bc-rs-reading-bg:        #0D2137;
    --bc-rs-reading-text:      #64B5F6;
    --bc-rs-finished-bg:       #0A1F0A;
    --bc-rs-finished-text:     #81C784;
    --bc-rs-abandoned-bg:      #2A1A00;
    --bc-rs-abandoned-text:    #FFB74D;

    /* Primary: #4FB3A7 pe #1C2421 ≈ 6.6:1 → WCAG AA ✓ */
    --rh-primary:        #4FB3A7;
    --rh-primary-light:  #7CCBC1;
    --rh-primary-dark:   #3A9A8E;
    --rh-primary-subtle: #1F3532;
    --rh-on-primary-subtle: #9AD9CF;
    --rh-secondary:      #A9AFA7;
    --rh-accent:         #E08A68;
    --rh-bg:             #141A18;
    --rh-surface:        #1C2421;
    --rh-surface-sunken: #171E1B;
    --rh-text:           #EDE7DA;
    --rh-text-muted:     #A9AFA7;
    --rh-border:         #2E3834;
    --rh-border-strong:  #46524D;
    --rh-shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
    --rh-shadow:         0 4px 16px rgba(0,0,0,0.4);

    --rh-success:        #6BC19A;
    --rh-success-text:   #9AD6B9;
    --rh-success-subtle: rgba(107,193,154,0.14);
    --rh-warning:        #E6B84A;
    --rh-warning-text:   #F0CE7E;
    --rh-warning-subtle: rgba(230,184,74,0.14);
    --rh-error:          #F08A80;
    --rh-error-subtle:   #3A2220;
    --rh-info:           #7FB2D1;

    --rh-tooltip-bg:     #EDE7DA;
    --rh-tooltip-text:   #141A18;

    --rh-cover-bg:         #232C28;
    --rh-cover-pattern-bg: #1C2B27;
    --rh-cover-pattern-fg: #6BC19A;

    --rh-star-off:       #46524D;

    --bc-rs-notstarted-bg:   #37474F;
    --bc-rs-notstarted-text: #B0BEC5;

    --cond-new-text:      #6EE7B7;
    --cond-verygood-text: #A7F3D0;
    --cond-good-text:     #FCD34D;
    --cond-worn-text:     #FDBA74;
    --cond-poor-text:     #FCA5A5;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
body {
    background-color: var(--rh-bg);
    color: var(--rh-text);
    font-family: var(--rh-font-sans);
}

/* ============================================================
   ACCESSIBILITY — ascundere vizuală fără ascundere de screen readere
   ============================================================ */
.rh-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================
   FILE UPLOAD BUTTON (label nativ accesibil)
   ============================================================ */
/* ── Nume de persoană pe care se poate apăsa (deschide profilul) ─────────
   Pe mobil nu există hover, deci numele trebuie să arate apăsabil din start:
   - rh-person-row: tot rândul (avatar + nume + rol) e un buton, cu „›” în dreapta;
   - rh-person-inline: numele dintr-o propoziție, subliniat discret mereu. */
.rh-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.15s;
}

.rh-person-row:hover {
    background-color: color-mix(in srgb, var(--rh-text) 5%, transparent);
}

.rh-person-row:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 2px;
}

.rh-person-row:hover .rh-person-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rh-person-chevron.mud-icon-root {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--rh-text-muted);
}

.rh-person-inline {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

.rh-person-inline:hover {
    text-decoration-color: currentColor;
}

.rh-person-inline:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.rh-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 15px;
    border: 1px solid var(--rh-primary);
    border-radius: var(--rh-radius);
    color: var(--rh-primary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.rh-file-label:hover {
    background: color-mix(in srgb, var(--rh-primary) 8%, transparent);
}

.rh-file-label:focus-within {
    outline: 2px solid var(--rh-primary);
    outline-offset: 2px;
}

.rh-file-label.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.rh-img-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Camera modal ─────────────────────────────────────── */
.rh-camera-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rh-camera-modal {
    background: var(--mud-palette-surface);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.rh-camera-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 1px solid var(--rh-border);
}

.rh-camera-video {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    background: #000;
    display: block;
    transition: transform 0.25s ease;
}

.rh-camera-actions {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.rh-camera-preview-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: contain;
    background: #000;
    display: block;
}

/* ============================================================
   APPBAR — header „Cartiva”: logo + tab-uri + clopoțel + avatar
   ============================================================ */
.rh-appbar.mud-appbar {
    background: color-mix(in srgb, var(--rh-bg) 88%, var(--rh-surface)) !important;
    color: var(--rh-text) !important;
    border-bottom: 1px solid var(--rh-border);
    box-shadow: none !important;
    height: var(--rh-appbar-height) !important;
}

.rh-appbar .mud-appbar-content,
.rh-appbar .mud-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 24px;
    padding: 0 clamp(16px, 3vw, 34px);
    height: 100%;
}

/* Stânga (logo + tab-uri) nu se micșorează; dreapta primește ce rămâne și,
   fiind container, își ascunde căutarea și numele când nu încap (vezi mai jos). */
.rh-appbar-left {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 48px);
    flex-shrink: 0;
}

.rh-appbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
    container: rh-appbar-right / inline-size;
}

/* ── Brand ───────────────────────────────────────────────── */
.rh-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--rh-primary-dark);
    user-select: none;
    flex-shrink: 0;
}

.rh-brand-mark {
    height: 34px;
    width: auto;
    display: block;
}

.rh-brand-name {
    font-family: var(--rh-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

html[data-theme="dark"] .rh-brand { color: var(--rh-text); }

.rh-brand:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 4px;
    border-radius: 6px;
}

/* ============================================================
   NAV DESKTOP
   ============================================================ */
.rh-desktop-nav {
    display: none;
    gap: 4px;
    align-items: center;
}

.rh-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: var(--rh-radius);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--rh-text);
    opacity: 0.85;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.rh-nav-link:hover {
    opacity: 1;
    color: var(--rh-primary-dark);
    background: color-mix(in srgb, var(--rh-primary-subtle) 60%, transparent);
}

.rh-nav-link.active {
    opacity: 1;
    color: var(--rh-primary-dark);
    background: var(--rh-primary-subtle);
}

html[data-theme="dark"] .rh-nav-link:hover,
html[data-theme="dark"] .rh-nav-link.active {
    color: var(--rh-primary-light);
}

.rh-nav-link:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 2px;
}

.rh-nav-admin {
    color: var(--rh-accent) !important;
}

@media (min-width: 960px) {
    .rh-desktop-nav {
        display: flex;
    }
}

/* Între 960 și 1280 tab-urile se strâng, ca să încapă și clopoțelul + avatarul */
@media (min-width: 960px) and (max-width: 1279.98px) {
    .rh-desktop-nav { gap: 2px; }
    .rh-nav-link { padding: 9px 11px; }
}

/* ── Căutare rapidă în header (doar pe ecrane late) ─────── */
.rh-header-search {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 0 1 300px;
    min-width: 180px;
    height: 40px;
    padding: 0 12px;
    margin-right: 4px;
    border: 1px solid var(--rh-border-strong);
    border-radius: 10px;
    background: var(--rh-surface);
    color: var(--rh-text-muted);
}

.rh-header-search:focus-within {
    border-color: var(--rh-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rh-primary) 18%, transparent);
}

.rh-header-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    color: var(--rh-text);
}

.rh-header-search input::placeholder {
    color: var(--rh-text-muted);
}

/* Apare doar pe desktop și doar când rămâne loc lângă clopoțel + avatar;
   altfel căutarea rămâne în Descoperă. */
@media (min-width: 960px) {
    @container rh-appbar-right (min-width: 540px) {
        .rh-header-search { display: flex; }
    }
}

/* ── Meniu utilizator (avatar + nume + chevron) ─────────── */
.rh-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--rh-text);
    transition: background 0.15s;
}

.rh-user-btn:hover {
    background: color-mix(in srgb, var(--rh-primary-subtle) 60%, transparent);
}

.rh-user-btn:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 2px;
}

.rh-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rh-primary-dark);
    color: #F6F2EA;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}

html[data-theme="dark"] .rh-avatar {
    background: var(--rh-primary);
    color: #10201D;
}

.rh-user-name {
    font-weight: 500;
    font-size: 0.95rem;
    max-width: clamp(60px, 14vw, 180px);
    overflow: hidden;
}

.rh-user-chevron {
    opacity: 0.7;
}

/* Când tab-urile ocupă aproape tot header-ul, rămâne doar avatarul */
@container rh-appbar-right (max-width: 320px) {
    .rh-user-name,
    .rh-user-chevron {
        display: none;
    }
}

/* Pe telefon rămâne doar avatarul */
@media (max-width: 599.98px) {
    .rh-user-name,
    .rh-user-chevron {
        display: none;
    }
    .rh-brand-name {
        font-size: 1.35rem;
    }
}

.rh-user-menu .mud-list {
    min-width: 220px;
}

.rh-menu-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.95rem;
    color: var(--rh-error);
    cursor: pointer;
    text-align: left;
}

.rh-menu-logout:hover {
    background: var(--mud-palette-action-default-hover);
}

.rh-menu-logout:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: -2px;
}

/* ============================================================
   BOTTOM NAV (mobil)
   ============================================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--rh-surface);
    border-top: 1px solid var(--rh-border);
    z-index: 1300;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--rh-text-muted);
    font-size: 10px;
    font-weight: 500;
    transition: color 0.15s;
    border-radius: 8px;
}

.bottom-nav-item.active,
.bottom-nav-item.active .mud-icon-root {
    color: var(--rh-primary);
}

.bottom-nav-item:active,
.bottom-nav-item:active .mud-icon-root {
    color: var(--rh-primary);
}

.bottom-nav-item:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: -2px;
}

.bottom-nav-item .mud-icon-root {
    font-size: 22px;
}

@media (max-width: 959px) {
    .bottom-nav {
        display: flex;
    }

    .mud-main-content {
        padding-bottom: 72px !important;
    }
}

/* ============================================================
   CARD CARTI
   ============================================================ */
/* ============================================================
   BOOK CARD — Airbnb style
   ============================================================ */
.rh-book-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 14px;
    background: var(--rh-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.rh-book-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
    transform: translateY(-3px);
}

/* Copertă — aspect ratio 2:3, maxim 200px înălțime */
.rh-book-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    max-height: 200px;
    overflow: hidden;
    background: var(--rh-cover-bg);
    flex-shrink: 0;
}

.rh-book-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.rh-book-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rh-cover-pattern {
    background: var(--rh-cover-pattern-bg);
    overflow: hidden;
    padding: 0;
}

.rh-pattern-svg {
    color: var(--rh-cover-pattern-fg);
    display: block;
}

/* Badge disponibilitate peste imagine */
.rh-cover-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    border-radius: 20px;
    line-height: 1.4;
}

.rh-cover-badge.badge-available {
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
}

.rh-cover-badge.badge-loaned {
    background: rgba(245, 158, 11, 0.9);
    color: #fff;
}

/* Chip stare lectură — în corpul cardului */
.rh-rs-chip {
    display: inline-block;
    align-self: flex-start;
    width: fit-content;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    margin-top: 2px;
}
.rh-rs-chip.rh-rs-notstarted  { background: var(--bc-rs-notstarted-bg);  color: var(--bc-rs-notstarted-text); }
.rh-rs-chip.rh-rs-inprogress  { background: var(--bc-rs-reading-bg);    color: var(--bc-rs-reading-text); }
.rh-rs-chip.rh-rs-abandoned   { background: var(--bc-rs-abandoned-bg);  color: var(--bc-rs-abandoned-text); }
.rh-rs-chip.rh-rs-finished    { background: var(--bc-rs-finished-bg);   color: var(--bc-rs-finished-text); }

/* Corp */
.rh-book-body {
    flex: 1;
    padding: 12px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rh-book-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rh-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rh-book-author {
    font-size: 0.8rem;
    color: var(--rh-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge condiție cu dot colorat */
.rh-condition-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    margin-top: 4px;
    align-self: flex-start;
}

.rh-condition-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cond-new      { background: var(--cond-new-bg);      color: var(--cond-new-text); }
.cond-verygood { background: var(--cond-verygood-bg); color: var(--cond-verygood-text); }
.cond-good     { background: var(--cond-good-bg);     color: var(--cond-good-text); }
.cond-worn     { background: var(--cond-worn-bg);     color: var(--cond-worn-text); }
.cond-poor     { background: var(--cond-poor-bg);     color: var(--cond-poor-text); }

.cond-new      .rh-condition-dot { background: #10B981; }
.cond-verygood .rh-condition-dot { background: #34D399; }
.cond-good     .rh-condition-dot { background: #FBBF24; }
.cond-worn     .rh-condition-dot { background: #F97316; }
.cond-poor     .rh-condition-dot { background: var(--rh-error); }

/* Badge "Cerere trimisă" — verde foarte deschis cu checkmark */
.rh-sent-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rh-success-text);
    background: var(--rh-success-subtle);
    border-radius: 20px;
    padding: 5px 12px;
    white-space: nowrap;
}

.rh-sent-badge .mud-icon-root {
    font-size: 16px !important;
    color: var(--rh-success);
}


/* ═══════════════════════════════════════════════════════════════════════
   Tooltip — un singur aspect în toată aplicaţia. MudBlazor le desenează
   gri-închis neutru; aici trec pe verdele Cartiva, cu text aliniat la stânga
   şi lăţime plafonată, ca explicaţiile lungi (liste de grupuri, mesaje) să
   se rupă pe rânduri în loc să se întindă cât ecranul.
   ═══════════════════════════════════════════════════════════════════════ */
.mud-tooltip.mud-tooltip-default {
    background-color: var(--rh-tooltip-bg);
    color: var(--rh-tooltip-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: var(--rh-shadow);
    max-width: 260px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.mud-tooltip.mud-tooltip-arrow::after {
    border-top-color: var(--rh-tooltip-bg);
}

/* Wrapper-ul pe care îl adaugă MudTooltip nu trebuie să rupă trunchierea
   din interior: fără asta, textul cu ellipsis îşi pierde limita de lăţime. */
.rh-ot-root {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.rh-ot {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.rh-ot-1 {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rh-ot-multi {
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* Rând proprietar / grup */
.rh-book-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--rh-text-muted);
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rh-book-meta .mud-icon-root {
    font-size: 15px !important;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Pill disponibilitate */
.rh-avail-pill {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    align-self: flex-start;
}

.rh-avail-pill.pill-available {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.rh-avail-pill.pill-loaned {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
}

html[data-theme="dark"] .rh-avail-pill.pill-available { color: #34D399; }
html[data-theme="dark"] .rh-avail-pill.pill-loaned    { color: #FCD34D; }

.rh-avail-pill.pill-external {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
}
html[data-theme="dark"] .rh-avail-pill.pill-external { color: #A78BFA; }
.rh-pill-truncate { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

.rh-borrower-line {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    flex-wrap: wrap;
    margin-top: 2px;
}
.rh-borrower-name { font-weight: 600; color: var(--rh-text); }
.rh-borrower-until { opacity: 0.75; font-style: italic; }

.rh-external-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.rh-external-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-external-date { opacity: 0.7; flex-shrink: 0; }

/* Carduri din dialogul tip împrumut */
.rh-loan-type-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--rh-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rh-loan-type-card:hover {
    background: var(--mud-palette-action-hover);
    border-color: var(--mud-palette-primary);
}

/* Card compact */
.rh-book-card.compact .rh-book-cover { /* aspect-ratio:2/3 from base */ }
.rh-book-card.compact .rh-book-body  { padding: 8px 8px 4px; gap: 2px; }
.rh-book-card.compact .rh-book-title { font-size: 0.75rem; }
.rh-book-card.compact .rh-book-author { font-size: 0.68rem; }
.rh-book-card.compact .rh-book-meta  { font-size: 0.65rem; }
.rh-book-card.compact .rh-avail-pill { font-size: 0.6rem; padding: 1px 6px; }
.rh-book-card.compact .rh-book-actions { padding: 0 4px 6px; gap: 0; }

/* Borrower info row on card */
.rh-borrower-info { color: var(--rh-primary); font-size: 0.7rem !important; margin-top: 2px; }

/* Book detail dialog */
.rh-book-detail-card { display:flex; gap:16px; align-items:flex-start; padding: 4px 0 8px; }
.rh-detail-stats { display:flex; flex-direction:column; gap:10px; }
.rh-detail-stat { display:flex; align-items:flex-start; gap:8px; font-size:0.9rem; }
.rh-detail-stat .mud-icon-root { flex-shrink:0; margin-top:2px; }

/* Grilă categorii în dialog */
.rh-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0;
}

/* Acțiuni */
.rh-book-actions {
    padding: 0 8px 10px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* ============================================================
   RATING — stele interactive
   ============================================================ */
.rh-star-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.rh-star-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 28px;
    color: var(--rh-star-off);
    line-height: 1;
    transition: color 0.1s, transform 0.1s;
}

.rh-star-btn:hover,
.rh-star-btn:focus-visible {
    color: var(--rh-star-on);
    transform: scale(1.2);
    outline: none;
}

.rh-star-btn.on {
    color: var(--rh-star-on);
}

/* ── Rating dialog sections ──────────────────────────── */
.rh-rating-section {
    background: color-mix(in srgb, var(--rh-primary) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--rh-primary) 15%, transparent);
    border-radius: var(--rh-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.rh-rating-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rh-text);
    margin-bottom: 12px;
}

.rh-star-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rh-primary);
    margin-left: 8px;
}

.rh-owner-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rh-text-muted);
    margin-left: 4px;
    white-space: nowrap;
}

.rh-owner-star {
    color: var(--rh-star-on);
    font-size: 0.8rem;
    line-height: 1;
}

/* StarDisplay — readonly */
.rh-star-display {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.rh-sd-star {
    font-size: 14px;
    color: var(--rh-star-off);
    line-height: 1;
}

.rh-sd-star.on {
    color: var(--rh-star-on);
}

.rh-sd-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rh-text-muted);
    margin-left: 4px;
}

/* ============================================================
   GROUP CARDS (MyGroups)
   ============================================================ */
.rh-group-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rh-surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

.rh-group-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.rh-group-card-top {
    padding: 20px 20px 16px;
    flex: 1;
}

.rh-group-emoji {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

.rh-group-card-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--rh-text);
    font-family: var(--rh-font-sans);
    margin-bottom: 4px;
}

.rh-group-card-desc {
    font-size: 0.8rem;
    color: var(--rh-text-muted);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rh-group-card-divider {
    height: 1px;
    background: var(--rh-border);
    margin: 0 20px;
}

.rh-group-card-stats {
    display: flex;
    gap: 0;
    padding: 12px 20px;
}

.rh-gs {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rh-gs-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--rh-text);
    font-family: var(--rh-font-sans);
    line-height: 1;
}

.rh-gs-lbl {
    font-size: 0.7rem;
    color: var(--rh-text-muted);
    margin-top: 3px;
}

/* ============================================================
   GROUP DETAIL HERO
   ============================================================ */
.rh-group-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--rh-surface);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
}

.rh-group-hero-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rh-group-hero-emoji {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
}

.rh-group-hero-name {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    font-family: var(--rh-font-sans);
    color: var(--rh-text);
    margin: 0 0 4px;
}

.rh-group-hero-desc {
    font-size: 0.9rem;
    color: var(--rh-text-muted);
    margin: 0;
}

.rh-group-hero-stats {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}

.rh-ghs {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rh-ghs-val {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--rh-font-sans);
    color: var(--rh-primary);
    line-height: 1;
}

.rh-ghs-lbl {
    font-size: 0.72rem;
    color: var(--rh-text-muted);
    margin-top: 4px;
    white-space: nowrap;
}

/* ============================================================
   GROUP DETAIL SECȚIUNI (Ultimele, Top, Activitate)
   ============================================================ */
.rh-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.rh-section-icon { font-size: 1.2rem; }

.rh-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rh-text);
    font-family: var(--rh-font-sans);
}

/* Top cititori */
.rh-top-reader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--rh-surface);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.rh-top-medal { font-size: 1.1rem; min-width: 24px; }
.rh-top-name  { flex: 1; font-size: 0.88rem; font-weight: 600; color: var(--rh-text); }
.rh-top-count { font-size: 0.78rem; color: var(--rh-text-muted); }

/* Activitate recentă */
.rh-activity-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--rh-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.rh-activity-icon { font-size: 0.9rem; flex-shrink: 0; }
.rh-activity-text { flex: 1; font-size: 0.82rem; color: var(--rh-text); line-height: 1.4; }
.rh-activity-text em { font-style: normal; color: var(--rh-primary); }
.rh-activity-time  { font-size: 0.72rem; color: var(--rh-text-muted); white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   PAGINI DE LISTĂ — antet, bară de unelte, grilă de cărți
   Folosite de Biblioteca mea și Descoperă.
   ============================================================ */

/* ── Antet de pagină: titlu serif mare + subtitlu + acțiuni ── */
.rh-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin: 24px 0 28px;
}

.rh-page-title {
    font-family: var(--rh-font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--rh-text);
}

.rh-page-sub {
    margin: 10px 0 0;
    font-size: 1.05rem;
    color: var(--rh-text-muted);
}

.rh-page-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Butoane mari (48px), ca în mockup; neutral = contur gri, text închis */
.mud-button-root.rh-btn-lg {
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 0.98rem;
}

.mud-button-root.rh-btn-neutral {
    border-color: var(--rh-border-strong);
    background: var(--rh-surface);
    color: var(--rh-text);
}

.mud-button-root.rh-btn-neutral:hover {
    border-color: var(--rh-primary);
    background: var(--rh-primary-subtle);
}

/* ── Bara de unelte ───────────────────────────────────────── */
.rh-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.rh-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rh-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--rh-border-strong);
    background: transparent;
    color: var(--rh-text);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.rh-pill:hover {
    border-color: var(--rh-text-muted);
}

.rh-pill.active {
    background: var(--rh-text);
    border-color: var(--rh-text);
    color: var(--rh-bg);
}

.rh-pill:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 2px;
}

.rh-pill-count {
    font-size: 0.82rem;
    opacity: 0.65;
}

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

.rh-dot-available { background: var(--rh-success); }
.rh-dot-loaned    { background: var(--rh-accent); }

.rh-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.rh-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px;
    flex: 1 1 260px;
    max-width: 440px;
    border: 1px solid var(--rh-border-strong);
    border-radius: 10px;
    background: var(--rh-surface);
    color: var(--rh-text-muted);
    cursor: text;
}

.rh-search:focus-within {
    border-color: var(--rh-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rh-primary) 18%, transparent);
}

.rh-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.98rem;
    color: var(--rh-text);
}

.rh-search input::placeholder {
    color: var(--rh-text-muted);
    opacity: 0.85;
}

.rh-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--rh-border-strong);
    border-radius: 10px;
    background: var(--rh-surface);
    color: var(--rh-text);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rh-tool-btn:hover,
.rh-tool-btn.active {
    border-color: var(--rh-primary);
}

.rh-tool-btn.active {
    background: var(--rh-primary-subtle);
    color: var(--rh-on-primary-subtle);
}

.rh-tool-btn:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 2px;
}

.rh-tool-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--rh-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rh-view-toggle {
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    border-radius: 12px;
    background: var(--rh-surface-sunken);
}

.rh-view-toggle button {
    width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--rh-text-muted);
    cursor: pointer;
}

.rh-view-toggle button.active {
    background: var(--rh-surface);
    color: var(--rh-text);
    box-shadow: var(--rh-shadow-sm);
}

.rh-view-toggle button:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 1px;
}

/* Căutarea mare de pe Descoperă */
.rh-search.rh-search-lg {
    height: 58px;
    max-width: 760px;
    margin-bottom: 28px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 1.05rem;
}

.rh-search.rh-search-lg input {
    font-size: 1.05rem;
}

.rh-toolbar-sep {
    width: 1px;
    height: 28px;
    margin: 0 6px;
    background: var(--rh-border-strong);
    align-self: center;
}

.rh-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.rh-toolbar-left .rh-switch {
    margin: 0;
}

.rh-toolbar-left .rh-switch .mud-switch-label,
.rh-toolbar-left .rh-switch .mud-typography {
    font-size: 0.98rem;
    font-weight: 500;
    white-space: nowrap;
}

.rh-result-count {
    color: var(--rh-text-muted);
    font-size: 0.98rem;
    white-space: nowrap;
}

.rh-result-count strong {
    color: var(--rh-text);
    font-weight: 600;
}

.rh-extra-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.rh-extra-filters .rh-extra-filter {
    flex: 0 1 240px;
    margin: 0;
}

.rh-divider {
    height: 1px;
    background: var(--rh-border);
    margin: 28px 0 32px;
}

.rh-empty-note {
    margin: 0 0 24px;
    color: var(--rh-text-muted);
}

/* ── Grila de cărți ───────────────────────────────────────── */
.rh-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 42vw), 1fr));
    gap: 44px clamp(16px, 2.5vw, 38px);
    align-items: start;
}

.rh-book-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Tile-ul „Adaugă o carte” are formatul unei coperți */
.rh-add-tile {
    aspect-ratio: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 2px dashed var(--rh-border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--rh-on-primary-subtle);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rh-add-tile:hover {
    border-color: var(--rh-primary);
    background: color-mix(in srgb, var(--rh-primary-subtle) 50%, transparent);
}

.rh-add-tile:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 3px;
}

.rh-add-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rh-primary-subtle);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
}

.rh-add-tile-label {
    font-size: 1rem;
    font-weight: 600;
}

.rh-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 56px 0 16px;
    color: var(--rh-text-muted);
    font-size: 0.95rem;
}

@media (max-width: 599.98px) {
    .rh-page-head { margin-top: 8px; }
    .rh-page-actions { width: 100%; }
    .rh-page-actions .mud-button-root { flex: 1; }
    .mud-button-root.rh-btn-lg { padding: 0 12px; font-size: 0.92rem; white-space: nowrap; }
    .rh-toolbar { gap: 12px; }
    .rh-tools { gap: 8px; }
    .rh-tool-btn { padding: 0 12px; font-size: 0.92rem; }
    .rh-view-toggle { margin-left: auto; }
    .rh-view-toggle button { width: 36px; }
    .rh-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
    .rh-pill { flex-shrink: 0; height: 40px; padding: 0 16px; }
    .rh-tools { justify-content: flex-start; }
    .rh-search { flex-basis: 100%; max-width: none; }
    .rh-divider { margin: 20px 0 24px; }
    .rh-toolbar-left { width: 100%; }
    .rh-toolbar-left > .rh-pills { flex-basis: calc(100% + 32px); }
    .rh-toolbar-sep { display: none; }
    .rh-toolbar-discover .rh-tools { justify-content: space-between; }
    .rh-search.rh-search-lg { height: 50px; margin-bottom: 20px; }
}

/* ============================================================
   BLAZOR ERRORS
   ============================================================ */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--rh-success); }
.invalid { outline: 1px solid var(--rh-error); }
.validation-message { color: var(--rh-error); }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* MudTextField outlined — face input-ul interior transparent ca să
   preia culoarea container-ului (surface), nu background-ul browser-ului */
.mud-input-outlined .mud-input-root,
.mud-input-outlined input,
.mud-input-outlined textarea {
    background-color: transparent;
}

/* ============================================================
   FOOTER — sticky to bottom
   ============================================================ */

/* MudLayout pune conținutul în flex column; facem main-content să crească */
.mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px); /* 64px = înălțimea AppBar */
}

.mud-main-content > .mud-container {
    flex: 1;
}

.rh-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 16px;
    margin-top: 32px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8rem;
    color: var(--rh-text-muted);
    flex-wrap: wrap;
}

.rh-footer a {
    color: var(--rh-text-muted);
    text-decoration: none;
}

.rh-footer a:hover {
    color: var(--rh-primary);
    text-decoration: underline;
}

/* ============================================================
   PAGINI LEGALE (Privacy / Terms)
   ============================================================ */
.rh-legal {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.75;
    color: var(--rh-text);
}

.rh-legal h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.rh-legal-meta {
    font-size: 0.85rem;
    color: var(--rh-text-muted);
    margin-bottom: 32px;
}

.rh-legal h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 36px;
    margin-bottom: 10px;
}

.rh-legal h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 6px;
}

.rh-legal p,
.rh-legal ul {
    margin-bottom: 12px;
}

.rh-legal ul {
    padding-left: 24px;
}

.rh-legal li {
    margin-bottom: 4px;
}

.rh-legal a {
    color: var(--rh-primary);
}

.rh-legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rh-legal-table th,
.rh-legal-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px 10px;
    border-bottom: 1px solid var(--rh-border, rgba(127, 127, 127, 0.25));
}

.rh-legal-table th {
    font-weight: 600;
}

.rh-legal-table code {
    font-size: 0.8rem;
    word-break: break-all;
}

/* ============================================================
   PRIVACY WIZARD
   ============================================================ */
.rh-wizard-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}

.rh-wizard-card {
    background: var(--rh-surface);
    border-radius: 24px;
    padding: 40px 32px 32px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rh-wizard-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.rh-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    transition: background 0.2s, transform 0.2s;
}

.rh-wizard-dot.active {
    background: var(--rh-primary);
    transform: scale(1.25);
}

.rh-wizard-dot.done {
    background: var(--rh-primary);
    opacity: 0.4;
}

.rh-wizard-icon {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 4px;
}

.rh-wizard-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: var(--rh-text);
}

.rh-wizard-body {
    font-size: 0.92rem;
    color: var(--rh-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 300px;
}

.rh-wizard-choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 4px 0;
}

.rh-wizard-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid var(--mud-palette-lines-default);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
    color: var(--rh-text);
}

.rh-wizard-radio input[type="radio"] {
    accent-color: var(--rh-primary);
    width: 18px;
    height: 18px;
}

.rh-wizard-radio.selected {
    border-color: var(--rh-primary);
    background: color-mix(in srgb, var(--rh-primary) 8%, transparent);
}

.rh-wizard-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 8px;
}

.rh-wizard-actions--row {
    flex-direction: row;
    justify-content: center;
}

.rh-wizard-btn-primary {
    padding: 12px 24px;
    background: var(--rh-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: inherit;
}

.rh-wizard-btn-primary:hover { opacity: 0.88; }

.rh-wizard-btn-secondary {
    padding: 12px 24px;
    background: transparent;
    color: var(--rh-text-muted);
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: inherit;
}

.rh-wizard-btn-secondary:hover { border-color: var(--rh-primary); color: var(--rh-primary); }

/* Titlul cărții în propozițiile de activitate (ActivityText.Sentence) */
.act-book {
    color: var(--rh-primary);
}

/* ============================================================
   DIALOGURI — un singur aspect pentru toate MudDialog-urile:
   colțuri mari, titlu serif, bară de acțiuni cu separator.
   ============================================================ */
.mud-dialog {
    border-radius: 24px !important;
    background: var(--rh-surface) !important;
    box-shadow: 0 30px 80px -20px rgba(31, 38, 35, 0.45) !important;
}

.mud-dialog .mud-dialog-title {
    padding: 32px 36px 4px;
}

.mud-dialog .mud-dialog-title .mud-typography-h6 {
    font-family: var(--rh-font-display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.mud-dialog .mud-dialog-content {
    padding: 16px 36px 8px;
}

.mud-dialog .mud-dialog-actions {
    margin: 16px 36px 0;
    padding: 20px 0 28px;
    border-top: 1px solid var(--rh-border);
    gap: 12px;
}

/* Butoanele din bara de jos au aceeași înălțime ca în restul aplicației */
.mud-dialog .mud-dialog-actions .mud-button-root {
    white-space: nowrap;
    min-height: 46px;
    padding-left: 22px;
    padding-right: 22px;
    border-radius: 10px;
    font-size: 0.98rem;
}

.mud-dialog .mud-dialog-actions .mud-button-text {
    padding-left: 12px;
    padding-right: 12px;
}

.mud-dialog .mud-button-close {
    top: 26px;
    right: 26px;
}

/* Formularul de carte: mai lat decât Small, mai îngust decât Medium */
.mud-dialog.rh-dlg-form {
    max-width: 780px !important;
}

/* Titlu cu iconiță (dialogurile mai vechi) */
.rh-dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Spațiu la dreapta pentru butonul X al dialogului, poziționat absolut peste titlu */
    padding: 4px 44px 4px 0;
}

.rh-dialog-header > .mud-icon-root {
    color: var(--rh-primary);
}

/* Dialog fără bară de titlu: X-ul e desenat de noi, în colț */
.rh-dlg-close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--rh-text);
    cursor: pointer;
}

.rh-dlg-close:hover { background: var(--rh-surface-sunken); }
.rh-dlg-close:focus-visible { outline: 2px solid var(--rh-primary); }

.mud-dialog:has(.rh-dlg-close) .mud-dialog-content {
    padding-top: 36px;
}

/* ── Antet de carte în dialog: coperta + titlu + stare ───── */
.rh-dlg-hero {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.rh-dlg-cover {
    width: 170px;
    flex-shrink: 0;
}

.rh-dlg-info {
    flex: 1;
    min-width: 0;
    padding-right: 36px;   /* nu intră sub X */
}

.rh-dlg-title {
    margin: 0;
    font-family: var(--rh-font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--rh-text);
    overflow-wrap: anywhere;
}

.rh-dlg-author {
    margin-top: 8px;
    font-size: 1.1rem;
    color: var(--rh-text-muted);
}

.rh-dlg-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 600;
    background: var(--rh-success-subtle);
    color: var(--rh-success-text);
}

.rh-dlg-pill::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.rh-dlg-pill-loaned  { background: var(--rh-warning-subtle); color: var(--rh-warning-text); }
.rh-dlg-pill-handover { background: color-mix(in srgb, var(--rh-accent) 16%, transparent); color: var(--rh-accent); }
.rh-dlg-pill-muted   { background: var(--rh-surface-sunken); color: var(--rh-text-muted); }
.rh-dlg-pill-sent    { background: var(--rh-primary-subtle); color: var(--rh-on-primary-subtle); }

.rh-dlg-note {
    margin: 18px 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--rh-text-muted);
}

.rh-dlg-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 32px;
    margin: 22px 0 0;
    font-size: 1rem;
}

.rh-dlg-facts dt { color: var(--rh-text-muted); }
.rh-dlg-facts dd { margin: 0; color: var(--rh-text); }

.rh-dlg-section {
    margin-top: 32px;
}

.rh-dlg-divider {
    height: 1px;
    margin: 28px 0 0;
    background: var(--rh-border);
}

.rh-dlg-danger {
    margin-right: auto;
    padding: 8px 4px;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--rh-error);
    cursor: pointer;
}

.rh-dlg-danger:hover { text-decoration: underline; text-underline-offset: 3px; }
.rh-dlg-danger:focus-visible { outline: 2px solid var(--rh-error); outline-offset: 2px; border-radius: 4px; }

.rh-dlg-hint {
    margin-right: auto;
    font-size: 0.92rem;
    color: var(--rh-text-muted);
}

/* ── Câmpuri de formular (etichetă deasupra, input simplu) ── */
.rh-field-label {
    display: block;
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rh-text);
}

.rh-required {
    margin-left: 4px;
    color: var(--rh-error);
}

.rh-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid var(--rh-border-strong);
    border-radius: 10px;
    background: var(--rh-surface);
    color: var(--rh-text);
    font: inherit;
    font-size: 1.02rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rh-input::placeholder { color: var(--rh-text-muted); opacity: 0.8; }

.rh-input:focus {
    border-color: var(--rh-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rh-primary) 16%, transparent);
}

.rh-field + .rh-field { margin-top: 22px; }

/* ── Selector segmentat (starea lecturii) ────────────────── */
.rh-segmented {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
    background: var(--rh-surface-sunken);
}

.rh-segmented button {
    min-height: 46px;
    padding: 6px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--rh-text-muted);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rh-segmented button:hover { color: var(--rh-text); }

.rh-segmented button[aria-checked="true"] {
    background: var(--rh-surface);
    color: var(--rh-text);
    font-weight: 600;
    box-shadow: var(--rh-shadow-sm);
}

.rh-segmented button:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 1px;
}

/* ── Telefon ─────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    .mud-dialog .mud-dialog-title   { padding: 24px 20px 4px; }
    .mud-dialog .mud-dialog-content { padding: 12px 20px 8px; }
    .mud-dialog .mud-dialog-actions { margin: 12px 20px 0; padding: 16px 0 20px; flex-wrap: wrap; }
    .mud-dialog .mud-button-close   { top: 18px; right: 14px; }
    .rh-dlg-close { top: 12px; right: 12px; }
    .rh-dlg-hero  { gap: 18px; }
    .rh-dlg-cover { width: 96px; }
    .rh-dlg-info  { padding-right: 28px; }
    .rh-dlg-title { font-size: 1.5rem; }
    .rh-dlg-author { font-size: 1rem; }
    .rh-dlg-pill  { margin-top: 12px; padding: 6px 14px; font-size: 0.88rem; }
    .rh-dlg-facts { gap: 8px 18px; font-size: 0.92rem; }
    .rh-segmented { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .rh-dlg-danger { width: 100%; text-align: left; margin-bottom: 4px; }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.rh-lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

.rh-lang-switcher .mud-tooltip-root {
    display: flex;
}

.rh-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 16px;
    text-decoration: none;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
    line-height: 1;
}

.rh-lang-btn:hover {
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.06);
}

.rh-lang-btn.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .rh-lang-btn:hover,
html[data-theme="dark"] .rh-lang-btn.active {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   MOTION — accesibilitate
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rh-book-card,
    .rh-group-card {
        transition: box-shadow 0.2s;
    }
    .rh-book-card:hover,
    .rh-group-card:hover {
        transform: none;
    }
    .rh-star-btn {
        transition: none;
    }
    .rh-star-btn:hover,
    .rh-star-btn:focus-visible {
        transform: none;
    }
}

/* ── Validare formulare de cont (js/form-validation.js) ── */
.auth-label.required::after {
    content: " *";
    color: var(--rh-error);
}

.auth-required-note {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--rh-text-muted);
}

input.rh-invalid,
input.rh-invalid:focus {
    border-color: var(--rh-error);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rh-error) 14%, transparent);
}

/* Regulile parolei: gri, verzi pe măsură ce sunt îndeplinite, roșii dacă lipsesc la verificare. */
.pw-rules {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--rh-text-muted);
}

.pw-rules ul {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.pw-rules li::before { content: "○ "; }
.pw-rules li.rh-ok { color: var(--rh-success); }
.pw-rules li.rh-ok::before { content: "✓ "; }
.pw-rules.rh-touched li:not(.rh-ok) { color: var(--rh-error); }