/*
 * Bhakti Marga backoffice theme.
 *
 * Everything is scoped under .bm-theme so a page opts in by wearing the class and loading this
 * file; pages that do not keep the stock Radzen look. Colours, radii and type follow the
 * My Bhakti Marga portal (hydrogen-my-bhaktimarga/app/styles/tailwind.css), tightened for a
 * dense editor: navy carries actions, gold marks the series and the selected tab, teal is focus
 * and the live feed, and the devotional accents are used sparingly for state.
 *
 * Radzen resolves derived variables where they are declared (:root), so overriding a base
 * variable here does not move the ones built from it. That is why the leaf variables
 * (button radius, input focus, tabs colours, ...) are set one by one below.
 *
 * Dialogs, side panels, dropdown panels, date pickers, grid filter popups, tooltips and "…" menus render at
 * body level, outside the wrapper. While a themed page is on screen they join the theme through
 * the "body:has(.rz-layout.bm-theme)" selectors below, so the shared alerts, confirms and pickers
 * need no class of their own.
 *
 * Notification toasts are an exception to the opt-in: they render in MainLayout for every
 * page, so they wear the theme on old pages too and read as one product (section "Notifications").
 * The user menu (UserMenu) is the other: the old header shows it too, so it carries the tokens itself.
 */

@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree/figtree-variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree/figtree-italic-variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

.bm-theme,
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side, .rz-popup, .rz-tooltip, .rz-context-menu),
.rz-notification,
.bm-user-menu {
    /* ---- Tokens ---- */
    --bm-navy: #16254c;
    --bm-navy-deep: #041236;
    --bm-navy-hover: #22356a;
    --bm-slate: #5a6b85;
    --bm-muted: #737c94;
    --bm-canvas: #f1f4ff;
    --bm-canvas-muted: #e8ecf9;
    --bm-surface: #ffffff;
    --bm-surface-subtle: #f8f9fd;
    --bm-border: #d7def0;
    --bm-border-strong: #9da3b4;
    --bm-gold: #b5924b;
    --bm-gold-light: #d6bf90;
    --bm-gold-soft: #f7f0e1;
    --bm-teal: #007f8c;
    --bm-teal-soft: #e2f5f7;
    --bm-success: #276749;
    --bm-success-soft: #e7f5ed;
    --bm-warning: #7a5200;
    --bm-warning-soft: #fff4d6;
    --bm-danger: #9a1e36;
    --bm-danger-soft: #f9e8ed;
    --bm-live: #d9304f;
    --bm-live-soft: #fde8ec;
    --bm-purple: #55329a;
    --bm-purple-soft: #efe9fa;
    --bm-orange: #f15928;

    --bm-radius-control: 10px;
    --bm-radius-card: 16px;
    --bm-radius-panel: 22px;
    --bm-shadow-card: 0 1px 2px rgb(22 37 76 / 6%), 0 10px 30px rgb(22 37 76 / 8%);
    --bm-shadow-bar: 0 1px 0 var(--bm-border), 0 6px 18px rgb(22 37 76 / 6%);
    --bm-focus-ring: 0 0 0 3px rgb(0 127 140 / 22%);
    --bm-ease: cubic-bezier(0.2, 0, 0, 1);
    --bm-duration: 180ms;

    --bm-font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bm-font-display: 'Avenir Next', 'Figtree', ui-sans-serif, system-ui, sans-serif;

    --bm-topbar-height: 64px;

    /* ---- Radzen palette ---- */
    --rz-primary: var(--bm-navy);
    --rz-primary-light: var(--bm-navy-hover);
    --rz-primary-lighter: rgb(22 37 76 / 9%);
    --rz-primary-dark: #0e1a3a;
    --rz-primary-darker: var(--bm-navy-deep);
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: var(--bm-navy);
    --rz-secondary: var(--bm-slate);
    --rz-secondary-light: #6c7c96;
    --rz-secondary-lighter: rgb(90 107 133 / 12%);
    --rz-secondary-dark: #4a5a73;
    --rz-secondary-darker: #3f4d63;
    --rz-on-secondary-lighter: var(--bm-slate);
    --rz-info: var(--bm-teal);
    --rz-info-light: #1f929e;
    --rz-info-lighter: rgb(0 127 140 / 12%);
    --rz-info-dark: #006d78;
    --rz-info-darker: #005d66;
    --rz-on-info-lighter: #006d78;
    --rz-success: var(--bm-success);
    --rz-success-light: #3a7d5c;
    --rz-success-lighter: rgb(39 103 73 / 12%);
    --rz-success-dark: #1f563c;
    --rz-success-darker: #1a4a33;
    --rz-on-success-lighter: var(--bm-success);
    --rz-warning: #e0a526;
    --rz-warning-light: #e8b54a;
    --rz-warning-lighter: rgb(224 165 38 / 16%);
    --rz-warning-dark: #c48c16;
    --rz-warning-darker: #a97812;
    --rz-on-warning: var(--bm-navy);
    --rz-on-warning-lighter: var(--bm-warning);
    --rz-danger: var(--bm-danger);
    --rz-danger-light: #b0324b;
    --rz-danger-lighter: rgb(154 30 54 / 10%);
    --rz-danger-dark: #7d1629;
    --rz-danger-darker: #661222;
    --rz-on-danger-lighter: var(--bm-danger);
    --rz-base-background-color: var(--bm-canvas);
    --rz-text-font-family: var(--bm-font-body);
    --rz-text-color: var(--bm-navy);
    --rz-text-secondary-color: var(--bm-slate);
    --rz-text-title-color: var(--bm-navy);

    /* ---- Radzen shapes and states ---- */
    --rz-border-radius: var(--bm-radius-control);
    --rz-button-border-radius: var(--bm-radius-control);
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-button-focus-outline: 3px solid rgb(0 127 140 / 35%);
    --rz-outline-focus: 3px solid rgb(0 127 140 / 35%);
    --rz-input-border: 1px solid var(--bm-border);
    --rz-input-hover-border: 1px solid var(--bm-border-strong);
    --rz-input-focus-border: 1px solid var(--bm-teal);
    --rz-input-focus-shadow: var(--bm-focus-ring);
    --rz-input-border-radius: var(--bm-radius-control);
    --rz-input-background-color: var(--bm-surface);
    --rz-form-field-label-color: var(--bm-slate);
    --rz-form-field-label-focus-color: var(--bm-teal);
    --rz-form-field-label-floating-background-color: var(--bm-surface);
    --rz-card-background-color: var(--bm-surface);
    --rz-card-border-radius: var(--bm-radius-card);
    --rz-card-border: 1px solid var(--bm-border);
    --rz-card-shadow: var(--bm-shadow-card);
    --rz-badge-border-radius: 999px;
    --rz-badge-pill-border-radius: 999px;
    --rz-badge-text-transform: none;
    --rz-badge-letter-spacing: 0;
    --rz-badge-font-weight: 600;
    --rz-tabs-background-color: transparent;
    --rz-tabs-border: none;
    --rz-tabs-shadow: none;
    --rz-tabs-padding: 0;
    --rz-tabs-tab-background-color: transparent;
    --rz-tabs-tab-hover-background-color: transparent;
    --rz-tabs-tab-focus-background-color: transparent;
    --rz-tabs-tab-selected-background-color: transparent;
    --rz-tabs-tab-color: var(--bm-slate);
    --rz-tabs-tab-hover-color: var(--bm-navy);
    --rz-tabs-tab-focus-color: var(--bm-navy);
    --rz-tabs-tab-selected-color: var(--bm-navy);
    --rz-tabs-tab-selected-top-border-color: transparent;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: 0;
    --rz-tabs-tab-font-weight: 600;
    --rz-grid-header-background-color: var(--bm-surface-subtle);
    --rz-grid-header-color: var(--bm-slate);
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none;
    --rz-grid-selected-background-color: var(--bm-canvas);
    --rz-grid-selected-color: var(--bm-navy);
    --rz-badge-padding: 0.125rem 0.5rem;
    --rz-badge-line-height: 1.125rem;
    --rz-badge-pill-padding: 0.125rem 0.5rem;
    --rz-dropdown-item-hover-background-color: var(--bm-canvas);
    --rz-dropdown-item-hover-color: var(--bm-navy);
    --rz-dropdown-item-selected-background-color: var(--bm-canvas-muted);
    --rz-dropdown-item-selected-color: var(--bm-navy);
    --rz-dropdown-item-selected-hover-background-color: var(--bm-canvas-muted);
    --rz-dropdown-item-selected-hover-color: var(--bm-navy);
    --rz-datepicker-calendar-selected-background-color: var(--bm-navy);
    --rz-datepicker-calendar-selected-color: #ffffff;
    --rz-datepicker-calendar-selected-hover-background-color: var(--bm-navy-hover);
    --rz-datepicker-calendar-selected-hover-color: #ffffff;
    --rz-pager-numeric-button-background-color: transparent;
    --rz-pager-numeric-button-hover-background-color: var(--bm-canvas-muted);
    --rz-pager-numeric-button-selected-background-color: var(--bm-navy);
    --rz-pager-numeric-button-selected-color: #ffffff;
    --rz-pager-back-button-background-color: transparent;
    --rz-pager-next-button-background-color: transparent;
    --rz-pager-summary-color: var(--bm-muted);
    --rz-tree-node-hover-background-color: var(--bm-surface-subtle);
    --rz-tree-node-hover-color: var(--bm-navy);
    --rz-tree-node-selected-background-color: var(--bm-canvas);
    --rz-tree-node-selected-color: var(--bm-navy);
    --rz-tooltip-background-color: var(--bm-navy-deep);
    --rz-tooltip-color: #ffffff;
    --rz-progressbar-background-color: var(--bm-canvas-muted);
    --rz-progressbar-value-background-color: var(--bm-teal);
    --rz-switch-checked-background-color: var(--bm-navy);
    --rz-alert-border-radius: 12px;
    --rz-fieldset-border-radius: var(--bm-radius-card);
    --rz-fieldset-border: 1px solid var(--bm-border);
    --rz-fieldset-legend-color: var(--bm-navy);
    --rz-fieldset-legend-font-size: 0.9375rem;
    --rz-fieldset-legend-margin-inline: 0.75rem 0;
    --rz-fieldset-legend-padding-inline: 0.5rem;

    font-family: var(--bm-font-body);
    color: var(--bm-navy);
    -webkit-font-smoothing: antialiased;
}

/* The page fill only; popups choose their own background in the Popups section. */
.bm-theme {
    background: var(--bm-canvas);
}

.bm-theme :where(button, input, textarea, select, .rz-button, .rz-dropdown, .rz-chip, .rz-text, .rz-badge, .rz-tabview-title),
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side, .rz-popup, .rz-tooltip, .rz-context-menu) :where(button, input, textarea, select, .rz-button, .rz-dropdown, .rz-chip, .rz-text, .rz-badge, .rz-tabview-title, .rz-navigation-item-text) {
    font-family: var(--bm-font-body);
}

.bm-theme .rz-body {
    background: var(--bm-canvas);
}

/* Press feedback and calmer hover on every Radzen button inside the theme. */
.bm-theme .rz-button,
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-button {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color var(--bm-duration) var(--bm-ease), border-color var(--bm-duration) var(--bm-ease),
                color var(--bm-duration) var(--bm-ease), transform 100ms var(--bm-ease);
}

.bm-theme .rz-button:active:not(.rz-state-disabled),
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-button:active:not(.rz-state-disabled) {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .bm-theme .rz-button,
    .bm-theme .bm-region-chevron,
    body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-button {
        transition: none;
    }

    .bm-theme .rz-button:active:not(.rz-state-disabled),
    body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-button:active:not(.rz-state-disabled) {
        transform: none;
    }

    .bm-theme .bm-live-dot {
        animation: none;
    }
}

