/*
 * Bookchoice Admin — “Architectural Ledger” surface system.
 * Source: stitch/nordic_ledger/DESIGN.md, stitch/login_nordic_ledger/code.html,
 *          stitch/admin_dashboard_overview/code.html (app shell)
 * Tokens: navy primary #001644, tonal greys, dot-grid backdrop, gradient primary CTAs.
 */

:root {
    --bc-primary: #001644;
    --bc-primary-container: #00296f;
    --bc-on-primary: #ffffff;
    --bc-on-primary-container: #6691ff;
    --bc-secondary: #3e5e95;
    --bc-surface: #f8f9fa;
    --bc-surface-container-low: #f3f4f5;
    --bc-surface-container: #edeeef;
    --bc-surface-container-high: #e7e8e9;
    --bc-surface-container-highest: #e1e3e4;
    --bc-surface-lowest: #ffffff;
    --bc-background: #f8f9fa;
    --bc-on-surface: #191c1d;
    --bc-on-surface-variant: #43474f;
    --bc-outline: #747781;
    --bc-outline-variant: #c4c6d1;
    --bc-error: #ba1a1a;
    --bc-success: #1b5e20;
    --bc-radius-sm: 2px;
    --bc-radius-md: 8px;
    --bc-radius-xl: 12px;
    --bc-shadow-card: 0 32px 64px -16px rgba(0, 22, 68, 0.06);
    --bc-shadow-ambient: 0 16px 32px -8px rgba(25, 28, 29, 0.08);
    --bc-focus-ring: rgba(0, 22, 68, 0.12);
}

/*
 * Dark mode for the custom app shell (MudBlazor components follow MudThemeProvider; shell uses plain HTML/CSS).
 * html.bc-dark is toggled from ThemeProviders via bookchoiceTheme.setDark (see App.razor).
 * Palette tokens align with AdminThemeDefinition.PaletteDark.
 */
html.bc-dark {
    color-scheme: dark;
    --bc-primary: #6691ff;
    --bc-primary-container: #1e3a6e;
    --bc-on-primary: #0b0f14;
    --bc-on-primary-container: #c5d4ff;
    --bc-secondary: #9aa7bd;
    --bc-surface: #121821;
    --bc-surface-container-low: #101520;
    --bc-surface-container: #161d29;
    --bc-surface-container-high: #1e2836;
    --bc-surface-container-highest: #253144;
    --bc-surface-lowest: #121821;
    --bc-background: #0b0f14;
    --bc-on-surface: #e6eaf2;
    --bc-on-surface-variant: #9aa7bd;
    --bc-outline: #6b7280;
    --bc-outline-variant: #3d4a5c;
    --bc-error: #ef5350;
    --bc-success: #3dd68c;
    --bc-shadow-card: 0 32px 64px -16px rgba(0, 0, 0, 0.45);
    --bc-shadow-ambient: 0 16px 32px -8px rgba(0, 0, 0, 0.35);
    --bc-focus-ring: rgba(102, 145, 255, 0.35);
}

/*
 * User-selectable color schemes — accent overrides only.
 * One html.bc-scheme-* class is toggled by bookchoiceTheme.setScheme (see App.razor).
 * Surface / text tokens are intentionally inherited from :root and html.bc-dark so all
 * schemes share the same density and only the accent pair changes.
 * Keep in sync with AdminThemeDefinition.Build() palettes.
 */
html.bc-scheme-nordic {
    /* default tokens in :root / html.bc-dark — class kept for symmetry with the other schemes. */
}

html.bc-scheme-forest {
    --bc-primary: #1b5e20;
    --bc-primary-container: #2e7d32;
    --bc-on-primary: #ffffff;
    --bc-on-primary-container: #a5d6a7;
    --bc-secondary: #558b2f;
    --bc-focus-ring: rgba(27, 94, 32, 0.15);
    --bc-shadow-card: 0 32px 64px -16px rgba(27, 94, 32, 0.08);
}

html.bc-dark.bc-scheme-forest {
    --bc-primary: #81c784;
    --bc-primary-container: #2e7d32;
    --bc-on-primary: #0a120c;
    --bc-on-primary-container: #c8e6c9;
    --bc-secondary: #9ccc65;
    --bc-focus-ring: rgba(129, 199, 132, 0.35);
}

html.bc-scheme-sunset {
    --bc-primary: #c2410c;
    --bc-primary-container: #9a3412;
    --bc-on-primary: #ffffff;
    --bc-on-primary-container: #fed7aa;
    --bc-secondary: #e11d48;
    --bc-focus-ring: rgba(194, 65, 12, 0.15);
    --bc-shadow-card: 0 32px 64px -16px rgba(194, 65, 12, 0.08);
}

html.bc-dark.bc-scheme-sunset {
    --bc-primary: #fb923c;
    --bc-primary-container: #9a3412;
    --bc-on-primary: #1c0f05;
    --bc-on-primary-container: #fed7aa;
    --bc-secondary: #f472b6;
    --bc-focus-ring: rgba(251, 146, 60, 0.35);
}

html.bc-scheme-mono {
    --bc-primary: #374151;
    --bc-primary-container: #1f2937;
    --bc-on-primary: #ffffff;
    --bc-on-primary-container: #9ca3af;
    --bc-secondary: #6b7280;
    --bc-focus-ring: rgba(55, 65, 81, 0.15);
    --bc-shadow-card: 0 32px 64px -16px rgba(17, 24, 39, 0.08);
}

html.bc-dark.bc-scheme-mono {
    --bc-primary: #cbd5e1;
    --bc-primary-container: #475569;
    --bc-on-primary: #0f172a;
    --bc-on-primary-container: #e2e8f0;
    --bc-secondary: #94a3b8;
    --bc-focus-ring: rgba(203, 213, 225, 0.35);
}

html.bc-dark .architectural-bg {
    background-color: var(--bc-background);
    background-image: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--bc-primary) 18%, transparent) 1px, transparent 0);
}

html.bc-dark .bc-shell-sidebar {
    background: #121821;
    border-right-color: rgba(42, 52, 68, 0.95);
}

html.bc-dark .bc-shell-context {
    background: #161d29;
}

html.bc-dark .bc-shell-context-title {
    color: #e6eaf2;
}

html.bc-dark .bc-shell-context-sub {
    color: #9aa7bd;
}

html.bc-dark .bc-shell-sidebar-footer {
    border-top-color: rgba(42, 52, 68, 0.85);
}

html.bc-dark .bc-nav-item {
    color: #c4c6d1;
}

html.bc-dark a.bc-nav-item:hover,
html.bc-dark .bc-nav-item:not(.bc-nav-item--disabled):hover {
    color: var(--bc-on-surface);
    background: color-mix(in srgb, var(--bc-primary) 12%, transparent);
}