/* ---- Radzen components ----
   Stock Radzen markup on a themed page (and in its popups) takes the theme's shapes here, so a
   page needs no extra classes for badges, alerts, fieldsets, the tree, the pager or tooltips.
   Badges become the soft pills of .bm-chip: the solid Radzen colours shout on a dense grid. */

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-badge {
    box-shadow: none;
    border: none;
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-badge-primary {
    background: rgb(22 37 76 / 9%);
    color: var(--bm-navy);
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) :is(.rz-badge-secondary, .rz-badge-light, .rz-badge-base) {
    background: var(--bm-canvas-muted);
    color: var(--bm-slate);
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-badge-info {
    background: var(--bm-teal-soft);
    color: #006d78;
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-badge-success {
    background: var(--bm-success-soft);
    color: var(--bm-success);
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-badge-warning {
    background: var(--bm-warning-soft);
    color: var(--bm-warning);
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-badge-danger {
    background: var(--bm-danger-soft);
    color: var(--bm-danger);
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-alert {
    box-shadow: none;
    font-size: 0.875rem;
    line-height: 1.5;
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-fieldset {
    background: var(--bm-surface);
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-fieldset-legend {
    font-family: var(--bm-font-display);
    font-weight: 700;
    background: var(--bm-surface);
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-chkbox-box {
    border-radius: 5px;
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) :is(.rz-pager-page, .rz-pager-element) {
    border-radius: 8px;
}

body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-treenode-content {
    border-radius: 8px;
}

/* Same marker as the selected lesson in the master-detail list. */
body:has(.rz-layout.bm-theme) :is(.bm-theme, .rz-dialog, .rz-dialog-side) .rz-treenode-content.rz-treenode-content-selected {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bm-gold);
}

body:has(.rz-layout.bm-theme) .rz-popup {
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(4 18 54 / 14%);
}

body:has(.rz-layout.bm-theme) .rz-tooltip .rz-tooltip-content {
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ---- Top bar ---- */

.bm-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--bm-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem 0 0.75rem;
    background: var(--bm-surface);
    box-shadow: var(--bm-shadow-bar);
}

.bm-topbar-start,
.bm-topbar-end {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.bm-topbar-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bm-crumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--bm-slate);
    line-height: 1.2;
    white-space: nowrap;
}

.bm-crumb-link {
    color: var(--bm-slate);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28rem;
}

.bm-crumb-link:hover {
    color: var(--bm-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bm-crumb-link:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
    border-radius: 4px;
}

.bm-title-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.bm-title {
    margin: 0;
    font-family: var(--bm-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--bm-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-unsaved {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bm-warning);
    white-space: nowrap;
}

.bm-unsaved::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bm-orange);
}

/* ---- Chips and status pills ---- */

.bm-day-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--bm-gold-soft);
    color: #7a5f2a;
    border: 1px solid var(--bm-gold-light);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bm-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.bm-status::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
}

.bm-status-new { background: var(--bm-canvas-muted); color: var(--bm-slate); }
.bm-status-draft { background: var(--bm-purple-soft); color: var(--bm-purple); }
.bm-status-published { background: var(--bm-success-soft); color: var(--bm-success); }
.bm-status-archived { background: var(--bm-danger-soft); color: var(--bm-danger); }

.bm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bm-canvas-muted);
    color: var(--bm-slate);
    white-space: nowrap;
}

.bm-chip-success { background: var(--bm-success-soft); color: var(--bm-success); }
.bm-chip-info { background: var(--bm-teal-soft); color: #006d78; }
.bm-chip-warning { background: var(--bm-warning-soft); color: var(--bm-warning); }
.bm-chip-gold { background: var(--bm-gold-soft); color: #7a5f2a; }
.bm-chip-danger { background: var(--bm-danger-soft); color: var(--bm-danger); }

/* ---- Role picker: Academy role lists and dropdowns (RolePicker, RoleOption) ---- */

.bm-role-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-role-picker-filter {
    width: 100%;
    max-width: 16rem;
}

.bm-role-picker-list {
    width: 100%;
    height: 300px;
}

/* Inline rather than spread across the row: Radzen's item markup differs between listbox and dropdown. */
.bm-role-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.bm-role-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Reserves three lines so the Free Roles and Allowed Roles descriptions keep both lists aligned. */
.bm-role-access-description {
    margin-bottom: 0.5rem;
    min-height: 4.5rem;
}

/* ---- Stat tiles: the summary row of a report page (Course Results, Translation Analysis) ---- */

.bm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.bm-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    box-shadow: var(--bm-shadow-card);
}

.bm-stat-value {
    font-family: var(--bm-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bm-navy);
}

.bm-stat-label {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-stat-warning {
    border-color: color-mix(in srgb, var(--bm-warning) 35%, var(--bm-border));
    background: var(--bm-warning-soft);
}

.bm-stat-warning .bm-stat-value {
    color: var(--bm-warning);
}

/* ---- Page body ---- */

.bm-body.rz-body {
    margin-top: var(--bm-topbar-height);
    height: calc(100vh - var(--bm-topbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1.5rem 3rem;
}

.bm-page {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---- Live strip ---- */

.bm-live-strip {
    --bm-live-accent: var(--bm-slate);
    --bm-live-tint: var(--bm-surface);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-radius: var(--bm-radius-card);
    border: 1px solid var(--bm-border);
    border-left: 4px solid var(--bm-live-accent);
    background: var(--bm-live-tint);
    box-shadow: var(--bm-shadow-card);
}

.bm-live-idle { --bm-live-accent: var(--bm-border-strong); }
.bm-live-ready { --bm-live-accent: var(--bm-teal); }
.bm-live-soon { --bm-live-accent: #e0a526; --bm-live-tint: #fffaf0; }
.bm-live-on-air { --bm-live-accent: var(--bm-live); --bm-live-tint: #fff7f8; }
.bm-live-processing { --bm-live-accent: var(--bm-purple); }
.bm-live-done { --bm-live-accent: var(--bm-success); }

.bm-live-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--bm-live-accent);
    flex-shrink: 0;
}

.bm-live-on-air .bm-live-dot {
    animation: bm-pulse 1.6s var(--bm-ease) infinite;
}

@keyframes bm-pulse {
    0% { box-shadow: 0 0 0 0 rgb(217 48 79 / 45%); }
    70% { box-shadow: 0 0 0 8px rgb(217 48 79 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(217 48 79 / 0%); }
}

.bm-live-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.bm-live-state {
    font-weight: 700;
    font-size: 0.9375rem;
}

.bm-live-meta {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

/* ---- Tabs: underline style, gold for the selected tab ---- */

.bm-theme .rz-tabview-nav,
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-tabview-nav {
    border-bottom: 1px solid var(--bm-border);
    gap: 0.25rem;
}

.bm-theme .rz-tabview-nav li,
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-tabview-nav li {
    border: none;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    transition: border-color var(--bm-duration) var(--bm-ease);
}

.bm-theme .rz-tabview-top > .rz-tabview-nav li.rz-tabview-selected,
.bm-theme .rz-tabview-nav li.rz-tabview-selected,
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-tabview-top > .rz-tabview-nav li.rz-tabview-selected,
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-tabview-nav li.rz-tabview-selected {
    border: none;
    border-bottom: 3px solid var(--bm-gold);
    margin-bottom: -1px;
}

.bm-theme .rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled),
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    border-top-color: transparent;
    border-bottom-color: var(--bm-gold-light);
}

.bm-theme .rz-tabview-panels {
    background: transparent;
    border: none;
    padding: 0;
}

/* Inside a popup the tab body keeps a little air under the tab row. */
body:has(.rz-layout.bm-theme) :is(.rz-dialog, .rz-dialog-side) .rz-tabview-panels {
    background: transparent;
    border: none;
    padding: 1rem 0 0;
}

.bm-tabs > .rz-tabview-panels {
    padding-top: 1rem;
}

/* A page with more tabs than a phone can show (PhoneTabSelect) trades its tab row for a dropdown
   below 640px; Radzen's row neither wraps nor scrolls, so the last tabs would be cut off. */
.bm-theme .bm-phone-tab-select {
    display: none;
}

@media (max-width: 640px) {
    .bm-theme .bm-phone-tab-select {
        display: flex;
    }

    .bm-theme .bm-tabs-phone-select > .rz-tabview-nav {
        display: none;
    }
}

/* ---- Cards ---- */

.bm-card {
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    box-shadow: var(--bm-shadow-card);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.bm-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.bm-card-title {
    margin: 0;
    font-family: var(--bm-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--bm-navy);
}

.bm-card-subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--bm-slate);
    max-width: 60ch;
}

.bm-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bm-card-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--bm-canvas-muted);
}

.bm-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
}

/* Opt-in: both cards of the row take the taller one's height, for two cards read side by side as
   one row. Not the default, because a short side card next to a long form would be a tall empty box. */
.bm-grid.bm-grid-equal {
    align-items: stretch;
}

.bm-field-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .bm-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .bm-field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bm-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bm-muted);
}

.bm-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bm-slate);
    letter-spacing: 0.02em;
}

/* Longer explanations stay one click away instead of sitting above every field. */
.bm-details {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-details > summary {
    cursor: pointer;
    font-weight: 600;
    color: #006d78;
    width: fit-content;
}

.bm-details > summary:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
    border-radius: 4px;
}

.bm-details > div {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-canvas-muted);
    line-height: 1.5;
}

.bm-empty {
    padding: 1.5rem;
    border: 1px dashed var(--bm-border);
    border-radius: var(--bm-radius-card);
    text-align: center;
    color: var(--bm-slate);
    font-size: 0.875rem;
    background: var(--bm-surface-subtle);
}

/* ---- Image slot ---- */

.bm-image-slot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-image-frame {
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bm-canvas) 0%, var(--bm-gold-soft) 100%);
    border: 1px solid var(--bm-border);
    display: grid;
    place-items: center;
    color: var(--bm-border-strong);
}

.bm-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The placeholder icon an empty frame shows; not the icons of the buttons laid over an image. */
.bm-image-frame > .rzi {
    font-size: 2.25rem;
}

/* Avatars and profile photos; capped so a wide side column does not make it a poster. */
.bm-image-frame-square {
    aspect-ratio: 1 / 1;
    max-width: 16rem;
}

/* ---- CDN image preview (Pages/Shared/Components/CdnImagePreview) ----
   Fills the frame it is placed in. Also used on Academy pages still on the old layout,
   where the --bm-* tokens are not defined, hence the fallback values. */

.bm-cdn-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.bm-cdn-image > img.is-hidden {
    display: none;
}

.bm-cdn-image-status {
    width: 100%;
    height: 100%;
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--bm-slate, #5a6b85);
    background: var(--bm-surface-subtle, #f8f9fd);
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Inside an image frame the preview takes the frame's exact size, however narrow the column:
   no minimum height, so the status shrinks with the frame instead of being cut by its overflow. */
.bm-image-frame > .bm-cdn-image {
    place-self: stretch;
    min-width: 0;
    min-height: 0;
}

.bm-image-frame .bm-cdn-image-status {
    min-height: 0;
    gap: 0.375rem;
    padding: 0.5rem;
    font-size: 0.75rem;
}

.bm-cdn-image-status.is-failed {
    color: var(--bm-warning, #7a5200);
    background: var(--bm-warning-soft, #fff4d6);
}

/* Retry stays clickable under a frame's hover overlay (e.g. the course banner's edit buttons). */
.bm-cdn-image-status .rz-button {
    position: relative;
    z-index: 1;
}

/* Row and timeline thumbnails: only a spinner or a Retry icon fits. */
.bm-cdn-image-compact .bm-cdn-image-status {
    min-height: 0;
    padding: 0;
    gap: 0;
}

.bm-cdn-image-compact .bm-cdn-image-status .rzi {
    font-size: 1rem;
}

.bm-cdn-image.bm-row-thumb {
    overflow: hidden;
}

.bm-cdn-image.bm-row-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 25% 25%;
}

/* ---- Lists (teachers, materials) ---- */

.bm-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-list-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--bm-canvas-muted);
    border-radius: 12px;
    background: var(--bm-surface-subtle);
}

.bm-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--bm-navy);
    color: var(--bm-gold-light);
}

.bm-list-row-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A row name that opens the record it names (a teacher's course, a course's teacher). */
.bm-row-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.bm-row-link:hover,
.bm-row-link:focus-visible {
    color: var(--bm-navy);
    text-decoration: underline;
}

.bm-reorder {
    display: flex;
    flex-direction: column;
}

.bm-primary-toggle {
    border: 1px solid var(--bm-border);
    background: var(--bm-surface);
    color: var(--bm-slate);
    border-radius: 999px;
    padding: 0.125rem 0.625rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--bm-duration) var(--bm-ease), color var(--bm-duration) var(--bm-ease);
}

.bm-primary-toggle:hover {
    border-color: var(--bm-gold);
    color: var(--bm-navy);
}

.bm-primary-toggle:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-primary-toggle.is-primary {
    background: var(--bm-gold-soft);
    border-color: var(--bm-gold-light);
    color: #7a5f2a;
}

.bm-material-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2.2fr);
    align-items: start;
}

@media (max-width: 900px) {
    .bm-material-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bm-material-item {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--bm-border);
    background: var(--bm-surface);
    color: var(--bm-navy);
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    transition: border-color var(--bm-duration) var(--bm-ease), background-color var(--bm-duration) var(--bm-ease);
}

.bm-material-item:hover {
    border-color: var(--bm-border-strong);
}

.bm-material-item:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-material-item.is-selected {
    border-color: var(--bm-navy);
    background: var(--bm-canvas);
    box-shadow: inset 3px 0 0 var(--bm-gold);
}

.bm-material-item-title {
    font-weight: 600;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-band {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--bm-teal-soft);
    border: 1px solid rgb(0 127 140 / 18%);
}

/* ---- Availability regions ---- */

.bm-region {
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    box-shadow: var(--bm-shadow-card);
    overflow: hidden;
}

.bm-region.is-inactive {
    box-shadow: none;
    background: var(--bm-surface-subtle);
}

.bm-region-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.bm-region-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: none;
    border: none;
    padding: 0.25rem 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.bm-region-toggle:disabled {
    cursor: default;
}

.bm-region-toggle:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
    border-radius: 6px;
}

.bm-region-name {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-right: 0.25rem;
}

.bm-region-chevron {
    margin-left: auto;
    color: var(--bm-slate);
    transition: transform var(--bm-duration) var(--bm-ease);
}

.bm-region-toggle[aria-expanded='true'] .bm-region-chevron {
    transform: rotate(180deg);
}

.bm-region-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--bm-canvas-muted);
    background: var(--bm-surface-subtle);
}

.bm-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #006d78;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    text-align: left;
}

.bm-link-button:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
    border-radius: 4px;
}

/* Option tiles (AccessOptionTile): one card per way of getting access. The whole card is the
   toggle, so the choice that decides the rest of the region reads as a choice, not a footnote. */

.bm-option-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.bm-option-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bm-duration) var(--bm-ease), box-shadow var(--bm-duration) var(--bm-ease);
}

.bm-option-tile:hover:not(:disabled) {
    border-color: var(--bm-border-strong);
}

.bm-option-tile:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-option-tile.is-selected {
    border-color: var(--bm-navy);
    box-shadow: inset 0 0 0 1px var(--bm-navy);
}

.bm-option-tile:disabled {
    cursor: default;
    background: var(--bm-surface-subtle);
}

.bm-option-tile.is-selected:disabled {
    border-color: var(--bm-border-strong);
    box-shadow: none;
}

.bm-option-tile-check {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--bm-muted);
}

.bm-option-tile.is-selected .bm-option-tile-check {
    color: var(--bm-navy);
}

.bm-option-tile-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.bm-option-tile-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.bm-option-tile-description {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-option-tile-note {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bm-muted);
}

/* Product list (RegionProductRow, ExternalSaleLinks): every product that sells a region, the
   Academy pass first with a gold stripe because it holds the tag the others grant. */

.bm-product-list {
    display: flex;
    flex-direction: column;
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    overflow: hidden;
}

/* A region that does not sell on its own and has no leftover links shows no empty frame. */
.bm-product-list:not(:has(.bm-product-row, .bm-product-slot, .bm-product-add)) {
    display: none;
}

.bm-product-list > * + * {
    border-top: 1px solid var(--bm-canvas-muted);
}

.bm-product-list-head {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bm-slate);
    background: var(--bm-surface-subtle);
}

.bm-product-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid transparent;
}

.bm-product-row.is-academy {
    border-left-color: var(--bm-gold);
}

.bm-product-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bm-product-row-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-product-row-link,
.bm-product-row-name {
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-product-row-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}

.bm-product-row-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bm-product-row-link:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
    border-radius: 4px;
}

.bm-product-row-link .rzi {
    font-size: 1rem;
    color: var(--bm-teal);
}

.bm-product-row-details {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-product-row-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.bm-product-slot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.bm-product-slot .bm-hint {
    margin: 0;
}

.bm-product-loading {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-product-slot-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bm-product-slot-buttons {
    display: flex;
    gap: 0.5rem;
}

.bm-product-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: #006d78;
    text-align: left;
    cursor: pointer;
    transition: background var(--bm-duration) var(--bm-ease);
}

.bm-product-add:hover {
    background: var(--bm-teal-soft);
}

.bm-product-add:focus-visible {
    outline: none;
    box-shadow: inset var(--bm-focus-ring);
}

.bm-product-add.is-blocked {
    align-items: flex-start;
    font-weight: 400;
    color: var(--bm-muted);
    cursor: default;
}

.bm-product-add.is-blocked .bm-product-add-label {
    display: block;
    font-weight: 600;
}

.bm-product-add.is-blocked .bm-hint {
    margin: 0;
}

/* Academy pass slot while the region has no product (AcademyPassPicker): one folded row marked
   with the gold stripe of the Academy pass it will become; linking and creating open popups. */
.bm-product-slot.is-academy {
    border-left: 4px solid var(--bm-gold);
}

.bm-product-row.is-empty {
    background: var(--bm-surface-subtle);
}

.bm-product-row.is-empty .bm-product-row-name {
    color: var(--bm-slate);
    font-weight: 500;
}

/* "Other products that grant this pass" row of ExternalSaleLinks while the region cannot take a
   link yet: the reason replaces the buttons. */
.bm-product-row.is-blocked .bm-product-row-name {
    color: var(--bm-muted);
}

/* Search line of the product picker popup in search mode (ProductsVariantsSearchSelect). */
.bm-product-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.bm-product-search-shop {
    width: 280px;
}

.bm-product-search-shop .rz-dropdown {
    width: 100%;
}

.bm-product-search-text {
    flex: 1;
    min-width: 240px;
}

.bm-product-search-text .rz-textbox {
    width: 100%;
}

.bm-pass-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.bm-pass-form .rz-form-field,
.bm-pass-form .rz-dropdown,
.bm-pass-form .rz-numeric,
.bm-pass-form .rz-textbox {
    width: 100%;
}

.bm-pass-form .bm-pass-form-wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .bm-product-row {
        flex-wrap: wrap;
    }

    .bm-pass-form .bm-pass-form-wide {
        grid-column: auto;
    }

    .bm-product-row-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ---- List pages (Academy Contents) ---- */

.bm-page-wide {
    max-width: 1440px;
}

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

.bm-tab-count {
    min-width: 1.375rem;
    padding: 0 0.4375rem;
    border-radius: 999px;
    background: var(--bm-canvas-muted);
    color: var(--bm-slate);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.375rem;
    text-align: center;
}

.rz-tabview-selected .bm-tab-count {
    background: var(--bm-gold-soft);
    color: #7a5f2a;
}

.bm-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.bm-filter-bar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bm-search {
    position: relative;
    width: 18rem;
    max-width: 100%;
}

/* A second box for a short value such as a code, beside the main search. */
.bm-search-narrow {
    width: 10rem;
}

.bm-search .rz-textbox {
    width: 100%;
    padding-left: 2.25rem;
}

.bm-search > .rzi {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: var(--bm-muted);
    pointer-events: none;
    z-index: 1;
}

.bm-filter-select {
    width: 13rem;
}

/* Every grid of a themed page has the card's corners; overflow keeps the header and pager inside them.
   bm-list-grid adds the card frame and the clickable rows. */
.bm-theme .rz-data-grid {
    border-radius: var(--bm-radius-card);
    overflow: hidden;
}

.bm-theme .bm-list-grid {
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    box-shadow: var(--bm-shadow-card);
    overflow: hidden;
}

.bm-theme .bm-list-grid .rz-data-row {
    cursor: pointer;
}

.bm-theme .bm-list-grid .rz-data-row:hover > td {
    background: var(--bm-surface-subtle);
}

.bm-row-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    font-weight: 600;
}