html.bc-dark .bc-nav-item--active {
    color: var(--bc-on-primary-container);
    background: var(--bc-surface-container-high);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.bc-dark .bc-nav-item--active .bc-nav-icon {
    color: var(--bc-primary);
}

html.bc-dark .bc-nav-item--disabled .bc-nav-icon {
    color: var(--bc-outline);
}

html.bc-dark .bc-shell-main {
    background: rgba(11, 15, 20, 0.7);
}

html.bc-dark .bc-shell-topbar {
    background: rgba(15, 20, 28, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    color: #e6eaf2;
}

html.bc-dark .bc-shell-brand {
    color: #e6eaf2;
}

html.bc-dark .bc-shell-divider {
    background: rgba(157, 166, 184, 0.25);
}

html.bc-dark .bc-shell-search {
    background: #161d29;
    border-color: rgba(61, 74, 92, 0.65);
}

html.bc-dark .bc-shell-search-input::placeholder {
    color: #6b7280;
}

html.bc-dark .bc-shell-icon-btn {
    color: #c4c6d1;
}

html.bc-dark .bc-shell-icon-btn:hover {
    background: #1e2836;
}

html.bc-dark .bc-shell-notify-dot {
    border-color: #121821;
}

html.bc-dark .bc-shell-settings-btn {
    color: var(--bc-on-surface-variant);
}

html.bc-dark .bc-shell-settings-btn:hover {
    color: var(--bc-on-primary-container);
}

html.bc-dark .bc-shell-avatar {
    background: color-mix(in srgb, var(--bc-primary) 24%, var(--bc-surface));
    color: var(--bc-on-primary-container);
    border-color: color-mix(in srgb, var(--bc-primary) 45%, var(--bc-surface));
}

html.bc-dark .bc-content-card {
    background: var(--bc-surface-lowest);
    box-shadow: var(--bc-shadow-ambient);
}

html.bc-dark .bc-password-toggle:hover {
    color: var(--bc-on-surface);
    background: #253144;
}

html,
body {
    font-family: 'Inter', 'Roboto', system-ui, sans-serif;
    color: var(--bc-on-surface);
    background: var(--bc-background);
}

/* Dot grid — “architectural” backdrop (stitch/login_nordic_ledger). Dot tint follows the scheme's primary. */
.architectural-bg {
    background-color: var(--bc-surface);
    background-image: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--bc-primary) 3%, transparent) 1px, transparent 0);
    background-size: 40px 40px;
}

.bc-app {
    min-height: 100vh;
}

/*
 * App shell — stitch/admin_dashboard_overview: fixed sidebar + glass top bar + scrollable body.
 */
.bc-shell {
    display: flex;
    min-height: 100vh;
}

.bc-shell-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    width: 16rem;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
    background: #f8fafc;
    border-right: 1px solid rgba(226, 232, 240, 0.85);
    overflow-x: hidden;
}

.bc-shell-context {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    margin-bottom: 1rem;
    background: #f1f5f9;
    border-radius: var(--bc-radius-sm);
}

.bc-shell-context-mark {
    width: 2rem;
    height: 2rem;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-primary);
    color: var(--bc-on-primary);
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bc-shell-context-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1b4b;
    line-height: 1.25;
}

.bc-shell-context-sub {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.bc-shell-context-text {
    min-width: 0;
    overflow: hidden;
}

.bc-shell-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.bc-shell-nav-heading {
    margin: 0.625rem 0 0.125rem;
    padding: 0 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

html.bc-dark .bc-shell-nav-heading {
    color: #94a3b8;
}

.bc-epub-explorer-crumb-sep {
    color: #94a3b8;
    user-select: none;
}

.bc-shell-sidebar-footer {
    flex-shrink: 0;
    padding-top: 1rem;
    margin-top: auto;
    border-top: 1px solid rgba(226, 232, 240, 0.85);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bc-nav-item.bc-nav-item--nested {
    padding-left: 1.875rem;
    font-size: 0.7825rem;
}

.bc-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--bc-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #475569;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

a.bc-nav-item:hover,
.bc-nav-item:not(.bc-nav-item--disabled):hover {
    color: var(--bc-primary);
    background: rgba(148, 163, 184, 0.2);
}

.bc-nav-item--active {
    color: var(--bc-primary);
    background: var(--bc-surface-lowest);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--bc-primary) 6%, transparent);
    transform: translateX(2px);
}

.bc-nav-item--active .bc-nav-icon {
    color: var(--bc-primary);
}

.bc-nav-item--disabled {
    opacity: 0.65;
    cursor: default;
}

/* Keep labels within sidebar width (flex children default to min-width: auto). */
.bc-nav-item > span:not(.bc-nav-icon) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-nav-icon {
    flex-shrink: 0;
    color: var(--bc-primary);
    opacity: 0.9;
}

.bc-nav-item--disabled .bc-nav-icon {
    color: var(--bc-outline);
    opacity: 0.85;
}

.bc-shell-main {
    flex: 1 1 auto;
    margin-left: 16rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(243, 244, 245, 0.5);
}

.bc-shell-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    color: #1e1b4b;
}

.bc-shell-topbar-left,
.bc-shell-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.bc-shell-brand {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #1e1b4b;
    white-space: nowrap;
}

.bc-shell-divider {
    width: 1px;
    height: 1rem;
    background: rgba(196, 198, 209, 0.45);
    flex-shrink: 0;
}

.bc-shell-divider--tall {
    height: 1.5rem;
}

.bc-shell-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: #f1f5f9;
    border: 1px solid rgba(196, 198, 209, 0.35);
    min-width: 0;
}

.bc-shell-search-icon {
    color: var(--bc-outline);
    flex-shrink: 0;
}

.bc-shell-search-input {
    border: none;
    background: transparent;
    font-size: 0.75rem;
    width: 12rem;
    min-width: 0;
    color: var(--bc-on-surface);
    font-family: inherit;
}

.bc-shell-search-input:focus {
    outline: none;
}

.bc-shell-search-input::placeholder {
    color: #94a3b8;
}

.bc-shell-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease;
}

.bc-shell-icon-btn:hover {
    background: #f1f5f9;
}

.bc-shell-notify-dot {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bc-error);
    border: 2px solid #fff;
}

.bc-shell-settings-btn {
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
}

.bc-shell-settings-btn:hover {
    color: var(--bc-primary);
}

.bc-shell-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bc-primary) 14%, var(--bc-surface-lowest));
    color: var(--bc-primary);
    border: 1px solid color-mix(in srgb, var(--bc-primary) 35%, var(--bc-surface-lowest));
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Recent page history (below top bar) */
.bc-nav-history {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.35rem 1.5rem;
    border-bottom: 1px solid rgba(196, 198, 209, 0.45);
    background: rgba(248, 250, 252, 0.65);
    min-height: 2.25rem;
}

html.bc-dark .bc-nav-history {
    border-bottom-color: rgba(42, 52, 68, 0.85);
    background: rgba(15, 20, 28, 0.55);
}

.bc-nav-history-label {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bc-on-surface-variant);
}

.bc-nav-history-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.bc-nav-history-chip {
    flex-shrink: 0;
    max-width: 11rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--bc-radius-sm);
    border: 1px solid rgba(116, 119, 129, 0.45);
    background: transparent;
    color: var(--bc-on-surface-variant);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

html.bc-dark .bc-nav-history-chip {
    border-color: rgba(157, 166, 184, 0.35);
    color: #c4c6d1;
}

.bc-nav-history-chip:hover {
    border-color: var(--bc-primary);
    color: var(--bc-primary);
    background: color-mix(in srgb, var(--bc-primary) 4%, transparent);
}

html.bc-dark .bc-nav-history-chip:hover {
    background: color-mix(in srgb, var(--bc-primary) 10%, transparent);
}

.bc-nav-history-chip-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.mud-rtl-provider[dir="rtl"] .bc-nav-history-chip-text {
    text-align: right;
}

.bc-shell-body {
    flex: 1 1 auto;
    padding: 2rem;
    min-height: 0;
    min-width: 0;
}

/* Content surface: white module floating on tonal base (DESIGN.md — No-Line) */
.bc-content-card {
    background: var(--bc-surface-lowest);
    border-radius: var(--bc-radius-xl);
    box-shadow: var(--bc-shadow-ambient);
}

/* --- Catalog / books overview (stitch/boeken_overzicht) --- */
.bc-catalog-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.bc-catalog-title {
    letter-spacing: -0.02em;
    color: var(--bc-primary) !important;
    font-weight: 800 !important;
}

.bc-catalog-intro {
    max-width: 36rem;
    color: var(--bc-on-surface-variant);
}

.bc-catalog-stat-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-container) 100%);
    color: var(--bc-on-primary);
    border-radius: var(--bc-radius-xl);
    box-shadow: var(--bc-shadow-ambient);
}

.bc-catalog-stat-label {
    opacity: 0.85;
    letter-spacing: 0.12em;
}

.bc-catalog-stat-value {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}

.bc-catalog-stat-delta {
    opacity: 0.9;
    color: var(--bc-on-primary-container) !important;
}

.bc-catalog-stat-watermark {
    position: absolute;
    right: -0.5rem;
    bottom: -0.5rem;
    font-size: 6rem !important;
    opacity: 0.12;
    pointer-events: none;
}

.bc-books-overview .bc-books-toolbar {
    border-radius: var(--bc-radius-xl);
    border: 1px solid rgba(196, 198, 209, 0.35);
}

.bc-books-overview-header {
    align-items: center;
}

.bc-books-overview-add-btn {
    flex-shrink: 0;
    align-self: center;
}

.bc-books-overview .bc-books-toolbar-grid {
    align-items: flex-end;
}

.bc-books-overview .bc-books-toolbar-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bc-books-overview .bc-books-toolbar-search .bc-books-toolbar-search-btn {
    height: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
}

.bc-books-overview .bc-books-toolbar-pager {
    align-items: flex-end;
    text-align: right;
}

.bc-books-overview .bc-books-toolbar-pager-nav {
    min-height: 2.5rem;
    align-items: center;
}

.bc-books-overview .bc-books-toolbar-hint {
    color: var(--bc-on-surface-variant);
    line-height: 1.35;
    padding-top: 0.125rem;
}

.bc-books-pager-inline {
    color: var(--bc-on-surface-variant);
    text-align: right;
    line-height: 1.3;
}

.bc-books-overview-cover {
    width: 3rem;
    height: 4.125rem;
    flex-shrink: 0;
}

.bc-books-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bc-on-surface-variant);
}

.bc-books-table-card {
    border-radius: var(--bc-radius-xl);
    overflow: hidden;
}

.bc-books-table .bc-books-meta-line {
    line-height: 1.35;
    color: var(--bc-on-surface);
}

.bc-books-th-cover {
    width: 3.75rem;
}

html.bc-dark .bc-books-overview .bc-books-toolbar {
    border-color: rgba(42, 52, 68, 0.65);
}

.bc-users .bc-users-progress {
    border-radius: 0;
}

.bc-users-table .mud-table-row {
    cursor: pointer;
}

.bc-user-detail-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

@media (min-width: 600px) {
    .bc-user-detail-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .bc-user-detail-header .bc-catalog-title {
        margin-top: 0.125rem;
    }
}

.bc-user-detail-section-label {
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--bc-on-surface-variant);
}

.bc-user-detail-field-label {
    display: block;
    opacity: 0.75;
    margin-bottom: 0.125rem;
}

.bc-user-detail-muted {
    color: var(--bc-on-surface-variant);
}

.bc-user-detail-hero {
    padding: 1.25rem 1.5rem;
    border-radius: var(--bc-radius-xl);
    background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-container) 100%);
    color: var(--bc-on-primary);
    box-shadow: var(--bc-shadow-card);
}

.bc-user-detail-hero-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.bc-user-detail-hero-info {
    flex: 1 1 auto;
    min-width: 0;
}

.bc-user-detail-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.bc-user-detail-hero-primary.mud-button-outlined {
    color: var(--bc-on-primary);
    border-color: rgba(255, 255, 255, 0.55);
}