.bm-row-thumb {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    object-position: 25% 25%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bm-canvas-muted);
    color: var(--bm-muted);
}

.bm-row-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-status-cell {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.bm-row-actions {
    display: flex;
    justify-content: center;
}

.bm-grid-empty {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bm-grid-empty p {
    margin: 0;
}

/* ---- Live Manager: the current live card (Pages/LiveManager) ----
   Same colour families as the lecture page's live strip (bm-live-*); Starting soon and Live get a
   halo so the media team sees from across the room that something is going out. */
.bm-live-card.rz-card {
    position: relative;
    overflow: visible;
    border: 2px solid var(--bm-live-accent, var(--bm-border));
    background: var(--bm-live-tint, var(--bm-surface));
}

.bm-live-card.rz-card:has(> .bm-live-earmark) {
    padding-top: 2rem;
}

.bm-live-card.bm-live-soon.rz-card,
.bm-live-card.bm-live-on-air.rz-card {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bm-live-accent) 20%, transparent), var(--bm-shadow-card);
}

.bm-live-earmark {
    position: absolute;
    top: -2px;
    left: -2px;
    z-index: 1;
    padding: 0.125rem 0.75rem;
    border-radius: var(--bm-radius-card) 0 var(--bm-radius-control) 0;
    background: var(--bm-live-accent);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* The idle grey is too light for white text. */
.bm-live-idle .bm-live-earmark {
    color: var(--bm-navy);
}

/* ---- Shared media library (Pages/Shared/MediaLibrary) on the Academy Media and Bhakti+ Images pages ---- */
.bm-theme .media-library {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-theme .media-library .rz-data-grid {
    border: 1px solid var(--bm-border);
    border-radius: 12px !important;
}

/* The toolbar (Upload, Refresh, Find Duplicates, …) sits above the grid's group header. */
.bm-theme .media-library .rz-custom-header {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---- Segmented "use existing / create new" choice ----
   RadzenSelectBar draws an accent frame across the whole row while its items shrink to content;
   the frame goes and each item takes half the row so the two choices read as one control. */

.bm-product-mode-selector {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100%;
}
.bm-product-mode-selector .rz-button {
    flex: 1 1 0;
    justify-content: center;
}
/* The Radzen theme keeps a "last interacted with" highlight (a coloured border on the
   previously selected item) after toggling. The active item already reads as clearly
   different, so we lock the inactive item to a neutral border in every state — focus,
   focus-visible, hover, rz-state-focus, rz-state-hover — and strip all focus rings
   from the wrapper and any descendant. */
.bm-product-mode-selector,
.bm-product-mode-selector:focus,
.bm-product-mode-selector:focus-within,
.bm-product-mode-selector.rz-state-focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.bm-product-mode-selector *:focus,
.bm-product-mode-selector *:focus-visible,
.bm-product-mode-selector *:focus-within {
    outline: none !important;
    box-shadow: none !important;
}
.bm-product-mode-selector .rz-button:not(.rz-state-active),
.bm-product-mode-selector .rz-button:not(.rz-state-active):hover,
.bm-product-mode-selector .rz-button:not(.rz-state-active):focus,
.bm-product-mode-selector .rz-button:not(.rz-state-active):focus-visible,
.bm-product-mode-selector .rz-button:not(.rz-state-active).rz-state-focus,
.bm-product-mode-selector .rz-button:not(.rz-state-active).rz-state-hover {
    border: 1px solid var(--rz-input-border-color, #ced4da) !important;
    background-color: transparent !important;
}

/* ---- Editor details ---- */

.bm-missing {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.bm-missing .bm-label {
    margin-right: 0.25rem;
}

/* A disclosure under a checkbox lines up with the checkbox label, not the box. */
.bm-details-indent {
    margin: -0.25rem 0 0.25rem 1.75rem;
}

/* A picker with its Add button, above the list it adds to. */
.bm-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.bm-list-row-text {
    flex: 1;
    min-width: 0;
}

.bm-list-row-text .bm-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

img.bm-avatar {
    object-fit: cover;
}

.bm-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bm-check-row .rz-label {
    cursor: pointer;
    font-weight: 500;
}

/* ---- Master-detail editor (class: lessons on the left, the open lesson on the right) ---- */

.bm-split-body.rz-body {
    padding: 0;
    overflow: hidden;
}

.bm-split {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
    height: 100%;
}

.bm-split-nav {
    border-right: 1px solid var(--bm-border);
    background: var(--bm-surface);
    overflow-y: auto;
}

.bm-split-main {
    overflow-y: auto;
    padding: 1.25rem 1.5rem 3rem;
}

@media (max-width: 900px) {
    .bm-split {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .bm-split-body.rz-body {
        overflow-y: auto;
    }

    .bm-split-nav {
        border-right: none;
        border-bottom: 1px solid var(--bm-border);
    }
}

/* Floating split (class page): the lesson list and the editor float as one panel with margins
   around it, leaving room at the sides for the record arrows when the page has them. Each half
   still scrolls inside the panel. */
.bm-split-body.bm-split-floating.rz-body {
    box-sizing: border-box;
    padding: 1rem 4.5rem;
}

.bm-split-floating .bm-split {
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-panel);
    box-shadow: var(--bm-shadow-card);
    overflow: hidden;
}

/* On a phone the margins would cost too much of the editor, and the arrows are hidden. */
@media (max-width: 640px) {
    .bm-split-body.bm-split-floating.rz-body {
        padding: 0;
    }

    .bm-split-floating .bm-split {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
}

.bm-element-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
}

.bm-element-list-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 0.5rem 0.5rem;
}

.bm-element {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--bm-duration) var(--bm-ease), border-color var(--bm-duration) var(--bm-ease);
}

.bm-element.is-draggable {
    cursor: grab;
}

.bm-element.is-draggable:active {
    cursor: grabbing;
}

.bm-element:hover {
    background: var(--bm-surface-subtle);
}

.bm-element.is-selected {
    background: var(--bm-canvas);
    border-color: var(--bm-border);
    box-shadow: inset 3px 0 0 var(--bm-navy);
}

.bm-element.is-drag-over {
    box-shadow: inset 0 2px 0 var(--bm-teal);
}

.bm-element-handle {
    font-size: 1rem;
    color: var(--bm-border-strong);
    flex-shrink: 0;
}

.bm-element-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--bm-canvas-muted);
    color: var(--bm-navy);
}

.bm-element.is-selected .bm-element-icon {
    background: var(--bm-navy);
    color: var(--bm-gold-light);
}

.bm-element-icon .rzi {
    font-size: 1.125rem;
}

.bm-element-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.bm-element-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bm-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The full name shows on hover instead of a tooltip. */
.bm-element:hover .bm-element-name {
    white-space: normal;
    word-break: break-word;
}

.bm-element-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.bm-element-kind {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bm-muted);
}

.bm-element-meta .bm-chip {
    padding: 0 0.375rem;
    font-size: 0.6875rem;
}

.bm-element-menu {
    flex-shrink: 0;
}

/* ---- Course Results: the learner list reuses the element rows ---- */

.bm-results-search {
    width: auto;
    margin: 0 0.5rem 0.25rem;
}

.bm-results-toggle {
    padding: 0.25rem 0.5rem 0.5rem;
}

.bm-results-nav-empty {
    padding: 0.5rem;
}

.bm-element-icon:not(:has(.rzi)) {
    font-size: 0.75rem;
    font-weight: 700;
}

.bm-results-grade {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bm-navy);
}

.bm-element-add {
    margin-top: 0.5rem;
}

.bm-element-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.bm-element-title {
    margin: 0.125rem 0 0;
    font-family: var(--bm-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bm-navy);
}

.bm-preview-settings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: var(--bm-surface-subtle);
}

/* ---- Popups: every dialog and side panel opened while a themed page is on screen ----
   Radzen renders them outside the page layout, so they are matched through the page instead
   of carrying the class. That covers the shared alerts and confirms (NotificationsService), the
   product picker and the translation dialog without changing their callers. Side panels hold
   lists, so they sit on the canvas; centred dialogs are white. */
body:has(.rz-layout.bm-theme) .rz-dialog-side {
    background: var(--bm-canvas);
}

body:has(.rz-layout.bm-theme) .rz-dialog {
    background: var(--bm-surface);
    border-radius: var(--bm-radius-card);
    box-shadow: 0 24px 60px rgb(4 18 54 / 22%);
}

body:has(.rz-layout.bm-theme) .rz-dialog-side-titlebar,
body:has(.rz-layout.bm-theme) .rz-dialog-titlebar {
    background: var(--bm-surface);
    border-bottom: 1px solid var(--bm-border);
}

body:has(.rz-layout.bm-theme) .rz-dialog-side-title,
body:has(.rz-layout.bm-theme) .rz-dialog-title {
    font-family: var(--bm-font-display);
    font-weight: 700;
    color: var(--bm-navy);
}

body:has(.rz-layout.bm-theme) .rz-dialog-side-content {
    padding: 0;
}

body:has(.rz-layout.bm-theme) .rz-dialog-mask {
    background: rgb(4 18 54 / 45%);
}

/* Alerts and confirms: a readable message, the answer that keeps the author safe (Ok, Yes, Stay,
   Continue editing) as the navy button, and the other one as a quiet text button. */
body:has(.rz-layout.bm-theme) :is(.rz-dialog-alert-message, .rz-dialog-confirm-message) {
    line-height: 1.5;
    color: var(--bm-navy);
    max-width: 32rem;
}

body:has(.rz-layout.bm-theme) :is(.rz-dialog-alert-buttons, .rz-dialog-confirm-buttons) {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

body:has(.rz-layout.bm-theme) :is(.rz-dialog-alert-buttons, .rz-dialog-confirm-buttons) .rz-button {
    margin: 0;
    min-width: 6rem;
}

body:has(.rz-layout.bm-theme) .rz-dialog-confirm-buttons .rz-button:not(.rz-primary) {
    background: transparent;
    color: var(--bm-navy);
    border: 1px solid transparent;
}

body:has(.rz-layout.bm-theme) .rz-dialog-confirm-buttons .rz-button:not(.rz-primary):hover {
    background: var(--bm-canvas-muted);
}

/* The shared translation dialog (Shared/Components/TranslationDialog) keeps its own colours on
   other pages; under the theme its status dots and dividers use the theme's state colours. */
body:has(.rz-layout.bm-theme) .rz-dialog .status-current {
    background-color: var(--bm-success);
    box-shadow: 0 0 0 3px var(--bm-success-soft);
}

body:has(.rz-layout.bm-theme) .rz-dialog .status-outdated {
    background-color: var(--rz-warning);
    box-shadow: 0 0 0 3px var(--bm-warning-soft);
}

body:has(.rz-layout.bm-theme) .rz-dialog .status-missing {
    background-color: var(--bm-border-strong);
    box-shadow: 0 0 0 3px var(--bm-canvas-muted);
}

body:has(.rz-layout.bm-theme) .rz-dialog :is(.modal-header, .modal-footer) {
    border-color: var(--bm-border);
}

body:has(.rz-layout.bm-theme) .rz-dialog .modal-header h3 {
    margin: 0;
    font-family: var(--bm-font-display);
    font-size: 1.125rem;
    font-weight: 700;
}

body:has(.rz-layout.bm-theme) .rz-dialog .modal-overlay {
    background-color: rgb(4 18 54 / 45%);
}

/* Search and Done stay in view while the results scroll beneath them. */
.bm-side-panel-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--bm-border);
}

.bm-side-panel-content {
    padding: 1rem 1.25rem 1.5rem;
}

/* ---- Notifications: the toasts of NotificationsService, on every page ----
   A white card in the bottom right corner. New toasts arrive at the bottom and push the earlier
   ones up. The severity shows as a left stripe and a soft icon circle rather than a solid fill,
   so a toast reads like the cards around it. Only toasts that close by themselves show the thin
   progress line; an error stays until it is closed. Rules: docs/design-system.md ("Feedback and states"). */
.rz-notification {
    inset-block-start: auto;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rz-notification .rz-notification-item-wrapper {
    --bm-toast-accent: var(--bm-teal);
    --bm-toast-accent-soft: var(--bm-teal-soft);
    position: relative;
    width: 360px;
    min-width: 0;
    max-width: calc(100vw - 48px);
    margin: 0;
    overflow: hidden;
    background: var(--bm-surface);
    border-radius: var(--bm-radius-card);
    box-shadow: var(--bm-shadow-card), 0 0 0 1px var(--bm-border);
    animation: bm-toast-in var(--bm-duration) var(--bm-ease);
}

.rz-notification .rz-notification-success {
    --bm-toast-accent: var(--bm-success);
    --bm-toast-accent-soft: var(--bm-success-soft);
}

.rz-notification .rz-notification-warn {
    --bm-toast-accent: var(--bm-warning);
    --bm-toast-accent-soft: var(--bm-warning-soft);
}

.rz-notification .rz-notification-error {
    --bm-toast-accent: var(--bm-danger);
    --bm-toast-accent-soft: var(--bm-danger-soft);
}

.rz-notification .rz-notification-item-wrapper .rz-notification-item {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    color: var(--bm-navy);
    background: transparent;
    border-inline-start: 4px solid var(--bm-toast-accent);
    border-radius: 0;
    box-shadow: none;
}

.rz-notification .rz-notification-message-wrapper {
    gap: 12px;
}

.rz-notification .rz-notification-icon.rzi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: var(--bm-toast-accent);
    background: var(--bm-toast-accent-soft);
    border-radius: 50%;
}

.rz-notification .rz-notification-message {
    min-width: 0;
    padding-top: 5px;
}

.rz-notification .rz-notification-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bm-navy);
}

/* pre-line keeps the line breaks callers put in a detail. */
.rz-notification .rz-notification-content {
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--bm-slate);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.rz-notification .rz-notification-item-wrapper:has(> .rz-progressbar) .rz-notification-content {
    margin-block-end: 0;
}

.rz-notification .rz-notification-content:empty {
    display: none;
}

.rz-notification .rz-notification-close.rzi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 18px;
    color: var(--bm-muted);
    opacity: 1;
    border-radius: 50%;
    transition: background-color var(--bm-duration) var(--bm-ease), color var(--bm-duration) var(--bm-ease);
}

.rz-notification .rz-notification-close.rzi:hover {
    color: var(--bm-navy);
    background: var(--bm-canvas-muted);
}