.bc-user-detail-hero-primary.mud-button-outlined:hover {
    border-color: var(--bc-on-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

.bc-user-detail-hero-iconbtn .mud-icon-button,
.bc-user-detail-hero-iconbtn.mud-icon-button {
    color: var(--bc-on-primary);
}

.bc-user-detail-hero-iconbtn .mud-icon-button:hover,
.bc-user-detail-hero-iconbtn.mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.bc-user-detail-menu-danger.mud-list-item {
    color: var(--bc-error, #b3261e);
}

.bc-user-detail-hero-title {
    color: var(--bc-on-primary) !important;
    letter-spacing: -0.02em;
}

.bc-user-detail-hero-email {
    opacity: 0.95;
    color: var(--bc-on-primary) !important;
}

.bc-user-detail-hero-intro {
    opacity: 0.88 !important;
    color: var(--bc-on-primary) !important;
}

@media (max-width: 640px) {
    .bc-user-detail-hero-content {
        flex-direction: column;
        align-items: stretch;
    }

    .bc-user-detail-hero-actions {
        justify-content: flex-end;
    }
}

/* User edit page ---------------------------------------------------------- */

.bc-user-edit-hero-kicker {
    color: var(--bc-on-primary) !important;
    opacity: 0.75;
    letter-spacing: 0.08em;
}

.bc-user-edit-hero-save.mud-button-filled {
    background-color: var(--bc-on-primary);
    color: var(--bc-primary);
}

.bc-user-edit-hero-save.mud-button-filled:hover {
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--bc-primary);
}

.bc-user-edit-hero-save.mud-button-filled:disabled {
    background-color: rgba(255, 255, 255, 0.35);
    color: var(--bc-on-primary);
    opacity: 0.7;
}

.bc-user-edit-hint {
    color: var(--bc-on-surface-variant, #5f6368);
    opacity: 0.8;
    display: block;
    margin-top: 0.15rem;
}

.bc-user-edit-summary .bc-user-detail-field-label {
    display: block;
    margin-bottom: 0.15rem;
}

.bc-user-edit-form .mud-grid-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Add free subscription dialog -------------------------------------------- */

.bc-add-free-sub-dialog .mud-dialog-title {
    padding-bottom: 0.5rem;
}

.bc-add-free-sub-subtitle {
    color: var(--bc-on-surface-variant, #5f6368);
    opacity: 0.9;
}

.bc-add-free-sub-intro {
    color: var(--bc-on-surface-variant, #5f6368);
}

.bc-add-free-sub-mode {
    cursor: pointer;
    border-radius: var(--bc-radius-md, 8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    border-color: var(--bc-outline-variant, #c4c6d1) !important;
}

.bc-add-free-sub-mode:hover {
    border-color: var(--bc-outline, #747781) !important;
    background-color: var(--bc-surface-container-low, #f3f4f5);
}

.bc-add-free-sub-mode--on {
    border-color: var(--bc-primary, #001644) !important;
    border-width: 2px;
    background-color: rgba(0, 22, 68, 0.04);
    box-shadow: 0 0 0 1px rgba(0, 22, 68, 0.08);
}

.bc-add-free-sub-mode-title {
    font-weight: 600;
}

.bc-add-free-sub-table-wrap {
    border: 1px solid var(--bc-outline-variant, #c4c6d1);
    border-radius: var(--bc-radius-md, 8px);
    overflow: hidden;
}

.bc-add-free-sub-col-narrow {
    white-space: nowrap;
    width: 1%;
}

.bc-add-free-sub-preview {
    border-radius: var(--bc-radius-md, 8px);
    background-color: var(--bc-surface-container-low, #f3f4f5);
}

.bc-add-free-sub-prediction-table .bc-add-free-sub-pred-k {
    font-weight: 600;
    color: var(--bc-on-surface-variant, #5f6368);
    width: 42%;
    vertical-align: top;
}

html.bc-dark .bc-add-free-sub-mode--on {
    background-color: rgba(102, 145, 255, 0.08);
}

.bc-update-auto-renewal-dialog .mud-dialog-content {
    padding-top: 0.5rem;
}

.bc-update-auto-renewal-summary {
    border-radius: var(--bc-radius-md, 8px);
    background-color: var(--bc-surface-container-low, #f3f4f5);
}

.bc-user-detail-summary .bc-user-detail-status {
    margin-top: 0.25rem;
}

.bc-user-detail-cancel-alert {
    margin-top: 0.25rem;
}

.bc-change-offboarding-dialog .mud-dialog-content {
    padding-top: 0.5rem;
}

.bc-change-subscription-period-dialog .mud-dialog-content {
    padding-top: 0.5rem;
}

.bc-refund-details-dialog .mud-dialog-content {
    padding-top: 0.5rem;
}

.bc-refund-panel-limit-alert.mud-alert {
    border-radius: var(--bc-radius-md, 8px);
}

.bc-user-detail-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.875rem;
}

.bc-user-detail-k {
    opacity: 0.85;
    flex-shrink: 0;
}

.bc-user-detail-v {
    font-weight: 600;
    text-align: end;
}

/* --------------------------------------------------------------------
   User detail — tabs layout (replaces old rail/split).
   Goals:
     - Horizontal tabs pinned to the top of the card, sticky when scrolled.
     - Tables look compact with only essential columns; an expand caret
       per row reveals a two-column key/value grid for secondary fields.
     - On narrow viewports the table container scrolls horizontally so
       wide columns stay readable; below the table breakpoint rows stack.
     - All colours consume the theme tokens so they track the scheme.
   -------------------------------------------------------------------- */

.bc-user-detail-tabs-card {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.bc-user-detail-tabs-card .mud-tabs-toolbar {
    background: var(--bc-surface-container-low);
    border-bottom: 1px solid color-mix(in srgb, var(--bc-outline) 35%, transparent);
    position: sticky;
    top: 0;
    z-index: 3;
}

html.bc-dark .bc-user-detail-tabs-card .mud-tabs-toolbar {
    background: var(--bc-surface-container);
    border-bottom-color: color-mix(in srgb, var(--bc-outline) 55%, transparent);
}

.bc-user-detail-tab-header {
    padding: 0 0.5rem;
}

.bc-user-detail-tabs-card .mud-tab {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    min-height: 3.25rem;
    padding: 0 1rem !important;
}

.bc-user-detail-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bc-user-detail-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.3rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: color-mix(in srgb, var(--bc-primary) 14%, transparent);
    color: var(--bc-on-surface);
}

html.bc-dark .bc-user-detail-tab-badge {
    background: color-mix(in srgb, var(--bc-primary) 22%, transparent);
}

.bc-user-detail-tabs-card .mud-tab.mud-tab-active .bc-user-detail-tab-badge {
    background: var(--bc-primary);
    color: var(--bc-on-primary);
}

.bc-user-detail-tab-panel {
    padding: 0 !important;
    background: transparent;
    min-width: 0;
}

.bc-user-detail-panel {
    padding: 1.5rem 1.75rem;
    min-width: 0;
}

@media (max-width: 600px) {
    .bc-user-detail-panel {
        padding: 1rem;
    }
}

/* Section heading + search row */

.bc-user-detail-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.bc-user-detail-list-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.bc-user-detail-list-title .mud-typography {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--bc-on-surface);
}

.bc-user-detail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.3rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: color-mix(in srgb, var(--bc-on-surface-variant) 14%, transparent);
    color: var(--bc-on-surface-variant);
}

.bc-user-detail-search {
    width: min(100%, 18rem);
}

/* Tables */

.bc-user-detail-table {
    width: 100%;
    min-width: 0;
}

.bc-user-detail-table .mud-table-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bc-user-detail-table .mud-table-cell {
    border-bottom: 1px solid color-mix(in srgb, var(--bc-outline) 25%, transparent);
    vertical-align: middle;
}

html.bc-dark .bc-user-detail-table .mud-table-cell {
    border-bottom-color: color-mix(in srgb, var(--bc-outline) 45%, transparent);
}

.bc-user-detail-table .mud-table-head .mud-table-cell {
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bc-on-surface-variant);
    background: color-mix(in srgb, var(--bc-surface-container-low) 75%, transparent);
}

html.bc-dark .bc-user-detail-table .mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--bc-surface-container) 75%, transparent);
}

.bc-user-detail-table .mud-table-row:hover .mud-table-cell {
    background: color-mix(in srgb, var(--bc-primary) 4%, transparent);
}

html.bc-dark .bc-user-detail-table .mud-table-row:hover .mud-table-cell {
    background: color-mix(in srgb, var(--bc-primary) 8%, transparent);
}

/* Column helpers */

.bc-user-detail-expand-col {
    width: 2.25rem !important;
    padding-right: 0 !important;
}

.bc-user-detail-actions-col {
    width: 2.75rem !important;
    text-align: end;
}

.bc-user-detail-col-money {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Expand row */

.bc-user-detail-expand-row {
    background: color-mix(in srgb, var(--bc-primary) 3%, transparent);
}

html.bc-dark .bc-user-detail-expand-row {
    background: color-mix(in srgb, var(--bc-primary) 9%, transparent);
}

.bc-user-detail-expand-row:hover .mud-table-cell {
    background: transparent !important;
}

.bc-user-detail-expand-cell {
    padding: 1rem 1.25rem !important;
    border-bottom: 2px solid color-mix(in srgb, var(--bc-outline) 30%, transparent) !important;
}

html.bc-dark .bc-user-detail-expand-cell {
    border-bottom-color: color-mix(in srgb, var(--bc-outline) 55%, transparent) !important;
}

/* Key/value grid used inside expand row and elsewhere */

.bc-user-detail-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.5rem 1.5rem;
}

.bc-kv {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.5rem;
    align-items: start;
    font-size: 0.85rem;
    line-height: 1.4;
}

.bc-kv--full {
    grid-column: 1 / -1;
    grid-template-columns: 10rem 1fr;
}

.bc-kv-k {
    color: var(--bc-on-surface-variant);
    font-weight: 500;
}

.bc-kv-v {
    color: var(--bc-on-surface);
    word-break: break-word;
}

/* Text treatments */

.bc-user-detail-uid {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
    color: var(--bc-on-surface-variant);
    word-break: break-all;
}

.bc-user-detail-muted-inline {
    color: var(--bc-on-surface-variant);
    font-size: 0.82rem;
}

.bc-user-detail-plan {
    font-weight: 600;
}

.bc-user-detail-daterange {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.bc-user-detail-daterange > span:first-child,
.bc-user-detail-daterange > span:last-child {
    white-space: nowrap;
}

.bc-user-detail-daterange-sep {
    color: var(--bc-on-surface-variant);
    font-size: 0.85em;
}

.bc-user-detail-daterange-end-early {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    white-space: nowrap;
}

.bc-user-detail-daterange-end-original {
    color: var(--bc-on-surface-variant);
    font-size: 0.8em;
    text-decoration: line-through;
}

.bc-user-detail-ordernumber {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

.bc-user-detail-order-product {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.35;
    max-width: 22rem;
}

/* Sales sub-navigation (Dashboard / Subscriptions / Webshop tabs) */

.bc-sales-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.375rem;
    border-radius: var(--bc-radius-lg, 0.75rem);
    background: color-mix(in srgb, var(--bc-surface-variant) 60%, transparent);
    border: 1px solid var(--bc-outline-variant, rgba(148, 163, 184, 0.25));
    width: fit-content;
}

.bc-sales-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--bc-radius-md, 0.5rem);
    font-weight: 600;
    color: var(--bc-on-surface-variant);
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.bc-sales-subnav-link:hover {
    color: var(--bc-primary);
    background: color-mix(in srgb, var(--bc-primary) 10%, transparent);
}

.bc-sales-subnav-link--active {
    color: var(--bc-on-primary) !important;
    background: var(--bc-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.bc-sales-subnav-link--active:hover {
    background: var(--bc-primary);
    color: var(--bc-on-primary) !important;
}

.bc-sales-subnav-icon {
    flex: 0 0 auto;
}

/* Transaction logs overview · highlight API/error rows */
.bc-sales-transaction-row--error .mud-table-cell,
.bc-sales-transaction-row--error td {
    color: var(--mud-palette-error) !important;
}

.bc-promotions-hub-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.bc-promotions-hub-card:hover {
    box-shadow: var(--bc-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.bc-promotions-detail-thumb {
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

.bc-promotions-model-diagram {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    margin: 0;
    color: var(--bc-text-muted, #64748b);
    line-height: 1.5;
}

/* Sales KPI cards (dashboard + overview stat cards) */

.bc-sales-kpi-card {
    min-height: 7rem;
}

.bc-sales-section-title {
    letter-spacing: -0.01em;
    color: var(--bc-primary) !important;
    font-weight: 700;
}

.bc-sales-recent-big-header {
    border-bottom: 1px solid var(--bc-outline-variant, rgba(148, 163, 184, 0.2));
}

/* Empty state */

.bc-user-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.bc-user-detail-empty-icon {
    color: color-mix(in srgb, var(--bc-on-surface-variant) 65%, transparent) !important;
    margin-bottom: 0.25rem;
}

/* Pause row tint */

.bc-user-detail-row-pause .mud-table-cell {
    background: color-mix(in srgb, #f7b84b 18%, transparent) !important;
}

html.bc-dark .bc-user-detail-row-pause .mud-table-cell {
    background: color-mix(in srgb, #f7b84b 14%, transparent) !important;
}

.bc-catalog-table-wrap {
    overflow: hidden;
}

.bc-catalog-table-wrap .mud-table-container {
    overflow-x: auto;
}

.bc-catalog-cover {
    width: 2.5rem;
    height: 3.5rem;
    border-radius: var(--bc-radius-sm);
    overflow: hidden;
    background: var(--bc-surface-container-high);
    border: 1px solid rgba(196, 198, 209, 0.35);
}

.bc-catalog-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bc-catalog-isbn {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--bc-on-surface-variant);
    letter-spacing: -0.02em;
}

.bc-catalog-pager-bar {
    border-top: 1px solid rgba(196, 198, 209, 0.25);
    background: rgba(243, 244, 245, 0.35);
}

.bc-catalog-pager-text {
    color: var(--bc-on-surface-variant);
}

html.bc-dark .bc-catalog-pager-bar {
    border-top-color: rgba(42, 52, 68, 0.6);
    background: rgba(18, 24, 33, 0.45);
}

html.bc-dark .bc-catalog-stat-card {
    background: linear-gradient(135deg, var(--bc-primary-container) 0%, color-mix(in srgb, var(--bc-primary-container) 60%, black) 100%);
}

.bc-catalog-row-sub {
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--bc-on-surface-variant);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.bc-catalog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.25rem;
    color: var(--bc-on-surface-variant);
}

.bc-catalog-empty-icon {
    color: color-mix(in srgb, var(--bc-primary) 70%, transparent);
    margin-bottom: 0.5rem;
}

.bc-catalog-empty-title {
    color: var(--bc-on-surface);
    font-weight: 600;
}

.bc-catalog-empty-body {
    max-width: 36rem;
    color: var(--bc-on-surface-variant);
}

.bc-create-canonical-book-dialog .bc-create-canonical-book-subtitle {
    color: var(--bc-on-surface-variant);
    display: block;
    line-height: 1.2;
}

.bc-create-canonical-book-intro {
    color: var(--bc-on-surface-variant);
}

.bc-create-canonical-book-advanced .mud-expand-panel {
    border: 1px solid var(--bc-outline-variant);
    border-radius: var(--bc-radius-md, 8px);
    background: transparent;
}

.bc-create-canonical-book-advanced .mud-expand-panel-header {
    padding-inline: 1rem;
}

.bc-create-canonical-book-error {
    margin-top: 0.25rem;
}

/* --- Form controls (shared: login, future forms) --- */
.bc-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bc-outline);
}

.bc-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-surface-container-high);
    color: var(--bc-on-surface);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.bc-input::placeholder {
    color: rgba(116, 119, 129, 0.5);
}

.bc-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--bc-focus-ring);
}

.bc-password-row {
    display: flex;
    align-items: stretch;
}

.bc-password-row .bc-input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bc-password-toggle {
    flex: 0 0 auto;
    min-width: 2.75rem;
    border: none;
    border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0;
    background: var(--bc-surface-container-high);
    color: var(--bc-outline);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bc-password-toggle:hover {
    color: var(--bc-on-surface);
    background: #dde0e3;
}

/* Primary CTA: gradient (DESIGN.md — weighted permanence). Shadow tint follows the scheme's primary. */
.bc-btn-primary.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-container) 100%) !important;
    color: var(--bc-on-primary) !important;
    font-weight: 700 !important;
    border-radius: var(--bc-radius-sm) !important;
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--bc-primary) 22%, transparent) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.bc-btn-primary.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 6px 16px -2px color-mix(in srgb, var(--bc-primary) 28%, transparent) !important;
    filter: brightness(1.03);
}

/* --- Login page --- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.login-brand-title {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--bc-primary);
    line-height: 1.1;
}

.login-brand-tagline {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bc-on-surface-variant);
    margin-top: 0.5rem;
}

.bc-login-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 28rem;
    padding: 2rem 2rem 2.25rem;
    border-radius: var(--bc-radius-xl);
    background: var(--bc-surface-lowest);
    box-shadow: var(--bc-shadow-card);
}

@media (min-width: 1024px) {
    .bc-login-card {
        padding: 2.5rem 2.5rem 2.75rem;
    }
}

.bc-login-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bc-primary), var(--bc-primary-container));
}

.login-welcome-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bc-on-surface);
}

.login-welcome-text {
    font-size: 0.875rem;
    color: var(--bc-on-surface-variant);
    margin-top: 0.25rem;
    line-height: 1.5;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.login-post-form {
    width: 100%;
}

.login-footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(196, 198, 209, 0.35);
}

.login-footer-note {
    font-size: 0.75rem;
    text-align: center;
    color: var(--bc-on-surface-variant);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--bc-error);
}

.validation-message {
    color: var(--bc-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #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;
}

/*
 * RTL (Arabic, etc.) — MudRTLProvider sets dir="rtl" on .mud-rtl-provider
 * (see https://mudblazor.com/features/rtl-languages )
 */
.mud-rtl-provider[dir="rtl"] {
    font-family: "Noto Sans Arabic", "Segoe UI", sans-serif;
}

.mud-rtl-provider[dir="rtl"] .bc-shell-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid rgba(226, 232, 240, 0.85);
}

html.bc-dark .mud-rtl-provider[dir="rtl"] .bc-shell-sidebar {
    border-left-color: rgba(42, 52, 68, 0.95);
}

.mud-rtl-provider[dir="rtl"] .bc-shell-main {
    margin-left: 0;
    margin-right: 16rem;
}

/* --- Color scheme picker (AdminTopBar settings menu) --- */
.bc-scheme-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 9rem;
}

.bc-scheme-swatch {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    border: 1px solid var(--bc-outline-variant);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
}

.bc-scheme-label {
    flex: 1 1 auto;
}

.bc-scheme-check {
    color: var(--bc-primary);
    margin-left: 0.5rem;
}

.mud-rtl-provider[dir="rtl"] .bc-scheme-check {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* --- Canonical book detail --- */
.bc-canonical-detail .bc-canonical-detail-topbar {
    margin-bottom: -0.75rem;
}

.bc-canonical-header {
    border: 1px solid var(--bc-outline-variant);
}

.bc-canonical-header-row {
    flex-wrap: wrap;
}

.bc-canonical-header-avatar {
    flex: 0 0 auto;
}

.bc-canonical-header-cover {
    flex: 0 0 auto;
    width: 7.75rem;
}

.bc-canonical-header-cover-img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0.4rem;
    box-shadow: 0 4px 18px rgba(0, 22, 68, 0.14);
    background: color-mix(in srgb, var(--bc-surface-container-low, #f3f4f6) 100%, transparent);
}

.bc-canonical-header-cover-meta {
    margin-top: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.bc-canonical-header-cover-caption {
    color: var(--bc-on-surface-variant);
}

.bc-media-monospace {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    word-break: break-all;
}

.bc-epub-dropzone {
    border-style: dashed;
    border-width: 2px;
    border-color: var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-grey);
    transition: opacity 0.2s ease;
}

.bc-epub-dropzone--busy {
    opacity: 0.65;
    pointer-events: none;
}

.bc-canonical-header-title {
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.bc-canonical-header-meta {
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.bc-canonical-header-code .mud-chip-content,
.bc-canonical-header-uid .mud-chip-content {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.bc-canonical-header-uid {
    cursor: pointer;
    color: var(--bc-on-surface-variant);
}

.bc-canonical-header-uid:hover {
    color: var(--bc-primary);
}

.bc-canonical-header-hint {
    color: var(--bc-on-surface-variant);
    margin-top: 0.15rem;
}

.bc-canonical-header-menu-danger {
    color: var(--bc-error);
}

.bc-canonical-tabs {
    border: none;
}

/* --- Book detail: primary (4) + nested (2–3) tabs, calmer hierarchy --- */
.bc-content-card.bc-canonical-tabs.bc-canonical-tabs--primary {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--bc-outline-variant) 65%, transparent);
}

.bc-canonical-primary-tab-header.mud-tabs-toolbar,
.bc-canonical-tabs--primary > .mud-tabs-toolbar {
    padding: 0.45rem 0.75rem 0;
    gap: 0.25rem;
    flex-wrap: wrap;
    row-gap: 0.2rem;
    background: color-mix(in srgb, var(--bc-surface-container-low, #eef0f4) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bc-outline-variant) 70%, transparent);
}

.bc-canonical-tabs--primary .mud-tab {
    min-height: 2.75rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--bc-on-surface-variant);
}

.bc-canonical-tabs--primary .mud-tab.mud-tab-active {
    color: var(--bc-primary);
    background: var(--bc-surface-lowest);
}

.bc-canonical-tabs--primary .mud-tab .mud-icon-root {
    font-size: 1.15rem;
    opacity: 0.88;
}

.bc-canonical-tabs--primary .mud-tab-slider {
    height: 2px;
    border-radius: 2px 2px 0 0;
}

/* Sub-navigation: pill strip, no second heavy bar */
.bc-canonical-subtabs-shell {
    padding: 0.65rem 1rem 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bc-surface-container-low) 28%, transparent) 0%,
        transparent 72%
    );
}

.bc-canonical-tabs--nested {
    width: 100%;
    background: transparent !important;
}

.bc-canonical-subtab-toolbar.mud-tabs-toolbar,
.bc-canonical-tabs--nested .mud-tabs-toolbar {
    min-height: 0;
    padding: 0.28rem 0.35rem;
    margin: 0 0 0.35rem;
    gap: 0.3rem;
    flex-wrap: wrap;
    row-gap: 0.3rem;
    background: color-mix(in srgb, var(--bc-surface-container-high, #e4e7ee) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--bc-outline-variant) 48%, transparent);
    border-radius: 9999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.bc-canonical-tabs--nested .mud-tab {
    min-height: 2rem !important;
    padding: 0.28rem 0.72rem !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--bc-on-surface-variant);
}

.bc-canonical-tabs--nested .mud-tab .mud-icon-root {
    font-size: 1rem;
    opacity: 0.82;
}

.bc-canonical-tabs--nested .mud-tab.mud-tab-active {
    background: var(--bc-surface-lowest) !important;
    color: var(--bc-primary) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.bc-canonical-tabs--nested .mud-tab-slider {
    visibility: hidden;
}

.bc-canonical-nested-tab-panel {
    padding-top: 0.15rem;
}

html.bc-dark .bc-canonical-subtab-toolbar.mud-tabs-toolbar,
html.bc-dark .bc-canonical-tabs--nested .mud-tabs-toolbar {
    background: color-mix(in srgb, var(--bc-surface-container-high, #2d3340) 55%, transparent);
    border-color: color-mix(in srgb, var(--bc-outline-variant) 55%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.bc-dark .bc-canonical-tabs--primary > .mud-tabs-toolbar,
html.bc-dark .bc-canonical-primary-tab-header.mud-tabs-toolbar {
    background: color-mix(in srgb, var(--bc-surface-container-low) 55%, transparent);
}

html.bc-dark .bc-canonical-tabs--nested .mud-tab.mud-tab-active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.bc-canonical-tab-subtitle {
    color: var(--bc-on-surface-variant);
}

.bc-canonical-author-row {
    border-color: var(--bc-outline-variant);
}

.bc-canonical-just-created {
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: color-mix(in srgb, var(--bc-success, #10b981) 8%, transparent);
}

.bc-canonical-just-created-title {
    font-weight: 600;
    margin-bottom: 0.15rem;
}

/* --- Locale dialog --- */
.bc-canonical-locale-subtitle,
.bc-canonical-locale-intro,
.bc-canonical-legacy-subtitle,
.bc-canonical-legacy-intro,
.bc-canonical-legacy-hint {
    color: var(--bc-on-surface-variant);
}

.bc-canonical-locale-code .mud-chip-content {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.bc-canonical-locale-edit-scroll {
    max-height: min(72vh, 52rem);
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-right: -0.15rem;
}

/* Avoid nested scrollbars: metadata tab already scrolls with the page / tab panel. */
.bc-canonical-metadata-tab .bc-canonical-locale-edit-scroll {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    margin-right: 0;
}

.bc-canonical-locale-edit-section {
    background: color-mix(in srgb, var(--bc-surface-container-low, #f3f4f6) 88%, transparent);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
}

.bc-canonical-audiobook-dialog-scroll {
    max-height: min(68vh, 44rem);
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-right: -0.15rem;
}

/* --- Legacy link dialog --- */
.bc-canonical-legacy-table-wrap {
    border: 1px solid var(--bc-outline-variant);
    border-radius: 0.5rem;
    overflow: hidden;
}

.bc-canonical-legacy-row {
    cursor: pointer;
}

.bc-canonical-legacy-row--selected {
    background: color-mix(in srgb, var(--bc-primary) 10%, transparent) !important;
}

.bc-canonical-legacy-row-sub {
    color: var(--bc-on-surface-variant);
    display: block;
    margin-top: 0.1rem;
}

.bc-canonical-legacy-selected {
    border-color: color-mix(in srgb, var(--bc-primary) 45%, var(--bc-outline-variant));
    background: color-mix(in srgb, var(--bc-primary) 4%, transparent);
}

/* Catalog packages — theme colour previews (soft edge via tonal layering; see UX_UI_STANDARDS) */

.bc-catalog-theme-swatch {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 22, 68, 0.07);
}

.bc-catalog-theme-swatch--lg {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
}

/* Catalog package detail — package sheet + period nav */

.bc-catalog-package-sheet {
    padding: 1.5rem 1.75rem 1.75rem;
}

.bc-catalog-package-sheet--collapsed {
    padding-bottom: 1.15rem;
}

.bc-catalog-package-sheet-toggle {
    margin-top: 0.35rem;
    margin-inline: -0.35rem;
}

.bc-catalog-package-sheet-toggle-btn.mud-button-text {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    color: var(--bc-on-surface-variant);
    padding: 0.35rem 0.75rem;
    border-radius: var(--bc-radius-md);
}

.bc-catalog-package-sheet-toggle-btn.mud-button-text:hover {
    background: color-mix(in srgb, var(--bc-on-surface) 5%, transparent);
}

.bc-catalog-package-sheet-details {
    padding-bottom: 0.05rem;
}

.bc-catalog-package-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.bc-catalog-package-hero-main {
    flex: 1 1 12rem;
    min-width: 0;
}

.bc-catalog-package-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.bc-catalog-package-badges {
    margin-top: 0.15rem;
}

.bc-catalog-package-badge.mud-chip {
    font-weight: 500;
}

.bc-catalog-package-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.bc-catalog-package-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem 1.25rem;
    margin-top: 1.35rem;
    padding: 0.85rem 1rem;
    border-radius: var(--bc-radius-md);
    background: color-mix(in srgb, var(--bc-on-surface) 3.5%, transparent);
    border: 1px solid var(--bc-outline-variant);
}

.bc-catalog-package-stat-label {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    margin-bottom: 0.15rem;
}

.bc-catalog-package-stat-value {
    font-weight: 600;
    color: var(--bc-on-surface);
}

.bc-catalog-package-divider {
    margin: 1.35rem 0 1.1rem;
}

.bc-catalog-package-section-title {
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.75;
    margin-bottom: 0.85rem;
}

.bc-catalog-package-meta-grid {
    align-items: stretch;
}

.bc-catalog-package-k {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bc-on-surface-variant);
    margin-bottom: 0.25rem;
}

.bc-catalog-package-v {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--bc-on-surface);
    line-height: 1.45;
}

.bc-catalog-package-kv {
    margin-bottom: 1rem;
}

.bc-catalog-package-explanation {
    padding: 0.85rem 1rem;
    border-radius: var(--bc-radius-md);
    background: var(--bc-surface-container-low);
}

.bc-catalog-package-explanation-label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
    opacity: 0.85;
}

.bc-catalog-package-explanation-body {
    white-space: pre-wrap;
    line-height: 1.55;
}

.bc-catalog-package-explanation-empty {
    color: var(--bc-on-surface-variant);
    opacity: 0.8;
}

.bc-catalog-package-theme-panel {
    height: 100%;
    padding: 1rem 1.1rem;
    border-radius: var(--bc-radius-md);
    background: var(--bc-surface-container-low);
    border: 1px solid var(--bc-outline-variant);
}

.bc-catalog-package-theme-heading {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.bc-catalog-package-color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bc-catalog-package-color-meta {
    min-width: 0;
}

.bc-catalog-package-color-name {
    font-weight: 600;
}

.bc-catalog-package-color-code {
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: var(--bc-on-surface-variant);
    word-break: break-all;
}

.bc-catalog-package-period-card {
    padding: 1.1rem 1rem;
    border: 1px solid var(--bc-outline-variant);
    position: sticky;
    top: 0.75rem;
}

.bc-catalog-package-period-header {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.bc-catalog-package-period-icon {
    margin-top: 0.15rem;
    color: var(--bc-primary);
    opacity: 0.9;
}

.bc-catalog-package-period-title {
    font-weight: 700;
}

.bc-catalog-package-year-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0;
}

.bc-catalog-package-year {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bc-catalog-package-year-with-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.bc-catalog-package-year-count-spinner {
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.bc-catalog-package-period-list {
    border-radius: var(--bc-radius-md);
    overflow: hidden;
    border: 1px solid var(--bc-outline-variant);
    background: var(--bc-surface-container-low);
}

.bc-catalog-package-period-item {
    justify-content: flex-start !important;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 0 !important;
    min-height: 2.5rem;
    padding-inline: 0.85rem;
}

.bc-catalog-package-period-item--active {
    font-weight: 600;
}

.bc-catalog-package-period-item-inner {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}

.bc-catalog-package-period-item-label {
    min-width: 0;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-catalog-package-period-count {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.88em;
    opacity: 0.82;
}

.bc-catalog-package-period-item--active .bc-catalog-package-period-count {
    opacity: 0.95;
}

.bc-catalog-package-listings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bc-outline-variant);
}

.bc-catalog-package-listings-head-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.bc-catalog-package-listings-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bc-catalog-package-listings-intro {
    margin-top: 0.35rem;
    max-width: 44rem;
}

.bc-catalog-package-listings-add {
    flex-shrink: 0;
}

.bc-catalog-package-period-chip {
    font-weight: 600;
}

html.bc-dark .bc-catalog-package-period-card,
html.bc-dark .bc-catalog-package-period-list {
    background: var(--bc-surface-container-low);
}

html.bc-dark .bc-catalog-package-stats {
    background: color-mix(in srgb, var(--bc-on-surface) 6%, transparent);
}

@media (max-width: 959.98px) {
    .bc-catalog-package-period-card {
        position: static;
    }
}

.bc-listing-dialog .mud-dialog-title {
    padding-bottom: 0.5rem;
}

.bc-listing-dialog-subtitle {
    color: var(--bc-on-surface-variant);
    line-height: 1.2;
}

.bc-listing-stepper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0 1rem;
    border-bottom: 1px solid var(--bc-outline-variant);
    margin-bottom: 1rem;
}

.bc-listing-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bc-on-surface-variant);
    font-size: 0.85rem;
    font-weight: 500;
}

.bc-listing-step-active {
    color: var(--bc-primary);
}

.bc-listing-step-done .bc-listing-step-index,
.bc-listing-step-active .bc-listing-step-index {
    background: color-mix(in srgb, var(--bc-primary) 12%, transparent);
    color: var(--bc-primary);
    border-color: color-mix(in srgb, var(--bc-primary) 35%, var(--bc-outline-variant));
}

.bc-listing-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--bc-outline-variant);
    background: var(--bc-surface-container);
    font-weight: 700;
    font-size: 0.75rem;
}

.bc-listing-step-divider {
    flex: 1 0 auto;
    height: 1px;
    background: var(--bc-outline-variant);
}

/* Search step ------------------------------------------------------------- */

.bc-listing-search-pane {
    min-height: 22rem;
}

.bc-listing-search-filters {
    background: var(--bc-surface-container-low);
    border: 1px solid var(--bc-outline-variant);
    border-radius: var(--bc-radius-md);
}

.bc-listing-search-hint {
    color: var(--bc-on-surface-variant);
}

.bc-listing-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.75rem;
}

.bc-listing-book-card {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem;
    background: var(--bc-surface-lowest);
    border: 1px solid var(--bc-outline-variant);
    border-radius: var(--bc-radius-md);
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    color: inherit;
    font: inherit;
}

.bc-listing-book-card:hover {
    border-color: color-mix(in srgb, var(--bc-primary) 50%, var(--bc-outline-variant));
    box-shadow: var(--bc-shadow-ambient);
}

.bc-listing-book-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bc-focus-ring);
}

.bc-listing-book-cover {
    width: 3.5rem;
    height: 5rem;
    border-radius: var(--bc-radius-sm);
    overflow: hidden;
    background: var(--bc-surface-container-high);
    border: 1px solid rgba(196, 198, 209, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bc-listing-book-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bc-listing-book-cover-placeholder {
    color: var(--bc-on-surface-variant);
}

.bc-listing-book-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bc-listing-book-title {
    font-weight: 600;
    color: var(--bc-on-surface);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bc-listing-book-authors {
    color: var(--bc-on-surface-variant);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-listing-book-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.bc-listing-book-code {
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--bc-on-surface-variant);
    background: var(--bc-surface-container);
    border-radius: 0.375rem;
    padding: 0.05rem 0.4rem;
}

.bc-listing-book-pill {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bc-on-primary-container);
    background: color-mix(in srgb, var(--bc-primary) 10%, transparent);
    border-radius: 0.375rem;
    padding: 0.05rem 0.4rem;
    letter-spacing: 0.04em;
}

.bc-listing-book-action {
    color: var(--bc-on-surface-variant);
}

.bc-listing-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    gap: 0.4rem;
    color: var(--bc-on-surface-variant);
}

.bc-listing-empty-icon {
    color: color-mix(in srgb, var(--bc-primary) 70%, transparent);
    margin-bottom: 0.25rem;
}

.bc-listing-empty-title {
    color: var(--bc-on-surface);
    font-weight: 600;
}

.bc-listing-empty-body {
    max-width: 30rem;
}

/* Configure step ---------------------------------------------------------- */

.bc-listing-configure-pane {
    min-height: 22rem;
}

.bc-listing-selected-card {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    gap: 0.9rem;
    align-items: center;
    background: var(--bc-surface-container-low);
    border: 1px solid var(--bc-outline-variant);
    border-radius: var(--bc-radius-md);
}

.bc-listing-selected-cover {
    width: 4rem;
    height: 5.6rem;
}

.bc-listing-selected-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bc-listing-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bc-listing-section-title {
    color: var(--bc-on-surface);
    font-weight: 600;
}

.bc-listing-section-hint {
    color: var(--bc-on-surface-variant);
}

.bc-listing-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem;
}

.bc-listing-tile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    align-items: center;
    border: 1px solid var(--bc-outline-variant);
    background: var(--bc-surface-lowest);
    border-radius: var(--bc-radius-md);
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    font: inherit;
}

.bc-listing-tile:hover {
    border-color: color-mix(in srgb, var(--bc-primary) 35%, var(--bc-outline-variant));
}

.bc-listing-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bc-focus-ring);
}

.bc-listing-tile-selected {
    border-color: var(--bc-primary);
    background: color-mix(in srgb, var(--bc-primary) 6%, transparent);
}

.bc-listing-tile-leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bc-on-surface-variant);
    width: 2rem;
}