.rz-notification .rz-notification-item-wrapper > .rz-progressbar {
    inset-block-end: 0;
    inset-inline: 0;
    --rz-progressbar-height: 3px;
    --rz-progressbar-border-radius: 0;
    background-color: transparent;
}

.rz-notification .rz-progressbar .rz-progressbar-value {
    background-color: var(--bm-toast-accent);
}

@keyframes bm-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rz-notification .rz-notification-item-wrapper {
        animation: none;
    }

    .rz-notification .rz-notification-close.rzi {
        transition: none;
    }
}

/* Phones: the toasts span the width above the bottom edge instead of sitting in the corner. */
@media (max-width: 768px) {
    .rz-notification {
        inset-block-end: 12px;
        inset-inline: 12px;
    }

    .rz-notification .rz-notification-item-wrapper {
        width: auto;
        max-width: none;
    }
}

/* ---- Fill pages: the window is the page and each pane scrolls on its own (Documents Manager) ---- */

.bm-body-fill.rz-body {
    overflow: hidden;
    padding-bottom: 1rem;
}

.bm-page-fill {
    height: 100%;
    min-height: 0;
}

.bm-tabs-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bm-tabs-fill > .rz-tabview-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.bm-tabs-fill > .rz-tabview-panels > .rz-tabview-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bm-tabs-fill .bm-list-grid {
    flex: 1 1 auto;
    min-height: 0;
}

/* Folder tree | files | details. */
.bm-docs {
    position: relative;
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr) 22.5rem;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.bm-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    box-shadow: var(--bm-shadow-card);
}

.bm-pane-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid var(--bm-border);
}

.bm-pane-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bm-navy);
    word-break: break-word;
}

.bm-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
}

.bm-pane-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bm-slate);
}

.bm-pane-empty > .rzi {
    font-size: 2rem;
    color: var(--bm-border-strong);
}

.bm-theme .bm-pane > .rz-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
}

.bm-pane .rz-tree {
    background: transparent;
    border: 0;
    padding: 0;
}

.bm-pane .rz-treenode-content-selected {
    background: var(--bm-canvas);
    color: var(--bm-navy);
}

.bm-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.bm-facts dt {
    color: var(--bm-slate);
}

.bm-facts dd {
    margin: 0;
    color: var(--bm-navy);
    word-break: break-word;
}

.bm-docs-folder-art {
    display: grid;
    place-items: center;
    padding: 1.25rem 0;
    border-radius: var(--bm-radius-control);
    background: var(--bm-gold-soft);
    color: var(--bm-gold);
}

.bm-docs-folder-art > .rzi {
    font-size: 4rem;
}

.bm-docs-folder-icon {
    color: var(--bm-gold);
}

.bm-docs-preview {
    position: relative;
    flex-shrink: 0;
    height: 20rem;
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
}

.bm-docs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-docs-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    word-break: break-word;
}

.bm-busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--bm-radius-card);
    background: rgb(255 255 255 / 70%);
    font-size: 0.875rem;
    color: var(--bm-slate);
}

/* The whole page, topbar included, while it does something that ends by opening another record
   (Duplicate, Change type). Rendered outside RadzenBody, whose transform would trap a fixed element.
   Above the topbar (1000) and side panels (1100), below Radzen dialogs and popups (2000). */
.bm-busy-overlay.bm-busy-page {
    position: fixed;
    z-index: 1150;
    border-radius: 0;
    font-size: 0.9375rem;
    cursor: progress;
}

/* Under Radzen's dialogs (1001), so a warning or error raised during the work shows above it.
   Same layer as the topbar: render it after the topbar so it covers it. */
.bm-busy-overlay.bm-busy-page.bm-busy-below-dialogs {
    z-index: 1000;
}

@media (max-width: 1100px) {
    .bm-body-fill.rz-body {
        overflow-y: auto;
    }

    .bm-docs {
        grid-template-columns: minmax(0, 1fr);
    }

    .bm-pane {
        max-height: 70vh;
    }
}

/* A subchapter sits under its chapter in the online document's chapter list. */
.bm-element.bm-element-indent {
    margin-left: 1.5rem;
}

/* ---- Side form panel (SidePanel: add/edit forms of the themed lists) ---- */

/* Above the topbar (1000), below Radzen popups (2000) so dropdowns inside the panel still open on top. */
.bm-side-mask {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, 0.32);
}

/* Radzen gives the scrolling body transform: translateZ(0), which turns it into the containing block
   of position: fixed descendants, so an open panel would scroll away with the list. While a panel is
   open the body drops the transform (the panel covers the viewport) and stops scrolling behind it. */
.rz-layout .rz-body:has(.bm-side-mask) {
    transform: none;
    overflow: hidden;
}

.bm-side-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1101;
    width: min(32rem, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--bm-surface);
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.16);
    animation: bm-side-in 180ms ease-out;
}

@keyframes bm-side-in {
    from { transform: translateX(1.5rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bm-side-panel { animation: none; }
}

.bm-side-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--bm-border);
}

.bm-side-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-side-header .bm-hint {
    margin: 0.25rem 0 0;
}

.bm-side-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-side-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--bm-border);
    background: var(--bm-surface-subtle);
}

/* A secondary footer action (SidePanel.FooterStart) sits at the left, apart from Cancel and Save. */
.bm-side-footer-start {
    margin-right: auto;
    display: flex;
    gap: 0.5rem;
}

/* ---- My BM Users: wide read-mode user panel and list cells ---- */

.bm-side-panel.bm-side-panel-wide {
    width: min(56rem, 96vw);
    outline: none;
}

.bm-user-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-user-header-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: -0.5rem -0.75rem 0;
}

.bm-user-header-spacer {
    flex: 1;
}

.bm-user-email {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--bm-slate);
    font-size: 0.875rem;
    word-break: break-all;
}

/* Header facts: four short answers readable without opening a tab. */
.bm-user-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.25rem 0 0;
}

.bm-user-facts dt,
.bm-kv dt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bm-muted);
}

.bm-user-facts dd {
    margin: 0.125rem 0 0;
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-user-facts dd .bm-hint,
.bm-kv dd .bm-hint {
    display: block;
    font-weight: 400;
}

@media (max-width: 720px) {
    .bm-user-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bm-user-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.bm-kv {
    display: grid;
    grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    margin: 0;
}

.bm-kv dt {
    padding-top: 0.125rem;
}

.bm-kv dd {
    margin: 0;
    color: var(--bm-navy);
}

.bm-region-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
}

.bm-region-row-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bm-region-active {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-region-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bm-chip-list.bm-tag-list {
    flex-wrap: wrap;
    gap: 0.25rem;
}

.bm-chip.bm-chip-more {
    background: transparent;
    border: 1px dashed var(--bm-border);
}

.bm-user-orders {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.bm-user-orders th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bm-muted);
    padding: 0.5rem;
    border-bottom: 1px solid var(--bm-border);
}

.bm-user-orders td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bm-canvas-muted);
}

.bm-user-orders .bm-num {
    text-align: right;
    white-space: nowrap;
}

/* The save bar appears only while the Access tab has unsaved edits. */
.bm-side-footer.bm-save-bar {
    align-items: center;
}

.bm-side-footer.bm-save-bar .bm-hint {
    margin-right: auto;
}

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

.bm-user-cell-region {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.125rem 0;
}

.bm-theme .bm-list-grid tr.bm-row-selected > td {
    background: var(--bm-gold-soft);
}

/* ---- Academy Settings ---- */

.bm-settings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Region country picker: a checklist that scrolls inside the side panel. */
.bm-country-list {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    padding: 0.25rem;
}

.bm-country-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
}

.bm-country-item:hover:not(.is-disabled) {
    background: var(--bm-canvas-muted);
}

.bm-country-item.is-disabled {
    opacity: 0.55;
}

.bm-country-item .bm-country-name {
    flex: 1;
    min-width: 0;
}

/* ---- Translation Analysis ---- */

.bm-link {
    color: var(--bm-teal);
    font-weight: 600;
    text-decoration: none;
}

.bm-link:hover {
    text-decoration: underline;
}

.bm-link:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
    border-radius: 4px;
}

.bm-filter-select-wide {
    width: 20rem;
}

.bm-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    white-space: normal;
}

/* Long source/translation text wraps instead of being cut by the grid's single-line cells. */
.bm-cell-wrap {
    white-space: normal;
}

.bm-field-ref {
    font-size: 0.75rem;
}

.bm-tab-footnote {
    margin: 0.5rem 0 0;
}

/* Course × language heatmap: sticky header row and course column so both stay readable while scrolling. */
.bm-heatmap-wrap {
    overflow: auto;
    max-height: calc(100vh - 360px);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: var(--bm-surface);
    box-shadow: var(--bm-shadow-card);
}

.bm-heatmap {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.bm-heatmap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5rem 0.625rem;
    background: var(--bm-surface-subtle);
    border-bottom: 1px solid var(--bm-border);
    color: var(--bm-slate);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.bm-heatmap .bm-heatmap-course {
    position: sticky;
    left: 0;
    min-width: 18rem;
    padding: 0.375rem 0.75rem;
    background: var(--bm-surface);
    border-right: 1px solid var(--bm-border);
    text-align: left;
    font-weight: 400;
}

.bm-heatmap thead .bm-heatmap-course {
    z-index: 2;
    background: var(--bm-surface-subtle);
}

.bm-heatmap .bm-heatmap-course .bm-chip {
    margin-left: 0.25rem;
}

.bm-heat-cell {
    padding: 0.375rem 0.625rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid var(--bm-surface);
    border-right: 1px solid var(--bm-surface);
    font-variant-numeric: tabular-nums;
}

.bm-heat-cell:hover {
    box-shadow: inset 0 0 0 2px var(--bm-navy);
}

.bm-heat-na { background: var(--bm-canvas-muted); color: var(--bm-muted); }
.bm-heat-ready { background: var(--bm-success-soft); color: var(--bm-success); }
.bm-heat-low { background: var(--bm-gold-soft); color: #7a5f2a; }
.bm-heat-mid { background: var(--bm-warning-soft); color: var(--bm-warning); }
.bm-heat-high { background: var(--bm-danger-soft); color: var(--bm-danger); }

/* Long text in a grid cell: two lines at most, the full text in the cell's title tooltip. */
.bm-cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* ---- App home page ---- */

/* The home top bar (HomeTopbar): the shop's name, then the menu sections as dropdowns. */
.bm-home-topbar {
    padding-left: 1.25rem;
}

.bm-home-topbar .bm-topbar-start {
    gap: 1.25rem;
}

.bm-home-topbar .bm-topbar-end {
    flex-shrink: 0;
}

/* The welcome card repeats the shop's name, so a narrow window drops it from the bar first,
   then the person's name, keeping every section heading reachable. */
@media (max-width: 1100px) {
    .bm-home-topbar-shop {
        display: none;
    }
}

@media (max-width: 760px) {
    .bm-home-topbar .bm-user-menu-name {
        display: none;
    }

    .bm-home-nav-button {
        padding: 0 0.375rem 0 0.5rem;
    }
}

/* A phone cannot hold every section heading, so they give way to one Menu button whose panel
   lists the sections (.bm-home-phone-menu). */
.bm-home-phone-menu-button {
    display: none;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.75rem 0 0.5rem;
    border: none;
    border-radius: var(--bm-radius-control);
    background: transparent;
    color: var(--bm-navy);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bm-duration) var(--bm-ease);
}

.bm-home-phone-menu-button:hover,
.bm-home-phone-menu-button[aria-expanded="true"] {
    background: var(--bm-canvas);
}

.bm-home-phone-menu-button:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-home-phone-menu-button .rzi {
    font-size: 1.375rem;
}

@media (max-width: 640px) {
    .bm-home-topbar {
        padding: 0 0.75rem;
    }

    .bm-home-topbar .bm-home-nav {
        display: none;
    }

    .bm-home-phone-menu-button {
        display: inline-flex;
    }
}

/* Drops from the bottom of the bar across the full width; scrolls when a section is taller
   than the screen. */
.bm-home-phone-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--bm-topbar-height));
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.75rem;
    background: var(--bm-surface);
    border-top: 1px solid var(--bm-border);
    box-shadow: 0 12px 32px rgb(22 37 76 / 16%);
    animation: bm-menu-in var(--bm-duration) var(--bm-ease);
}

.bm-home-phone-section + .bm-home-phone-section {
    border-top: 1px solid var(--bm-canvas-muted);
}

.bm-home-phone-section-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0 0.5rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bm-navy);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.bm-home-phone-section-button:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-home-phone-section-icon.rzi {
    font-size: 1.25rem;
    color: #7a5f2a;
}

.bm-home-phone-section-title {
    flex: 1;
}

.bm-home-phone-section-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0 0 0.5rem 1.5rem;
}

.bm-home-phone-section-items .bm-menu-item {
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .bm-home-phone-menu {
        animation: none;
    }
}

.bm-home-topbar-shop {
    flex-shrink: 0;
    max-width: 16rem;
    font-family: var(--bm-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bm-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-home-nav {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.bm-home-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    height: 2.25rem;
    padding: 0 0.5rem 0 0.75rem;
    border: none;
    border-radius: var(--bm-radius-control);
    background: transparent;
    color: var(--bm-navy);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--bm-duration) var(--bm-ease);
}

.bm-home-nav-button:hover,
.bm-home-nav-button-open {
    background: var(--bm-canvas);
}

.bm-home-nav-button:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

/* ---- Top-bar dropdown menus (HomeTopbar sections, UserMenu) ----
   Drawn inside the bar, not at body level: the transparent backdrop under the open panel closes
   it on any outside click, and Escape closes it from the keyboard. */

.bm-menu {
    position: relative;
}

.bm-menu-caret {
    font-size: 1.125rem;
    color: var(--bm-slate);
    transition: transform var(--bm-duration) var(--bm-ease);
}

[aria-expanded="true"] > .bm-menu-caret {
    transform: rotate(180deg);
}

.bm-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
}

.bm-menu-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 14rem;
    max-height: calc(100vh - var(--bm-topbar-height) - 1rem);
    overflow-y: auto;
    padding: 0.375rem;
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(22 37 76 / 16%);
    animation: bm-menu-in var(--bm-duration) var(--bm-ease);
}

.bm-menu-panel-end {
    left: auto;
    right: 0;
}

@keyframes bm-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-menu-panel {
        animation: none;
    }
}

.bm-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bm-navy);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--bm-duration) var(--bm-ease);
}

.bm-menu-item .rzi {
    font-size: 1.125rem;
    color: var(--bm-slate);
}

.bm-menu-item:hover {
    background: var(--bm-canvas);
}

.bm-menu-item:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-menu-item-danger,
.bm-menu-item-danger .rzi {
    color: var(--bm-danger);
}

.bm-menu-item-danger:hover {
    background: var(--bm-danger-soft);
}

/* A group of entries ("Tables", "Utils") under its own heading instead of a fly-out. */
.bm-menu-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.25rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--bm-border);
}

.bm-menu-group-title {
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bm-muted);
}

.bm-menu-separator {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--bm-border);
}

.bm-menu-header {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem 0.625rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--bm-border);
}

.bm-menu-header-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--bm-navy);
}

.bm-menu-header-detail {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

/* ---- User menu (UserMenu) ---- */

.bm-user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.375rem 0 0.25rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--bm-navy);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bm-duration) var(--bm-ease);
}

.bm-user-menu-trigger:hover,
.bm-user-menu-trigger[aria-expanded="true"] {
    background: var(--bm-canvas);
}

.bm-user-menu-trigger:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bm-navy);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bm-avatar .rzi {
    font-size: 1.125rem;
}

.bm-user-menu-name {
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-home-welcome {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 2rem;
    border-radius: var(--bm-radius-panel);
    color: #ffffff;
    background:
        radial-gradient(circle at 92% 18%, rgb(214 191 144 / 35%), transparent 42%),
        linear-gradient(135deg, var(--bm-navy-deep), var(--bm-navy) 60%, #22356a);
    box-shadow: var(--bm-shadow-card);
}

.bm-home-eyebrow {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bm-gold-light);
}

.bm-home-title {
    margin: 0.25rem 0 0;
    font-family: var(--bm-font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}

.bm-home-lead {
    margin: 0.5rem 0 1rem;
    max-width: 62ch;
    color: rgb(255 255 255 / 82%);
}

.bm-home-welcome .bm-chip {
    background: rgb(255 255 255 / 14%);
    color: #ffffff;
}

.bm-home-welcome .bm-chip-gold {
    background: var(--bm-gold-light);
    color: var(--bm-navy-deep);
}

/* min() keeps one card from overflowing a screen narrower than its 22rem minimum. */
.bm-home-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

.bm-home-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bm-home-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--bm-gold-soft);
    color: #7a5f2a;
}

.bm-home-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem;
}

.bm-home-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    background: var(--bm-surface-subtle);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bm-duration) var(--bm-ease), background-color var(--bm-duration) var(--bm-ease);
}

.bm-home-mini-stat:hover {
    border-color: var(--bm-border-strong);
    background: var(--bm-surface);
}

.bm-home-mini-stat-value {
    font-family: var(--bm-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bm-navy);
}

.bm-home-mini-stat-label {
    font-size: 0.75rem;
    color: var(--bm-slate);
}

.bm-home-mini-stat-warning {
    border-color: color-mix(in srgb, var(--bm-warning) 35%, var(--bm-border));
    background: var(--bm-warning-soft);
}

.bm-home-mini-stat-warning .bm-home-mini-stat-value {
    color: var(--bm-warning);
}

.bm-home-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.5rem;
}

.bm-home-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    color: var(--bm-navy);
    cursor: pointer;
    transition: background-color var(--bm-duration) var(--bm-ease), border-color var(--bm-duration) var(--bm-ease),
                transform 100ms var(--bm-ease);
}

.bm-home-tile:hover {
    background: var(--bm-canvas);
    border-color: var(--bm-border);
}

.bm-home-tile:active {
    transform: scale(0.98);
}

.bm-home-tile:focus-visible,
.bm-home-link:focus-visible,
.bm-home-mini-stat:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-home-tile-icon.rzi {
    color: var(--bm-teal);
    font-size: 1.375rem;
}

.bm-home-tile-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.bm-home-tile-title {
    font-weight: 600;
}

.bm-home-tile-description {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-home-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bm-canvas-muted);
}

.bm-home-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bm-muted);
}

.bm-home-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.bm-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--bm-border);
    border-radius: 999px;
    background: var(--bm-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bm-navy);
    cursor: pointer;
    transition: border-color var(--bm-duration) var(--bm-ease), background-color var(--bm-duration) var(--bm-ease);
}

.bm-home-link .rzi {
    font-size: 1rem;
    color: var(--bm-slate);
}

.bm-home-link:hover {
    border-color: var(--bm-border-strong);
    background: var(--bm-canvas);
}

/* Webhooks card: one row per resource, two columns on wide screens */
.bm-home-webhooks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 0.375rem 1.5rem;
}

.bm-home-webhook-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--bm-canvas-muted);
}

.bm-home-webhook-icon.rzi {
    color: var(--bm-teal);
    font-size: 1.125rem;
}

.bm-home-webhook-label {
    font-weight: 600;
    color: var(--bm-navy);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-home-webhook-count {
    min-width: 6rem;
    text-align: right;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--bm-slate);
}

.bm-home-webhook-actions {
    display: flex;
    justify-content: flex-end;
}

/* On a phone the number tiles sit two by two, an odd last tile taking the whole row rather than
   standing alone; the Today strip puts its text on its own line, then the button under it. */
@media (max-width: 640px) {
    .bm-home-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bm-home-mini-stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .bm-home-today .bm-live-text {
        flex-basis: calc(100% - 2rem);
    }

    .bm-home-today .bm-live-strip > .rz-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-home-tile,
    .bm-home-link,
    .bm-home-mini-stat {
        transition: none;
    }

    .bm-home-tile:active {
        transform: none;
    }
}

/* ---- Topbar Back as a link (PageTopbar.BackHref: back to Shopify Admin from the iframe) ---- */

.bm-topbar-back-link {
    text-decoration: none;
}

.bm-topbar-back-link:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

/* ---- App configuration required (Pages/Shared/Components/ShopNotConfiguredNotice) ---- */

.bm-setup {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0 3rem;
    /* Wears .bm-theme for its tokens, but keeps the background of the page around it. */
    background: transparent;
}

.bm-setup-card {
    width: min(36rem, 100%);
    align-items: center;
    text-align: center;
    padding: 2.25rem 2rem 1.75rem;
    gap: 0.875rem;
}

.bm-setup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 2rem;
    background: var(--bm-gold-soft);
    color: var(--bm-gold);
}

.bm-setup-shop .rzi {
    font-size: 0.875rem;
}

.bm-setup-title {
    margin: 0.25rem 0 0;
    font-family: var(--bm-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bm-navy);
}

.bm-setup-lead {
    margin: 0;
    max-width: 44ch;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--bm-slate);
}

.bm-setup-checks {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.bm-setup-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
}

.bm-setup-check-icon {
    font-size: 1.375rem;
    color: var(--bm-border-strong);
}

.bm-setup-check-done .bm-setup-check-icon {
    color: var(--bm-success);
}

.bm-setup-check-label {
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-setup-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bm-setup-help {
    margin-top: 0.25rem;
}

/* ---- SKU Management (Pages/Products/Edit/ExtraProperties) ---- */

/* The decisions take two thirds, the preview of what Save writes one third. */
.bm-sku-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 1100px) {
    .bm-sku-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bm-sku-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 16rem;
}

/* A category option: its name, then its SKU code and barcode prefix as chips. */
.bm-sku-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.bm-sku-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-sku-help {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bm-canvas-muted);
}

.bm-sku-help ul {
    margin: 0;
    padding-left: 1.125rem;
}

.bm-sku-help li + li {
    margin-top: 0.375rem;
}

.bm-sku-variant-noimage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--bm-canvas-muted);
    color: var(--bm-muted);
    font-size: 1.125rem;
}

.bm-sku-formula {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bm-sku-formula + .bm-sku-formula {
    padding-top: 1rem;
    border-top: 1px solid var(--bm-canvas-muted);
}

.bm-sku-formula-value {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    color: var(--bm-navy);
    word-break: break-all;
}

.bm-sku-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--bm-muted);
}

.bm-sku-legend code {
    display: inline-block;
    min-width: 1.5rem;
    margin-right: 0.375rem;
    padding: 0 0.375rem;
    border-radius: 4px;
    background: var(--bm-teal-soft);
    color: #006d78;
    font-weight: 700;
    text-align: center;
}

/* Hints under a checkbox line up with its label, not the box. */
.bm-sku-check-hint {
    margin-left: 1.75rem;
}

/* ---- SKU Management category guide (side panel + Pages/Products/Components/CategoryGuideTree) ---- */

.bm-guide-category {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
}

.bm-guide-category-current {
    border-color: var(--bm-gold-light);
    background: var(--bm-gold-soft);
}

.bm-guide-category-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-guide-category-icon {
    font-size: 1.25rem;
    color: var(--bm-gold);
}

.bm-guide-category-name {
    font-weight: 700;
    color: var(--bm-navy);
}

.bm-guide-type-mark {
    font-size: 1rem;
    color: var(--bm-success);
    vertical-align: text-bottom;
}

.bm-guide-empty {
    margin: 0.375rem 0 0 1.75rem;
    font-style: italic;
}

/* Each level hangs from a line under its parent. */
.bm-guide-tree {
    list-style: none;
    margin: 0.25rem 0 0 0.625rem;
    padding: 0 0 0 1rem;
    border-left: 1px solid var(--bm-border);
}

.bm-guide-node {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.bm-guide-node-icon {
    font-size: 1rem;
    color: var(--bm-teal);
}

.bm-guide-node-name {
    color: var(--bm-slate);
}

/* ---- Sign in and Create account (Pages/Auth/Login, Pages/Auth/Register) ---- */
/* The card reuses the "App configuration required" header (.bm-setup-icon, -title, -lead). */

.bm-auth {
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.bm-auth-card {
    width: min(28rem, 100%);
    align-items: center;
    text-align: center;
    padding: 2.25rem 2rem 1.75rem;
    gap: 0.875rem;
}

.bm-auth-icon-success {
    background: var(--bm-success-soft);
    color: var(--bm-success);
}

.bm-auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
    text-align: left;
}

.bm-auth-validation {
    font-size: 0.8125rem;
    color: var(--bm-danger);
}

/* The eye button sits inside the right edge of the password box. */
.bm-auth-password {
    position: relative;
}

.bm-auth-password .rz-textbox {
    padding-right: 2.75rem;
}

.bm-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--bm-muted);
    cursor: pointer;
}

.bm-auth-password-toggle:hover {
    color: var(--bm-navy);
}

.bm-auth-password-toggle:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-auth-password-toggle .rzi {
    font-size: 1.25rem;
}

.bm-theme .bm-auth-submit {
    width: 100%;
    height: 2.75rem;
    margin-top: 0.25rem;
}

.bm-auth-switch {
    margin-top: 0.25rem;
}

.bm-auth-switch .bm-link-button {
    margin-left: 0.25rem;
}

.bm-auth-notice {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bm-radius-control);
    text-align: left;
    font-size: 0.875rem;
}

.bm-auth-notice p {
    margin: 0.125rem 0 0;
    line-height: 1.45;
}

.bm-auth-notice .rzi {
    font-size: 1.25rem;
}

.bm-auth-notice-error {
    background: var(--bm-danger-soft);
    color: var(--bm-danger);
}

.bm-auth-notice-warning {
    background: var(--bm-warning-soft);
    color: var(--bm-warning);
}

/* ---- Record arrows: previous and next record of the list an editor was opened from
   (lecture page: days of the series; class page: classes of the course it was opened from;
   bhajan editor: rows of the filtered Bhajans list) ---- */

/* Widens the side padding so the fixed arrows sit beside the cards, never on top of them. */
.bm-body-side-nav.rz-body {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
}

.bm-theme .bm-record-nav-button.rz-button.rz-variant-outlined {
    position: fixed;
    top: calc(50% + var(--bm-topbar-height) / 2);
    transform: translateY(-50%);
    z-index: 900;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 999px;
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    box-shadow: var(--bm-shadow-card);
    color: var(--bm-navy);
}

.bm-theme .bm-record-nav-previous.rz-button {
    left: 1rem;
}

/* Further in than the left one: the page's scrollbar runs along the right edge. */
.bm-theme .bm-record-nav-next.rz-button {
    right: 1.5rem;
}

.bm-theme .bm-record-nav-button.rz-button.rz-variant-outlined:hover:not(.rz-state-disabled) {
    background: var(--bm-navy);
    border-color: var(--bm-navy);
    color: #fff;
}

.bm-theme .bm-record-nav-button.rz-button:active:not(.rz-state-disabled) {
    transform: translateY(-50%) scale(0.95);
}

.bm-theme .bm-record-nav-button.rz-button.rz-state-disabled {
    opacity: 0.35;
    box-shadow: none;
}

.bm-theme .bm-record-nav-button.rz-button:focus-visible {
    box-shadow: var(--bm-focus-ring);
}

/* On a phone the gutter would cost too much of the form; the list the record came from still lists every row. */
@media (max-width: 640px) {
    .bm-body-side-nav.rz-body {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .bm-record-nav {
        display: none;
    }
}

/* ---- Atma Bhog: bhajans, the bhajan editor, categories, import & export, feedback (Pages/AtmaBhog) ---- */

.bm-field-error {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bm-danger);
}

.bm-hidden-file-input {
    display: none;
}