.bc-listing-tile-pill {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bc-on-primary-container);
    background: color-mix(in srgb, var(--bc-primary) 14%, transparent);
    border-radius: 0.375rem;
    letter-spacing: 0.04em;
}

.bc-listing-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bc-listing-tile-title {
    font-weight: 600;
    color: var(--bc-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-listing-tile-sub {
    font-size: 0.75rem;
    color: var(--bc-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-listing-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.bc-listing-tile-mono {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--bc-on-surface-variant);
}

.bc-listing-tile-status {
    font-size: 0.7rem;
    color: var(--bc-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bc-listing-tile-check {
    color: var(--bc-primary);
}

.bc-listing-extra {
    background: var(--bc-surface-container-low);
    border: 1px solid var(--bc-outline-variant);
    border-radius: var(--bc-radius-md);
}

html.bc-dark .bc-listing-search-filters,
html.bc-dark .bc-listing-extra,
html.bc-dark .bc-listing-selected-card {
    background: var(--bc-surface-container);
}

html.bc-dark .bc-listing-book-card,
html.bc-dark .bc-listing-tile {
    background: var(--bc-surface-container-low);
}

html.bc-dark .bc-listing-tile-selected {
    background: color-mix(in srgb, var(--bc-primary) 18%, transparent);
}

/* Catalog package listing overview (drag-and-drop cards) ------------------- */

.bc-catalog-listings-drop .bc-catalog-listings-dropzone {
    min-height: 2rem;
}

.bc-catalog-listing-overview-card {
    display: block;
    background: var(--bc-surface-container-low);
    border: 1px solid var(--bc-outline-variant);
    border-radius: var(--bc-radius-md);
    cursor: grab;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}

.bc-catalog-listing-overview-card:active {
    cursor: grabbing;
}

.bc-catalog-listing-overview-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
    padding: 1rem 1.25rem;
}

.bc-catalog-listing-reorder-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    padding: 0.35rem 0.3rem;
    border-radius: var(--bc-radius-md);
    background: color-mix(in srgb, var(--bc-on-surface) 4%, transparent);
    border: 1px solid var(--bc-outline-variant);
}

.bc-catalog-listing-reorder-bar .mud-icon-button {
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.bc-catalog-listing-overview-cover-wrap {
    flex-shrink: 0;
}

.bc-catalog-listing-drag-hint {
    opacity: 0.5;
    flex-shrink: 0;
}

.bc-catalog-listing-overview-cover {
    flex-shrink: 0;
}

.bc-catalog-listing-main {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bc-catalog-listing-title-row.mud-stack {
    row-gap: 0.35rem;
}

.bc-catalog-listing-authors {
    display: block;
    margin-top: -0.1rem;
    color: var(--bc-on-surface-variant);
}

.bc-catalog-listing-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    margin-top: 0.15rem;
}

.bc-catalog-listing-meta-chip {
    max-width: 100%;
}

.bc-catalog-listing-meta-chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-catalog-listing-price-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bc-catalog-listing-price-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    row-gap: 0.15rem;
}

.bc-catalog-listing-price-primary .bc-catalog-listing-overview-label {
    flex: 0 0 auto;
    margin-right: 0;
}

.bc-catalog-listing-price-value {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.015em;
    color: var(--bc-on-surface, inherit);
}

.bc-catalog-listing-price-currency {
    font-weight: 500;
    font-size: 0.875rem;
}

.bc-catalog-listing-price-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    align-items: center;
}

.bc-catalog-listing-price-chip .mud-chip-content {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.3;
}

.bc-catalog-listing-sale-window-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
}

.bc-catalog-listing-price-chip-sale {
    flex: 1 1 auto;
    min-width: min(14rem, 100%);
}

.bc-catalog-listing-price-chip-48h {
    flex: 0 0 auto;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bc-catalog-listing-actions {
    flex: 0 0 10.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-left: auto;
    align-self: stretch;
}

.bc-catalog-listing-action-btn {
    justify-content: flex-start;
    text-transform: none;
    letter-spacing: normal;
}

@media (max-width: 959.98px) {
    .bc-catalog-listing-actions {
        flex: 1 1 100%;
        margin-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bc-catalog-listing-action-btn {
        flex: 1 1 auto;
        min-width: 7.5rem;
    }
}

.bc-catalog-listing-overview-lines .mud-typography-caption {
    line-height: 1.35;
}

.bc-catalog-listing-overview-label {
    font-weight: 600;
    color: var(--bc-on-surface-variant);
    margin-right: 0.35rem;
}

.bc-catalog-listing-overview-value {
    color: var(--bc-on-surface);
}

html.bc-dark .bc-catalog-listing-overview-card {
    background: var(--bc-surface-container);
}

.bc-media-preview-dialog .mud-dialog-content {
    padding-top: 0.5rem;
}

.bc-epub-preview-toolbar {
    flex-wrap: wrap;
}

.bc-epub-js-viewer {
    width: 100%;
    /* Must be a real height: epub.js + % heights collapse inside MudDialog */
    height: 62vh;
    min-height: 420px;
    max-height: 85vh;
    border-radius: 4px;
    background: var(--bc-surface-container-low, #f5f5f5);
    overflow: hidden;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.bc-epub-js-viewer--loading {
    opacity: 0.85;
}

/* epub.js injects iframe(s) for chapters */
.bc-epub-js-viewer iframe {
    border: 0 !important;
    background: var(--bc-surface, #fff);
}

html.bc-dark .bc-epub-js-viewer iframe {
    background: var(--bc-surface);
}

.bc-audiobook-preview-audio {
    width: 100%;
}

.bc-migration-books-table tr.bc-migration-row--busy > td {
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

html.bc-dark .bc-migration-books-table tr.bc-migration-row--busy > td {
    background-color: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.06));
}