.bm-row-name-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bm-row-name-lines .bm-hint {
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-row-thumb-button {
    cursor: zoom-in;
}

/* The selection band is one line of actions, unlike the stacked notices that share .bm-band. */
.bm-band.bm-selection-band {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bm-order-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.bm-order-value {
    min-width: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bm-image-preview {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgb(15 23 42 / 72%);
    cursor: zoom-out;
}

.bm-image-preview img {
    max-width: min(90vw, 48rem);
    max-height: 85vh;
    border-radius: var(--bm-radius-card);
    box-shadow: var(--bm-shadow-card);
}

/* The frame centres its icon with grid; an iframe has its own 300×150 size, so it is stretched explicitly. */
.bm-image-frame iframe {
    place-self: stretch;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Source and preview side by side, the same height, so a line on the left sits beside its result. */
.bm-lyrics-editor {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bm-lyrics-column {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

/* Source and preview share one fixed height so the two sides stay level and a long bhajan
   scrolls inside each box; the textarea is not resizable, since the preview could not follow. */
.bm-theme .bm-lyrics-source.rz-textarea,
.bm-lyrics-preview {
    box-sizing: border-box;
    height: min(40rem, 70vh);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.bm-theme .bm-lyrics-source.rz-textarea {
    width: 100%;
    resize: none;
}

.bm-lyrics-preview {
    padding: 0.75rem 1rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-canvas-muted);
    overflow: auto;
}

.bm-lyrics-preview pre,
.bm-lyrics-text {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.bm-lyrics-text {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    max-height: 24rem;
    overflow: auto;
}

.bm-theme .bm-lyrics-translation.rz-textarea {
    width: 100%;
    min-height: 12rem;
    resize: vertical;
}

@media (max-width: 900px) {
    .bm-lyrics-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bm-export-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.bm-export-row .rz-form-field {
    width: 18rem;
    max-width: 100%;
}

.bm-import-steps {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bm-import-steps > li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-import-steps > li::marker {
    font-weight: 600;
    color: var(--bm-slate);
}

.bm-import-step-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-import-result {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--bm-radius-card);
    background: var(--bm-success-soft);
    border: 1px solid var(--bm-success-soft);
}

.bm-import-result.bm-import-result-error {
    background: var(--bm-danger-soft);
    border-color: var(--bm-danger-soft);
}

.bm-change-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.bm-change-table th,
.bm-change-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bm-canvas-muted);
    vertical-align: top;
    text-align: left;
}

.bm-change-table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bm-slate);
}

.bm-change-field {
    width: 8rem;
    font-weight: 600;
}

.bm-change-arrow {
    width: 2rem;
    color: var(--bm-muted);
}

.bm-change-value {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 18rem;
    overflow: auto;
}

.bm-change-value-new {
    color: var(--bm-success);
}

.bm-change-none {
    padding: 0.75rem 1rem;
}

.bm-feedback-message {
    padding: 1rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-canvas-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.bm-receipt-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

/* The Feedback read panel stays open beside the list while the operator triages, so it has no mask, sits
   under the topbar and below dialogs, and the body leaves room for it on wide screens. */
.bm-side-panel.bm-side-panel-docked {
    top: var(--bm-topbar-height);
    z-index: 900;
    width: min(36rem, 45vw);
}

.bm-body-docked-panel.rz-body {
    padding-right: calc(min(36rem, 45vw) + 1.5rem);
}

/* Below this width the list would be too narrow beside the panel, so the panel covers it instead. */
@media (max-width: 1100px) {
    .bm-side-panel.bm-side-panel-docked {
        width: min(36rem, 92vw);
    }

    .bm-body-docked-panel.rz-body {
        padding-right: 1.5rem;
    }
}

/* ---- Product Categories: the subcategory tree of an expanded category (Pages/Products/Config/ProductCategories) ---- */

.bm-category-tree {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem 2.5rem;
}

/* Depth is set as data-depth by the code-behind; product subcategories go four levels deep. */
.bm-category-tree-row[data-depth="1"] { margin-left: 1.5rem; }
.bm-category-tree-row[data-depth="2"] { margin-left: 3rem; }
.bm-category-tree-row[data-depth="3"] { margin-left: 4.5rem; }
.bm-category-tree-row[data-depth="4"],
.bm-category-tree-row[data-depth="5"],
.bm-category-tree-row[data-depth="6"] { margin-left: 6rem; }

.bm-category-tree-spacer {
    width: 1.75rem;
    flex-shrink: 0;
}

.bm-category-tree-icon.rzi {
    font-size: 1.125rem;
    color: var(--bm-muted);
}

/* ---- Shops Admin: the shop grid and the shop side panel (Pages/Settings/ShopsAdmin, Components/ShopAdminDetailsPanel) ---- */

.bm-shops-name {
    display: block;
}

.bm-shops-actions {
    justify-content: center;
    align-items: center;
}

.bm-shops-open-link {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--bm-radius-control);
    color: var(--bm-slate);
}

.bm-shops-open-link:hover,
.bm-shops-open-link:focus-visible {
    color: var(--bm-navy);
    background: var(--bm-surface-subtle);
}

.bm-shops-open-link:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-shops-open-link .rzi {
    font-size: 1.125rem;
}

/* The themed side dialog has no padding of its own. */
.bm-shop-panel {
    padding: 0 1.25rem 1.25rem;
}

.bm-shop-panel-group {
    gap: 0.5rem;
}

.bm-shop-panel-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.bm-shop-panel-icon.rzi {
    color: var(--bm-slate);
    flex-shrink: 0;
}

.bm-list-row-text .bm-hint.bm-shop-panel-status {
    white-space: normal;
    overflow-wrap: anywhere;
}

.bm-shop-panel-installed {
    color: var(--rz-success);
    font-weight: 600;
}

.bm-shop-panel-missing {
    color: var(--rz-danger);
    font-weight: 600;
}

/* ---- Scheduler: service status card, job and history grids, panels (Pages/Settings/Scheduler) ---- */

.bm-scheduler-tab-inactive {
    color: var(--bm-muted);
}

.bm-scheduler-status {
    border-left: 4px solid var(--bm-success);
}

.bm-scheduler-status.bm-scheduler-status-paused {
    border-left-color: var(--bm-gold);
}

.bm-scheduler-status.bm-scheduler-status-inactive {
    border-left-color: var(--bm-border-strong);
}

.bm-scheduler-status-text {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.bm-scheduler-status-text .bm-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bm-scheduler-status-icon.rzi {
    font-size: 1.75rem;
    color: var(--bm-success);
}

.bm-scheduler-status-paused .bm-scheduler-status-icon.rzi {
    color: var(--bm-gold);
}

.bm-scheduler-status-inactive .bm-scheduler-status-icon.rzi {
    color: var(--bm-muted);
}

/* The service key is text, not a number, so it is set smaller than the other stat values. */
.bm-stat-value.bm-scheduler-stat-text {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.bm-scheduler-cron {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.bm-scheduler-date-filter {
    width: 10rem;
}

.bm-scheduler-group {
    gap: 0.5rem;
}

.bm-scheduler-cron-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bm-scheduler-cron-fields:empty {
    display: none;
}

.bm-scheduler-cron-fields .rz-form-field {
    width: 9rem;
}

.bm-scheduler-parameter-hint {
    margin-top: 0.25rem;
}

.bm-scheduler-description {
    white-space: pre-line;
}

.bm-scheduler-detail {
    padding: 0.75rem 1rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-canvas-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.bm-scheduler-pre,
.bm-scheduler-json {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-canvas-muted);
    max-height: 24rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
}

.bm-scheduler-pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.bm-scheduler-pre.bm-scheduler-pre-error {
    background: var(--bm-danger-soft);
    border-color: var(--bm-danger-soft);
    color: var(--bm-danger);
}

/* Classes emitted by Scheduler.FormatJsonAsHtml. */
.bm-scheduler-json .json-key { color: #0550ae; font-weight: 600; }
.bm-scheduler-json .json-string { color: #0a3069; }
.bm-scheduler-json .json-number { color: #0550ae; }
.bm-scheduler-json .json-boolean { color: #cf222e; font-weight: 600; }
.bm-scheduler-json .json-null { color: #6e7781; font-style: italic; }
.bm-scheduler-json .json-object,
.bm-scheduler-json .json-array { margin-left: 1.25rem; }
.bm-scheduler-json .json-item { padding: 0.125rem 0; }

/* ---- Product checks: shared codes and inline fixes (Pages/ManagmentTools: DuplicateChecker, ProductChecker) ---- */

/* The shared code and its variant count, side by side in a group card's title. */
.bm-checker-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.bm-checker-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

/* A variant still on the shared code: quiet, so the regenerated ones stand out. */
.bm-checker-keep {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

/* An inline editor in a grid cell: the field takes the room, the save button sits at its end. */
.bm-checker-edit {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.bm-checker-edit > .rz-textbox,
.bm-checker-edit > .rz-numeric {
    flex: 1 1 auto;
    min-width: 0;
}

/* The running count while every Shopify category is being cleared: spinner and text on one line. */
.bm-band.bm-checker-progress {
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
}

/* ---- Settings: card grids, restock grids and operation rows (Pages/Settings/Settings + its panels) ---- */

.bm-settings-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    align-items: start;
}

.bm-settings-switches {
    gap: 0.5rem;
}

/* The metaobject topics need room for their definition lists, so the card spans the whole grid. */
.bm-settings-metaobjects {
    margin-top: 1rem;
}

.bm-settings-metaobject-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

@media (max-width: 640px) {
    .bm-settings-metaobject-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bm-settings-metaobject-translation {
    padding-top: 1rem;
    border-top: 1px solid var(--bm-canvas-muted);
}

.bm-settings-import {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.bm-settings-import .form-control {
    flex: 1 1 18rem;
    width: auto;
}

.bm-settings-starting-point {
    width: 22rem;
    max-width: 100%;
}

.bm-settings-product {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.bm-settings-thumb {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    object-fit: cover;
    border-radius: 6px;
    cursor: zoom-in;
}

.bm-settings-thumb-empty.rzi {
    width: 2.25rem;
    flex: none;
    text-align: center;
    color: var(--bm-muted);
}

.bm-settings-op-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.bm-settings-op-field {
    flex: 1 1 14rem;
    min-width: 0;
}

/* ---- Replay trim editor (lecture Replay tab) ----
   Player on the whole recording above a timeline: grey hatched parts are cut from the replay, the
   navy upper lane is the replay and the gold lower lane its preview. The playhead and the drag ghost
   are positioned by js/replay-trim-editor.js; everything else by the component. */

.bm-trim {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-trim-stage {
    position: relative;
    background: var(--bm-navy-deep);
    border-radius: var(--bm-radius-card);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
}

.bm-trim-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bm-trim-stage-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    color: var(--bm-gold-light);
    font-size: 0.875rem;
    pointer-events: none;
}

.bm-trim-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bm-trim-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--bm-slate);
}

.bm-trim-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.bm-trim-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    flex: none;
}

.bm-trim-swatch.is-cut {
    background: repeating-linear-gradient(135deg, var(--bm-canvas-muted) 0 3px, var(--bm-border) 3px 6px);
}

.bm-trim-swatch.is-replay { background: var(--bm-navy); }
.bm-trim-swatch.is-preview { background: var(--bm-gold); }

.bm-trim-track {
    position: relative;
    height: 3.25rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-border);
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.bm-trim-cut {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg, var(--bm-canvas-muted) 0 6px, var(--bm-border) 6px 12px);
    opacity: 0.8;
}

.bm-trim-band {
    position: absolute;
    border-radius: 4px;
}

.bm-trim-band.is-replay {
    top: 0.25rem;
    height: 1.375rem;
    background: var(--bm-navy);
}

.bm-trim-band.is-preview {
    bottom: 0.25rem;
    height: 1rem;
    background: var(--bm-gold);
}

.bm-trim-band.is-preview.is-off {
    background: repeating-linear-gradient(135deg, var(--bm-gold-soft) 0 4px, var(--bm-gold-light) 4px 8px);
}

.bm-trim-handle {
    position: absolute;
    width: 0.875rem;
    margin-left: -0.4375rem;
    padding: 0;
    border: 2px solid var(--bm-surface);
    border-radius: 4px;
    cursor: ew-resize;
    z-index: 2;
    box-shadow: 0 1px 3px rgb(22 37 76 / 35%);
}

.bm-trim-handle:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-trim-handle.is-replay {
    top: -0.125rem;
    height: 1.875rem;
    background: var(--bm-navy);
}

.bm-trim-handle.is-preview {
    bottom: 0;
    height: 1.5rem;
    background: var(--bm-gold);
}

.bm-trim-playhead {
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    left: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--bm-live);
    pointer-events: none;
    z-index: 3;
}

.bm-trim-ghost {
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    width: 2px;
    margin-left: -1px;
    background: var(--bm-teal);
    pointer-events: none;
    z-index: 4;
    display: none;
}

.bm-trim-ghost.is-visible {
    display: block;
}

.bm-trim-ghost span {
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    background: var(--bm-teal);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bm-trim-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--bm-muted);
    font-variant-numeric: tabular-nums;
}

.bm-trim-scale strong {
    color: var(--bm-navy);
}

.bm-trim-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bm-border);
}

.bm-trim-row-header {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.bm-trim-row-header .bm-trim-swatch {
    margin-top: 0.3rem;
}

.bm-trim-row-text {
    flex: 1;
    min-width: 0;
}

.bm-trim-row-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

.bm-trim-length {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bm-slate);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bm-trim-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.bm-trim-field {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.bm-trim-field .rz-form-field {
    width: 8.5rem;
}

.bm-trim-notice {
    padding: 0.625rem 0.875rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-gold-soft);
    color: var(--bm-warning);
    font-size: 0.8125rem;
}

.bm-trim-notice.is-error {
    background: var(--bm-danger-soft);
    color: var(--bm-danger);
}

/* ---- Bhakti+ content editor (Pages/MediaPlatform/Content) ---- */

/* RadzenHtmlEditor has no height of its own; the description gets room, a group's a little less. */
.bm-theme .bm-html-editor {
    height: 300px;
    width: 100%;
}

.bm-theme .bm-html-editor.bm-html-editor-short {
    height: 200px;
}

/* A band that has to be read before going on, e.g. what stops a content from being published. */
.bm-band.bm-band-warning {
    background: var(--bm-warning-soft);
    border-color: rgb(122 82 0 / 22%);
    color: var(--bm-warning);
}

/* A band about something lost for good, e.g. counts closed without being sent to Shopify. */
.bm-band.bm-band-danger {
    background: var(--bm-danger-soft);
    border-color: rgb(154 30 54 / 22%);
    color: var(--bm-danger);
}

.bm-band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bm-band-head > .rz-button {
    flex: none;
}

.bm-band-list {
    margin: 0;
    padding-left: 1.25rem;
}

/* ---- "…" menus (ContextMenuService) ----
   Row and header menus render at body level. A destructive entry passes
   IconColor = "var(--bm-danger)", which also colours its text here. */

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-menu:not(.rz-profile-menu) {
    min-width: 13rem;
    padding: 0.375rem;
    gap: 0.125rem;
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(22 37 76 / 16%);
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper {
    border-radius: 8px;
    transition: background var(--bm-duration) var(--bm-ease);
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link {
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    color: var(--bm-navy);
    font-size: 0.875rem;
    font-weight: 500;
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi {
    font-size: 1.125rem;
    color: var(--bm-slate);
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover {
    background: var(--bm-canvas);
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
    color: var(--bm-navy);
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-navigation-item-link:has(.rzi[style*="--bm-danger"]) {
    color: var(--bm-danger);
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:has(.rzi[style*="--bm-danger"]):hover {
    background: var(--bm-danger-soft);
}

body:has(.rz-layout.bm-theme) .rz-context-menu .rz-navigation-item.rz-state-disabled,
body:has(.rz-layout.bm-theme) .rz-context-menu .rz-state-disabled .rz-navigation-item-link {
    opacity: 0.45;
}

/* ---- Bhakti+ image slots and picker (Pages/MediaPlatform/Components/BhaktiPlusImageSlot, BhaktiPlusImageDialog) ---- */

.bm-image-slots {
    display: grid;
    gap: 1rem;
}

/* The empty slot is the button that opens the picker, shaped like the image it waits for. */
.bm-image-empty {
    aspect-ratio: 16 / 9;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 2px dashed var(--bm-border);
    border-radius: 12px;
    background: var(--bm-surface-subtle);
    color: var(--bm-slate);
    font: 600 0.875rem var(--bm-font-body);
    cursor: pointer;
    transition: border-color var(--bm-duration) var(--bm-ease), background var(--bm-duration) var(--bm-ease);
}

.bm-image-empty:hover:not(:disabled),
.bm-image-empty:focus-visible {
    border-color: var(--bm-gold);
    background: var(--bm-gold-soft);
    color: var(--bm-navy);
}

.bm-image-empty .rzi {
    font-size: 1.75rem;
}

.bm-image-frame.bm-image-editable {
    position: relative;
}

/* The actions show on hover and on keyboard focus; on a touch screen they always show. */
.bm-image-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: rgb(255 255 255 / 92%);
    box-shadow: var(--bm-shadow-card);
    opacity: 0;
    transition: opacity var(--bm-duration) var(--bm-ease);
}

.bm-image-editable:hover .bm-image-actions,
.bm-image-editable:focus-within .bm-image-actions {
    opacity: 1;
}

@media (hover: none) {
    .bm-image-actions {
        opacity: 1;
    }
}

.bm-image-frame-portrait,
.bm-image-empty.bm-image-frame-portrait {
    aspect-ratio: 2 / 3;
    max-width: 11rem;
}

/* Title artwork keeps its transparency and its whole lettering: shown on a dark ground, never cropped. */
.bm-image-frame.bm-image-frame-artwork {
    aspect-ratio: 3 / 1;
    background: var(--bm-navy-deep);
    border-color: var(--bm-navy);
}

.bm-image-frame.bm-image-frame-artwork img {
    object-fit: contain;
    padding: 0.75rem;
}

.bm-image-empty.bm-image-frame-artwork {
    aspect-ratio: 3 / 1;
}

.bm-image-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 30rem;
}

.bm-image-dialog-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 20rem;
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
}

.bm-image-dialog-icon.rzi {
    font-size: 3.5rem;
    color: var(--bm-border-strong);
}

.bm-image-dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.bm-image-library {
    max-height: 26rem;
    overflow-y: auto;
}

.bm-image-library-item {
    width: 9.5rem;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: 10px;
    background: var(--bm-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--bm-duration) var(--bm-ease), box-shadow var(--bm-duration) var(--bm-ease);
}

.bm-image-library-item:hover,
.bm-image-library-item:focus-visible {
    border-color: var(--bm-gold);
    box-shadow: var(--bm-shadow-card);
}

.bm-image-library-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bm-image-library-item span {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: var(--bm-slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Bhakti+ days (Pages/MediaPlatform/Content, Videos tab) ----
   The days of a series on the left; the picked day's texts and videos in one panel beside them,
   so every field reads as part of that day. */

.bm-days {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Every day is listed: the list grows with the series instead of scrolling inside the page. */
.bm-days-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bm-days-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.125rem 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: var(--bm-font-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--bm-duration) var(--bm-ease), border-color var(--bm-duration) var(--bm-ease);
}

.bm-days-item:hover {
    background: var(--bm-canvas);
}

.bm-days-item.is-selected {
    background: var(--bm-gold-soft);
    border-color: var(--bm-gold-light);
}

.bm-days-item-name {
    font-weight: 700;
    color: var(--bm-navy);
    font-size: 0.875rem;
}

.bm-days-item-count {
    font-size: 0.75rem;
    color: var(--bm-muted);
    align-self: center;
}

.bm-days-item .bm-video-thumb {
    grid-row: 1 / span 2;
}

.bm-days-item-title {
    grid-column: 2 / -1;
    font-size: 0.8125rem;
    color: var(--bm-slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-day-panel {
    border: 1px solid var(--bm-border);
    border-left: 4px solid var(--bm-gold);
    border-radius: var(--bm-radius-card);
    background: var(--bm-surface-subtle);
    overflow: hidden;
}

.bm-day-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--bm-border);
    background: var(--bm-surface);
}

.bm-day-panel-heading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.bm-day-panel-title {
    margin: 0;
    font-size: 1rem;
    color: var(--bm-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-day-panel-section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
}

.bm-day-panel-section + .bm-day-panel-section {
    border-top: 1px solid var(--bm-border);
}

.bm-day-panel-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bm-day-video {
    cursor: pointer;
    background: var(--bm-surface);
}

.bm-day-video:hover,
.bm-day-video:focus-visible {
    border-color: var(--bm-gold-light);
}

.bm-day-video .bm-video-thumb {
    width: 5rem;
}

/* A video's still (VideoThumbnail): 16:9, or a placeholder when the video has none yet. */
.bm-video-thumb {
    width: 4rem;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--bm-border);
    object-fit: cover;
    background: var(--bm-canvas);
}

.bm-video-thumb.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bm-muted);
}

.bm-video-thumb.is-empty .rzi {
    font-size: 1.125rem;
}

@media (max-width: 900px) {
    .bm-days {
        grid-template-columns: 1fr;
    }

    .bm-days-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .bm-days-item {
        min-width: 10rem;
    }
}

/* ---- Bhakti+ video editor (Pages/MediaPlatform/Components/VideoEdit) ----
   The player and its timeline on the left, in view whatever tab is open; the fields in tabs beside it.
   The ids videoPlayer and timeline-track and the timeline-* / chapter-* classes are read by
   hls-player.js and VideoEdit's timeline maths, so keep their names. */

.bm-video-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-video-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bm-border);
}

.bm-video-head-facts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.bm-video-workspace {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 1rem;
    align-items: start;
}

/* The left column holds the player card. It stretches to the fields' height so the player card can
   stay in view while they scroll. */
.bm-video-side {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-video-stage {
    position: sticky;
    top: 0.5rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The chapter panel (VideoEdit): one chapter with its own Save, docked beside the player in place of
   the tabs. The gold edge matches the days panel, as both hold one item of a list. */
.bm-chapter-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-left: 4px solid var(--bm-gold);
    overflow: hidden;
}

.bm-chapter-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--bm-border);
}

.bm-chapter-panel-header .bm-card-title {
    margin: 0;
}

.bm-chapter-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.bm-chapter-panel-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bm-border);
    background: var(--bm-surface);
}

/* Details tab: the Basics section (2/3) and the Thumbnail section (1/3) side by side, equally tall;
   the thumbnail drops under Basics when the column is narrow. The section heading names the image,
   so the slot's own label is only kept for screen readers. */
.bm-video-basics {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.bm-video-thumb-section .bm-image-slot > .bm-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 1400px) {
    .bm-video-basics {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bm-video-player video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
    border-radius: 12px;
}

.bm-video-noplayer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    aspect-ratio: 16 / 9;
    justify-content: center;
}

.bm-video-noplayer .rzi {
    font-size: 2.5rem;
    color: var(--bm-border-strong);
}

.bm-video-stage-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bm-video-stage-bar .bm-card-actions {
    margin-left: auto;
}

.bm-video-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--bm-navy);
}

.bm-video-source {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-video-fields {
    min-width: 0;
}

.bm-video-narrow-field {
    max-width: 14rem;
}

.bm-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    background: var(--bm-surface);
}

.bm-form-section-title {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bm-navy);
}

.bm-chapter-form {
    border-left: 4px solid var(--bm-gold);
}

.bm-chapter-still {
    max-width: 20rem;
}

.bm-list-row.is-selected {
    border-color: var(--bm-gold-light);
    background: var(--bm-gold-soft);
}

.bm-video-copy-preview {
    margin: 0;
    padding: 0.75rem;
    max-height: 13rem;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    background: var(--bm-surface-subtle);
    border: 1px solid var(--bm-border);
    border-radius: 8px;
}

/* Chapter strip: the playhead in navy, the chapter being edited in gold. Tall enough for the stills
   to be recognised; the replay's edges are drawn by the lane above it. */
.bm-video-stage .chapter-timeline {
    width: 100%;
}

.bm-video-stage .timeline-container {
    position: relative;
    width: 100%;
    height: 5rem;
    margin-top: 0.5rem;
    background: var(--bm-canvas-muted);
    border-radius: 8px;
}

.bm-video-stage .timeline-track {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.bm-video-stage .chapter-marker {
    position: absolute;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--bm-gold-light);
    border-radius: 6px;
    background: var(--bm-gold-soft);
}

.bm-video-stage .chapter-marker:hover {
    border-color: var(--bm-gold);
    z-index: 1;
}

.bm-video-stage .chapter-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.bm-video-stage .chapter-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.125rem 0.5rem;
    border-radius: 6px;
    background: var(--bm-navy);
    color: #fff;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.bm-video-stage .chapter-marker:hover .chapter-tooltip {
    opacity: 1;
}

.bm-video-stage :is(.timeline-progress, .timeline-start-marker, .timeline-end-marker) {
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    width: 2px;
    z-index: 2;
    pointer-events: none;
}

.bm-video-stage .timeline-progress { background: var(--bm-navy); }
.bm-video-stage :is(.timeline-start-marker, .timeline-end-marker) { background: var(--bm-gold); width: 3px; }


/* Source tab: the replay and the preview get a lane of their own (the Academy replay editor's
   bm-trim-track) above the chapter strip, both on the whole-recording scale. */
.bm-video-stage .bm-video-trim-lane {
    margin-top: 0.75rem;
}

.bm-video-stage .bm-video-trim-lane + .chapter-timeline .timeline-container {
    margin-top: 0.5rem;
}

.bm-video-stage .bm-trim-band,
.bm-video-stage .bm-trim-cut {
    pointer-events: none;
}

.bm-video-editor .ai-suggestion-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-left: 3px solid var(--bm-teal);
    border-radius: 6px;
    background: var(--bm-teal-soft);
    font-size: 0.8125rem;
}

.bm-video-editor .ai-suggestion-label {
    font-weight: 700;
    color: var(--bm-teal);
}

.bm-video-editor .ai-suggestion-text {
    flex: 1;
    font-style: italic;
    color: var(--bm-navy);
    white-space: pre-wrap;
    word-break: break-word;
}

.bm-video-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgb(4 18 54 / 45%);
}

.bm-video-modal.rz-card {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(26rem, 92vw);
    max-height: 90vh;
    overflow: auto;
    transform: translate(-50%, -50%);
    z-index: 1100;
    border-radius: var(--bm-radius-card);
}

.bm-video-modal-head h3 {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--bm-navy);
}

@media (max-width: 1100px) {
    .bm-video-workspace {
        grid-template-columns: 1fr;
    }

    .bm-video-stage {
        position: static;
    }
}

/* ---- Child rows under an expanded grid row (Pages/MediaPlatform/Tables/Categories: the topics of a category) ---- */

.bm-row-children {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem 2.5rem;
}

.bm-row-children-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Variants under a product (Pages/Products/Components/ProductsVariantsTable): indented past the product's
   tick box and set off by a line, so they read as details of the product and not as the next product. */
.bm-row-children.bm-row-children-indented {
    margin-left: 3.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--bm-border);
}

/* ---- Content validation checks (Pages/MediaPlatform/ValidationDashboard, Components/ValidationResultTree) ---- */

.bm-validation-tree {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bm-validation-result {
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface);
}

.bm-validation-result.is-passed {
    border-left-color: var(--bm-success);
    background: var(--bm-success-soft);
}

.bm-validation-result.is-error {
    border-left-color: var(--bm-danger);
    background: var(--bm-danger-soft);
}

.bm-validation-result.is-warning {
    border-left-color: var(--bm-warning);
    background: var(--bm-warning-soft);
}

.bm-validation-result.is-info {
    border-left-color: var(--bm-teal);
    background: var(--bm-teal-soft);
}

.bm-validation-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bm-validation-icon {
    font-size: 1.125rem;
}

.is-passed > .bm-validation-head .bm-validation-icon { color: var(--bm-success); }
.is-error > .bm-validation-head .bm-validation-icon { color: var(--bm-danger); }
.is-warning > .bm-validation-head .bm-validation-icon { color: var(--bm-warning); }
.is-info > .bm-validation-head .bm-validation-icon { color: var(--bm-teal); }

.bm-validation-category {
    font-weight: 600;
    color: var(--bm-slate);
}

.bm-validation-check {
    font-weight: 500;
    color: var(--bm-navy);
}

.bm-validation-details,
.bm-validation-instructions {
    margin-top: 0.25rem;
    color: var(--bm-slate);
    font-size: 0.875rem;
    line-height: 1.4;
}

.bm-validation-instructions {
    font-style: italic;
}

/* Sub-checks sit under their parent check, indented along a guide line. */
.bm-validation-children {
    margin-top: 0.375rem;
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--bm-border);
}

/* ---- Dialog content: body, loading state and footer of a centred Radzen dialog's own markup ---- */

.bm-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-dialog-body > p {
    margin: 0;
}

.bm-dialog-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--bm-slate);
}

.bm-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bm-border);
}

/* Destructive and secondary actions on the left, Cancel and the main action on the right. */
.bm-dialog-footer-split {
    justify-content: space-between;
}

.bm-dialog-footer-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---- Media library thumbnails and dialogs (Pages/Shared/MediaLibrary: Thumbnail, Edit, Duplicates, Unused) ---- */

.media-library-thumb {
    width: 90px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bm-canvas-muted);
}

.media-library-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.media-library-thumb img,
.media-library-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-library-thumb-placeholder,
.bm-media-edit-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bm-slate);
}

.media-library-thumb-placeholder .rzi {
    font-size: 2rem;
}

.media-library-thumb-placeholder.is-youtube,
.bm-media-edit-placeholder.is-youtube {
    color: var(--bm-live);
}

/* Find Duplicates and Find Unused: one row per media, in groups for duplicates. */
.bm-media-check-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: var(--bm-surface);
}

.bm-media-check-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bm-media-check-icon {
    font-size: 1.25rem;
    color: var(--bm-slate);
}

.bm-media-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-media-check-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
}

.bm-media-check-row-pick {
    grid-template-columns: 36px 90px minmax(0, 1fr);
}

.bm-media-check-row.is-keeper {
    border-color: var(--bm-success);
    background: var(--bm-success-soft);
}

.bm-media-check-row.is-resolved {
    opacity: 0.65;
}

.bm-media-check-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bm-media-check-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bm-navy);
    cursor: pointer;
}

.bm-media-check-meta {
    min-width: 0;
}

.bm-media-check-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-media-check-path a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--bm-teal);
    text-decoration: none;
}

.bm-media-check-path a:hover {
    text-decoration: underline;
}

.bm-media-check-alert {
    margin: 0.25rem 0 0 !important;
    padding: 0.4rem 0.6rem !important;
}

.bm-media-check-done {
    font-size: 0.8125rem;
    color: var(--bm-success);
}

.bm-media-check-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Media edit dialog: the preview beside the name and file facts, then where it is used. */
.bm-media-edit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 720px) {
    .bm-media-edit {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bm-media-edit-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    overflow: hidden;
    border-radius: var(--bm-radius-control);
    background: var(--bm-canvas-muted);
}

.bm-media-edit-preview-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.bm-media-edit-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bm-navy-deep);
}

.bm-media-edit-placeholder .rzi {
    font-size: 4rem;
}

.bm-media-edit-path {
    word-break: break-all;
    color: var(--bm-teal);
    text-decoration: none;
}

.bm-media-edit-path .rzi,
.bm-media-usage-link .rzi {
    font-size: 0.875rem;
    vertical-align: middle;
}

.bm-media-usage {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
}

.bm-media-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bm-media-usage-head .bm-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bm-media-usage-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.bm-media-usage-group {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface);
}

.bm-media-usage-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.bm-media-usage-group-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bm-navy);
}

/* A long list scrolls inside its group so the dialog keeps its footer in view. */
.bm-media-usage-list {
    max-height: 140px;
    margin: 0;
    padding-left: 1.1rem;
    overflow-y: auto;
    font-size: 0.8125rem;
    color: var(--bm-navy);
}

.bm-media-usage-list li {
    margin-bottom: 0.15rem;
    line-height: 1.3;
}

.bm-media-usage-link {
    color: var(--bm-teal);
    text-decoration: none;
}

.bm-media-usage-link:hover {
    text-decoration: underline;
}

/* ---- AI translation jobs (Pages/Settings/TranslationJobs) ---- */

/* A date filter in a filter bar, narrower than a dropdown filter. */
.bm-filter-date {
    width: 10rem;
}

/* An alert's message with its action at the far end. */
.bm-alert-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.bm-job-progress {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bm-job-progress .rz-progressbar {
    height: 6px;
}

/* Source and error text of an item: kept short in the row, scrolls when it is long. */
.bm-job-text {
    display: block;
    max-height: 4.5em;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.8125rem;
    color: var(--bm-navy);
}

.bm-job-text.is-error,
.bm-job-error {
    color: var(--bm-danger);
}

.bm-job-error {
    padding: 0.75rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-danger-soft);
    white-space: pre-wrap;
    font-size: 0.8125rem;
}

/* ---- Live Manager lists, thumbnails and pick dialog (Pages/LiveManager/Components) ---- */

.bm-live-thumb {
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
}

.bm-live-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bm-canvas-muted);
    color: var(--bm-border-strong);
}

.bm-live-current {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bm-live-current-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.875rem;
    color: var(--bm-navy);
}

.bm-live-current-name {
    font-size: 1.125rem;
    font-weight: 600;
}

/* One live per row, separated by a rule: the name on the left, its inputs and actions on the right. */
.bm-live-rows {
    display: flex;
    flex-direction: column;
}

.bm-live-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--bm-border);
}

.bm-live-row-main {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.bm-live-row-text {
    gap: 0.15rem;
}

.bm-live-row-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-live-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bm-live-input-id {
    width: 7.5rem;
}

.bm-live-input-offset {
    width: 8.75rem;
}

.bm-live-input-time {
    width: 7rem;
}

.bm-live-ended {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bm-warning);
}

.bm-live-ended .rzi {
    font-size: 0.875rem;
}

.bm-live-warning-icon {
    font-size: 1.1rem;
    color: var(--bm-warning);
}

/* A square icon-only button beside labelled small buttons. */
.bm-theme .bm-icon-button.rz-button,
.rz-dialog .bm-icon-button.rz-button {
    width: 2rem;
    min-width: 2rem;
}

/* A checkbox and its label on one line, among other inline controls. */
.bm-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* A list of choices in a dialog where the whole row is clicked to choose it. */
.bm-pick-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.bm-pick-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bm-pick-item:hover {
    border-color: var(--bm-border-strong);
}

.bm-pick-item:focus-visible {
    outline: 2px solid var(--bm-navy);
    outline-offset: 2px;
}

.bm-pick-item.is-selected {
    border: 2px solid var(--bm-navy);
    padding: calc(0.75rem - 1px);
    background: var(--bm-surface-subtle);
}

/* ---- Month schedules (MediaPlatform/Components: DailySatsangsTab, LiveScheduleTab) ---- */

/* Previous month, month, year, next month: one control group at the start of the filter bar. */
.bm-month-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.bm-month-select {
    width: 9.5rem;
}

.bm-month-year {
    width: 6.5rem;
}

/* A row name that opens its record, drawn as plain text until hovered. */
.bm-row-open {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bm-row-open:hover .bm-row-name-text,
.bm-row-open:focus-visible .bm-row-name-text {
    color: var(--bm-navy);
    text-decoration: underline;
}

.bm-row-open:focus-visible {
    outline: 2px solid var(--bm-navy);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Live content form and thumbnail upload (MediaPlatform/Components: LiveContentFormFields, ThumbnailUpload) ---- */

.bm-live-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bm-live-form .rz-form-field,
.bm-live-form .rz-form-field .rz-textbox,
.bm-live-form .rz-form-field .rz-textarea,
.bm-live-form .rz-form-field .rz-dropdown,
.bm-live-form .rz-form-field .rz-multiselect,
.bm-live-form .rz-form-field .rz-lookup-panel,
.bm-live-form .rz-form-field .rz-numeric {
    width: 100%;
}

/* The VOD id and offsets are short numbers, side by side. */
.bm-live-form .bm-live-vod-field.rz-form-field {
    width: 10rem;
}

.bm-live-form > .bm-label {
    margin-bottom: -0.5rem;
}

.bm-live-form-editor.rz-html-editor {
    width: 100%;
    height: 250px;
}

.bm-thumb-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-thumb-upload-url.rz-textbox {
    width: 100%;
}

.bm-thumb-upload-actions {
    justify-content: flex-start;
}

/* Category images to reuse: small cards, the chosen one outlined in navy. */
.bm-thumb-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-thumb-choice {
    display: flex;
    flex-direction: column;
    width: 120px;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.bm-thumb-choice:hover {
    border-color: var(--bm-border-strong);
}

.bm-thumb-choice:focus-visible {
    outline: 2px solid var(--bm-navy);
    outline-offset: 2px;
}

.bm-thumb-choice.is-selected {
    border-color: var(--bm-navy);
}

.bm-thumb-choice img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.bm-thumb-choice span {
    padding: 0.25rem 0.375rem;
    overflow: hidden;
    font-size: 0.75rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-thumb-preview {
    position: relative;
    max-width: 280px;
    margin-top: 0.25rem;
}

.bm-thumb-preview img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
}

.bm-thumb-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 280px;
    height: 80px;
    margin-top: 0.25rem;
    border-radius: var(--bm-radius-control);
    background: var(--bm-canvas-muted);
}

.bm-thumb-placeholder.is-empty {
    border: 1px dashed var(--bm-border-strong);
    background: var(--bm-surface-subtle);
    color: var(--bm-muted);
    font-size: 0.8125rem;
}

/* ---- Bhakti+ pick and duplicate dialogs (MediaPlatform/Components: SatsangSearch, AddToLiveSchedule, Subtitles, BhaktiPlusImagePicker) ---- */

.bm-dialog-grid.rz-data-grid {
    min-height: 250px;
}

.bm-subtitles-dialog {
    min-width: min(500px, 100%);
}

.bm-subtitles-text.rz-textarea {
    width: 100%;
    height: 400px;
    background: var(--bm-surface-subtle);
    cursor: not-allowed;
}

.bm-image-picker-list {
    max-height: 60vh;
    overflow-y: auto;
}

.bm-thumb-choice-large {
    width: 150px;
}

.bm-thumb-choice-large img {
    height: 84px;
}

/* ============================================================
   Translation dialog (shared by Bhakti+ and Academy editors)
   ============================================================ */

.bm-translation-dialog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 0 0 1rem;
}

.bm-translation-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem 0;
    background: var(--bm-canvas);
    box-shadow: var(--bm-shadow-bar);
}

.bm-translation-header .bm-card-title {
    margin: 0;
    flex: 1 1 auto;
}

.bm-translation-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--bm-muted);
    font-size: 0.875rem;
}

.bm-translation-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bm-status-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--bm-border-strong);
}

.bm-status-dot-current {
    background: var(--bm-success);
}

.bm-status-dot-outdated {
    background: var(--bm-warning);
}

.bm-status-dot-missing {
    background: var(--bm-danger);
}

.bm-translation-locale,
.bm-translation-text {
    width: 100%;
}

.bm-translation-text {
    min-height: 2.4rem;
}

/* ============================================================
   ABC Analysis report
   ============================================================ */

.bm-abc-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
}

/* More moved in the period than is in stock: worth a second look. */
.bm-abc-over {
    color: var(--bm-danger);
    font-weight: 700;
}

/* ============================================================
   Connect and access pages (Pages/Auth/LoginInit, Pages/Auth/Forbidden)
   ============================================================ */

/* A page with no top bar: nothing to go back to before a session exists. */
.bm-body-bare.rz-body {
    margin-top: 0;
    height: 100vh;
}

.bm-auth-icon-danger {
    background: var(--bm-danger-soft);
    color: var(--bm-danger);
}

.bm-connect-select {
    width: 100%;
    height: 2.5rem;
}

/* The reconnect anchor must stay a real link (see LoginInit); this only makes it look like the button. */
.bm-theme a.bm-connect-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.bm-connect-help {
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bm-border);
    text-align: left;
}

.bm-connect-help .bm-hint {
    margin: 0 0 0.5rem;
}

.bm-connect-details {
    font-size: 0.8125rem;
    color: var(--bm-slate);
}

.bm-connect-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-connect-details dl {
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

.bm-connect-details dt {
    margin-top: 0.5rem;
    font-weight: 600;
}

.bm-connect-details dd {
    margin: 0;
}

/* A choice between a few options shown as joined buttons sharing the width (first administrator: existing
   or new account; Import/Export products: collections or orders). Never inside a RadzenFormField, whose
   outline would stretch around it: label it with .bm-segmented-field. */
.bm-theme .bm-segmented.rz-selectbar {
    display: flex;
    width: 100%;
}

.bm-theme .bm-segmented.rz-selectbar .rz-button {
    flex: 1 1 0;
}

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

/* Same height as the outlined fields it sits beside in a row of fields */
.bm-theme .bm-segmented-field .bm-segmented.rz-selectbar .rz-button {
    min-height: 2.5rem;
}

/* ============================================================
   My profile, Edit profile, Change password (Pages/Auth/Profile)
   ============================================================ */

/* One short form or a few facts: a full-width page would leave the fields stretched across the screen. */
.bm-page.bm-page-narrow {
    max-width: 44rem;
}

.bm-profile-facts {
    font-size: 0.9375rem;
    gap: 0.75rem 1.5rem;
}

.bm-profile-footer {
    justify-content: flex-end;
}

/* ============================================================
   Users and user editor (Pages/Auth/Admin/Users)
   ============================================================ */

.bm-user-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}

/* The show/hide button sits inside the field's row so it never wraps under the box. */
.bm-password-field {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bm-password-field > .rz-textbox,
.bm-password-field > .rz-password {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Standalone pages outside Blazor (Pages/Auth/ExternalRedirect, Pages/Auth/StorageAccessRequest)
   They have no RadzenLayout, so the body wears .bm-theme and draws the canvas itself.
   ============================================================ */

body.bm-standalone {
    margin: 0;
    min-height: 100vh;
    background: var(--bm-canvas);
    color: var(--bm-navy);
    font-family: var(--bm-font-body);
}

.bm-standalone .bm-auth {
    padding: 2.5rem 1rem 3rem;
}

/* The tip lists Safari steps, which read better a little wider than a sign-in card. */
.bm-standalone-card {
    width: min(32rem, 100%);
}

.bm-standalone [hidden] {
    display: none !important;
}

.bm-standalone-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--bm-canvas-muted);
    border-top-color: var(--bm-navy);
    border-radius: 50%;
    animation: bm-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .bm-standalone-spinner {
        animation-duration: 2.5s;
    }
}

.bm-standalone-debug {
    margin: 0;
    font-size: 0.75rem;
    color: var(--bm-muted);
    word-break: break-all;
}

.bm-standalone-tip h2 {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bm-navy);
}

.bm-standalone-tip ol {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.5;
}

.bm-standalone-tip p {
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

/* ============================================================
   Inventory count (Pages/Products/Inventory: Inventories, InventoryCount, InventoryCountAudit,
   InventoryCountGroupExplorer, AuthorizationPin; Pages/Products/Components/InventoryOperatorBar)
   ============================================================ */

.bm-inv-operator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bm-inv-signin {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bm-inv-signin-fields {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bm-inv-person-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

/* Long sentences in a grid cell wrap instead of being cut */
.bm-inv-wrap {
    white-space: normal;
    line-height: 1.35;
}

.bm-inv-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.bm-inv-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-control);
    background: var(--bm-surface-subtle);
}

.bm-inv-role p {
    margin: 0;
    color: var(--bm-slate);
    line-height: 1.45;
}

.bm-inv-role-heading {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bm-slate);
}

.bm-inv-role-cannot {
    color: var(--bm-slate);
}

.bm-inv-role-choice {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 1rem 0;
}

/* Step bar of a count: Counting, Waiting for approval, Ready to send, Sent to Shopify */
.bm-inv-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-inv-step {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border-top: 4px solid var(--bm-border);
    color: var(--bm-muted);
}

.bm-inv-step-title {
    font-weight: 600;
}

.bm-inv-step-who {
    font-size: 0.75rem;
}

.bm-inv-step-done {
    border-top-color: var(--bm-success);
    color: var(--bm-success);
}

.bm-inv-step-current {
    border-top-color: var(--bm-teal);
    background: var(--bm-teal-soft);
    color: var(--bm-navy);
}

/* Restock fulfillments have three steps: Draft, Pending, Received */
.bm-inv-steps-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .bm-inv-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Scan area of a count or audit: the product field and the quantity field side by side */
.bm-inv-scan {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(120px, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

@media (max-width: 720px) {
    .bm-inv-scan {
        grid-template-columns: 1fr;
    }
}

/* Details of a count or audit: the fields on one row, then who did each step on one line */
.bm-inv-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.bm-inv-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--bm-navy);
}

.bm-inv-summary-label {
    color: var(--bm-slate);
}

/* Quantities in audit and explorer grids: counted higher, lower or equal to the stock */
.bm-inv-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bm-inv-qty-up {
    color: var(--bm-success);
}

.bm-inv-qty-down {
    color: var(--bm-danger);
}

.bm-inv-qty-same {
    color: var(--bm-muted);
}

/* Recount input of an audit line, tinted by how it compares with the first count */
.bm-theme .rz-numeric.bm-inv-qty-up {
    background: var(--bm-success-soft);
}

.bm-theme .rz-numeric.bm-inv-qty-down {
    background: var(--bm-danger-soft);
}

.bm-inv-legend-up,
.bm-inv-legend-down {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.375rem;
    border-radius: 2px;
    vertical-align: middle;
}

.bm-inv-legend-up {
    background: var(--bm-success-soft);
}

.bm-inv-legend-down {
    background: var(--bm-danger-soft);
}

/* Group report: a counted quantity that differs from the Shopify stock of its location */
.bm-inv-diff-up,
.bm-inv-diff-down {
    display: inline-block;
    min-width: 2.5rem;
    padding: 0 0.375rem;
    border-radius: 4px;
    font-weight: 600;
}

.bm-inv-diff-up {
    background: var(--bm-success-soft);
}

.bm-inv-diff-down {
    background: var(--bm-danger-soft);
}

/* Group report: location name over "In Shopify" or "Counted", tinted so each pair reads as one location */
.bm-inv-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.bm-inv-col-head span {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bm-slate);
}

.bm-theme th.bm-inv-col-stock {
    background: var(--bm-surface-subtle);
}

.bm-theme th.bm-inv-col-counted {
    border-right: 1px solid var(--bm-border);
}

.bm-theme th.bm-inv-col-total {
    background: var(--bm-gold-soft);
}

/* Product cell of a count or audit grid: the variant picture next to the name */
.bm-inv-product {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.bm-inv-thumb {
    flex: none;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
}

.bm-inv-thumb-missing {
    flex: none;
    width: 36px;
    text-align: center;
    color: var(--bm-muted);
}

/* A count line Shopify refused when the count was sent */
.bm-theme .rz-data-row td.bm-inv-row-error {
    background: var(--bm-danger-soft);
}

/* A zero line added by "Set uncounted products to 0" that nobody has counted */
.bm-theme .rz-data-row td.bm-inv-row-uncounted {
    background: var(--bm-warning-soft);
}

/* The products listed by the "Set uncounted products to 0" dialog */
.bm-inv-uncounted-list {
    max-height: 14rem;
    overflow-y: auto;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

.bm-inv-uncounted-negative {
    color: var(--bm-danger);
}

.bm-inv-legend-uncounted {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.375rem;
    border-radius: 2px;
    vertical-align: middle;
    background: var(--bm-warning-soft);
    border: 1px solid var(--bm-warning);
}

.bm-inv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--bm-slate);
    font-size: 0.8125rem;
}

/* ---- Webhook Log (Pages/Settings/WebhookLog) ----
   Its three tiles are the home page's numbers used as view switches, so a tile is a button: it lifts on
   hover, shows the view shown with a navy ring, and keeps the warning or danger tone of its number. */

.bm-stat.bm-stat-button {
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bm-stat.bm-stat-button:hover:not(:disabled) {
    border-color: var(--bm-border-strong);
    transform: translateY(-1px);
}

.bm-stat.bm-stat-button:focus-visible {
    outline: none;
    box-shadow: var(--bm-focus-ring);
}

.bm-stat.bm-stat-button:disabled {
    cursor: default;
    opacity: 0.7;
}

.bm-stat.bm-stat-selected {
    border-color: var(--bm-navy);
    box-shadow: 0 0 0 1px var(--bm-navy), var(--bm-shadow-card);
}

.bm-stat-danger {
    border-color: color-mix(in srgb, var(--bm-danger) 35%, var(--bm-border));
    background: var(--bm-danger-soft);
}

.bm-stat-danger .bm-stat-value {
    color: var(--bm-danger);
}

.bm-stat.bm-stat-danger.bm-stat-selected {
    border-color: var(--bm-danger);
    box-shadow: 0 0 0 1px var(--bm-danger), var(--bm-shadow-card);
}

@media (prefers-reduced-motion: reduce) {
    .bm-stat.bm-stat-button,
    .bm-stat.bm-stat-button:hover:not(:disabled) {
        transition: none;
        transform: none;
    }
}

/* The count and "Run all N again" act on the same rows, so they sit together at the end of the filter bar. */
.bm-webhook-bar-end {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.bm-webhook-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.bm-band.bm-webhook-progress .rz-progressbar {
    height: 0.375rem;
}

/* The stored error carries its stack trace: kept as written, scrolled inside the panel rather than wrapped away. */
.bm-error-trace {
    margin: 0;
    max-height: 22rem;
    overflow: auto;
    padding: 0.875rem 1rem;
    border-radius: var(--bm-radius-control);
    border: 1px solid rgb(154 30 54 / 18%);
    background: var(--bm-danger-soft);
    color: var(--bm-navy);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}