@import '_content/Barab.Components/Barab.Components.sa9itlf5es.bundle.scp.css';
@import '_content/Barab.Core.UI/Barab.Core.UI.5qdmbflo46.bundle.scp.css';
@import '_content/Barab.Geodesy/Barab.Geodesy.zw7zws2k0s.bundle.scp.css';
@import '_content/Barab.MapLibre/Barab.MapLibre.l730lg9lpc.bundle.scp.css';
@import '_content/Barab.Survey/Barab.Survey.h6vp0txxsp.bundle.scp.css';
@import '_content/Barab.Tickets/Barab.Tickets.79wjgg7rj6.bundle.scp.css';

/* /Components/Blocks/Children/ChildrenView.razor.rz.scp.css */
.bn-children-panel[b-1r1qiclezq] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.5rem;
}

.bn-children-panel__toolbar[b-1r1qiclezq] {
    display: flex;
    justify-content: flex-end;
}

.bn-children-panel__empty[b-1r1qiclezq] {
    padding: 2rem;
    text-align: center;
    color: var(--rz-text-secondary-color, #888);
}

.bn-children-panel__grid[b-1r1qiclezq] {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Blocks/Dashboard/DashboardView.razor.rz.scp.css */
.bn-dashboard-grid[b-liub4q5uik] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
}

[b-liub4q5uik] .bn-widget {
    border: 1px solid var(--rz-border, #e0e0e0);
    border-radius: var(--rz-border-radius, 4px);
    background: var(--rz-base-background-color, #fff);
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 8rem;
}

[b-liub4q5uik] .bn-widget[data-size="Large"] { grid-column: 1 / -1; }
[b-liub4q5uik] .bn-widget[data-size="Medium"] { grid-column: span 2; }

[b-liub4q5uik] .bn-widget__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

[b-liub4q5uik] .bn-widget__title { font-size: 0.95rem; font-weight: 600; margin: 0; flex: 1; }
[b-liub4q5uik] .bn-widget__more { font-size: 0.8rem; white-space: nowrap; }
[b-liub4q5uik] .bn-widget__skeleton { height: 4rem; background: linear-gradient(90deg,#f0f0f0,#f7f7f7,#f0f0f0); border-radius: 4px; }
[b-liub4q5uik] .bn-widget__empty { opacity: 0.6; font-size: 0.85rem; }
[b-liub4q5uik] .bn-widget__error { color: var(--rz-danger, #b00020); font-size: 0.85rem; }
[b-liub4q5uik] .bn-widget__ok { color: var(--rz-success, #16a34a); font-size: 0.85rem; }

[b-liub4q5uik] .bn-widget__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

[b-liub4q5uik] .bn-widget__list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--rz-border-light, #f0f0f0);
}

[b-liub4q5uik] .bn-widget__list li:last-child { border-bottom: none; }

[b-liub4q5uik] .bn-widget__dot {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

[b-liub4q5uik] .bn-widget__count {
    display: block;
    margin-top: 0.4rem;
    opacity: 0.6;
    font-size: 0.8rem;
}

[b-liub4q5uik] .bn-widget__measurements {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    margin: 0;
    font-size: 0.85rem;
}

[b-liub4q5uik] .bn-widget__measurements dt { font-weight: 500; }
[b-liub4q5uik] .bn-widget__measurements dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
[b-liub4q5uik] .bn-widget__measurements dd small { opacity: 0.6; }
/* /Components/Blocks/Map/MapLayerTreeControl.razor.rz.scp.css */
/* No horizontal padding: the sidebar (.bn-map-panel-sidebar) already insets by .5rem, and the
   extra inset here was what left the layer rows sitting further right than the base-map radios
   above them (#127). Vertical padding stays — it separates the tree from the section title. */
.bn-layer-tree[b-e1qtmevr7g] { padding: .5rem 0; overflow: auto; height: 100%; font-size: .875rem; }
.bn-layer-tree ul[b-e1qtmevr7g] { list-style: none; padding-left: 1.2rem; margin: 0; }
/* Selector must outrank `.bn-layer-tree ul` above (class+element beats a bare class), otherwise
   the root list keeps the 1.2rem child indent and every top-level layer row sits ~19px to the
   right of the base-map radios above it (#127). Nested lists still indent normally. */
.bn-layer-tree ul.bn-layer-tree-root[b-e1qtmevr7g] { padding-left: 0; }
.bn-layer-row[b-e1qtmevr7g] { display: flex; align-items: center; gap: .35rem; padding: .15rem 0; }
.bn-twisty[b-e1qtmevr7g] { cursor: pointer; user-select: none; display: inline-block; width: 1rem; transition: transform 120ms; }
.bn-twisty.open[b-e1qtmevr7g] { transform: rotate(90deg); }
.bn-twisty-placeholder[b-e1qtmevr7g] { display: inline-block; width: 1rem; }
.bn-layer-label[b-e1qtmevr7g] { user-select: none; }
.bn-layer-zoomable[b-e1qtmevr7g] { cursor: pointer; border-radius: 3px; padding: 0 .2rem; }
.bn-layer-zoomable:hover[b-e1qtmevr7g] { background: rgba(0, 0, 0, .07); text-decoration: underline; }
.bn-highlighted > .bn-layer-row .bn-layer-label[b-e1qtmevr7g] { font-weight: 600; color: #e94f37; }
/* /Components/Blocks/Map/MapView.razor.rz.scp.css */
/* The splitter panes are flex columns (min-height:0) per barab-core-ui.css, so the
   panel fills with flex:1 rather than height:100% — the latter collapses to 0 in a
   min-height:0 flex column and leaves the MapLibre canvas stuck at its 300px fallback. */
.bn-map-panel-master[b-hze9z9jtiu] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

[b-hze9z9jtiu] .brb-map-container {
    flex: 1 1 auto;
    min-height: 400px;
    width: 100%;
}

/* Minimap (Simplified) — fixed height inside a dashboard card, no splitter around it.
   The wrapper carries the scope attribute that ::deep needs to reach the Map component's
   own container element. */
.bn-map-mini[b-hze9z9jtiu] {
    width: 100%;
}

[b-hze9z9jtiu] .brb-map-mini-container {
    width: 100%;
    height: 14rem;
    border-radius: var(--rz-border-radius, 4px);
    overflow: hidden;
}

.bn-map-mini-empty[b-hze9z9jtiu] {
    opacity: 0.6;
    font-size: 0.85rem;
}

/* One heading treatment for both halves of the sidebar — the base-map picker and the layer
   tree (#127). Previously only the picker carried a title, and it carried it as an inline
   style, so the two sections read as unrelated controls.
   ::deep is required, not decorative: the title is a RadzenLabel, and scoped CSS never
   decorates a child component's own elements — without it the rule is silently inert
   (verified in the browser: the label rendered at font-weight 400). */
.bn-map-panel-sidebar[b-hze9z9jtiu]  .bn-map-section-title {
    font-weight: 600;
}

.bn-map-panel-sidebar[b-hze9z9jtiu] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: .5rem;
}
/* /Components/Entities/EntityTreeView.razor.rz.scp.css */
/* FEAT-038 Task 5.2: visual highlight for nodes the current user can manage in admin mode. */
.bn-entity-tree__label--manageable[b-tu3d0kg70w] {
    font-weight: 600;
    color: var(--rz-primary, #1976d2);
}

.bn-entity-tree__label--manageable[b-tu3d0kg70w]::before {
    content: "● ";
    font-size: 0.7em;
    vertical-align: middle;
}
/* /Components/Layout/ViewModeToggle.razor.rz.scp.css */
.view-mode-toggle[b-vvp590vjtb] {
    margin: 0 0.75rem;
    display: flex;
    align-items: center;
}
/* /Components/Pages/Admin/ReportTemplateEditor.razor.rz.scp.css */
.designer-host[b-ogjb2md5ad] {
    /* The designer manages its own inner scrolling; give it the viewport minus the
       workspace chrome so the canvas doesn't collapse to content height. */
    height: calc(100vh - 180px);
    min-height: 480px;
}
/* /Components/Pages/Operator/KooInspectionMap.razor.rz.scp.css */
/* FEAT-097 — layout and legend swatches for the KOO import map.
   Plain elements written in this component's own .razor, so no ::deep is needed here. */

/* The tab hands this wrapper its height; the canvas takes whatever the prose and legend leave.
   ::deep for the RadzenStack inside — it is rendered by Radzen and carries no scope attribute. */
.koo-map-tab[b-fls7ppi9ep] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.koo-map-tab[b-fls7ppi9ep]  > .rz-stack {
    flex: 1;
    min-height: 0;
}

.koo-map-canvas[b-fls7ppi9ep] {
    flex: 1;
    min-height: 320px;
}

.koo-map-swatch[b-fls7ppi9ep] {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1.5px solid #fff;
    vertical-align: middle;
    margin-right: 0.35rem;
}
/* /Components/Pages/Operator/KooInspectionRows.razor.rz.scp.css */
/* FEAT-097 — row tinting for the KOO wizard's Hodnoty a delty grid.

   ::deep throughout: RadzenDataGrid renders the <tr> elements, so they never carry this
   component's scope attribute. The .koo-inspection-rows wrapper in the .razor is a plain <div>
   precisely so there is a scoped ancestor for these rules to descend from. */

.koo-inspection-rows[b-9xjn48aqgn]  tr.koo-row-unmatched > td {
    /* Nothing will be written for these rows — the same thing the "Nalezen: ne" badge and the
       warning above the tabs say. Three statements of one fact, because this is the mistake that
       costs an operator a re-survey. */
    background-color: var(--rz-warning-lighter);
}

.koo-inspection-rows[b-9xjn48aqgn]  tr.koo-row-excluded > td {
    background-color: var(--rz-danger-lighter);
    /* Stored but rejected: the value is visible, its authority is not. */
    opacity: 0.75;
}

.koo-inspection-rows[b-9xjn48aqgn]  tr.koo-row-calibration > td {
    background-color: var(--rz-info-lighter);
}

/* Coordinates and deltas are read by comparing digits down a column, which proportional figures
   make needlessly hard. */
.koo-inspection-rows[b-9xjn48aqgn]  td {
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Operator/KooPreviewCharts.razor.rz.scp.css */
/* FEAT-089/097 — the Grafy step: profile list on the left, quantity tabs and chart filling the
   rest. ::deep is needed for everything RadzenListBox and RadzenTabs render themselves; the
   wrappers written in this component's .razor are the scoped anchors. */

.koo-charts[b-4o6nleyb5z] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.koo-charts[b-4o6nleyb5z]  > .rz-stack {
    flex: 1;
    min-height: 0;
}

.koo-charts__body[b-4o6nleyb5z] {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.koo-charts__profiles[b-4o6nleyb5z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* wide enough for "02-č.e.562-st.388" without truncation, fixed so the chart area does not
       jump when a longer profile name appears */
    flex: 0 0 17rem;
    min-height: 0;
}

.koo-charts__profiles-label[b-4o6nleyb5z] {
    margin: 0;
}

.koo-charts[b-4o6nleyb5z]  .koo-charts__profiles-list {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Radzen sizes the listbox's scroll area with an inline max-height; without this the list stops
   short of the column it was given and the empty remainder reads as "no more profiles". */
.koo-charts[b-4o6nleyb5z]  .koo-charts__profiles-list .rz-listbox-list-wrapper {
    max-height: none;
    height: 100%;
}

.koo-charts[b-4o6nleyb5z]  .koo-charts__tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.koo-charts[b-4o6nleyb5z]  .koo-charts__tabs > .rz-tabview-panels {
    flex: 1;
    min-height: 0;
}

/* Non-selected panels are hidden with the plain HTML `hidden` attribute — :not([hidden]) keeps
   `display: flex` from overriding that and showing every quantity at once. */
.koo-charts[b-4o6nleyb5z]  .koo-charts__tabs > .rz-tabview-panels > [role="tabpanel"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* BarabEChart is Height="100%", so its box needs a real height to resolve against. */
.koo-charts__canvas[b-4o6nleyb5z] {
    flex: 1;
    min-height: 260px;
}
/* /Components/Pages/Operator/KooSourceFileView.razor.rz.scp.css */
/* FEAT-097 — raw KOO file listing. Every element here is written in this component's own .razor,
   so plain scoped rules are enough — no ::deep needed. */

.koo-source-tab[b-75038mga6c] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ::deep — the RadzenStack inside is rendered by Radzen, so it carries no scope attribute. */
.koo-source-tab[b-75038mga6c]  > .rz-stack {
    flex: 1;
    min-height: 0;
}

/* Fills the tab instead of a fixed 560px window — the listing is the whole point of this tab,
   so the screen it gets is screen the operator does not have to scroll. */
.koo-source[b-75038mga6c] {
    flex: 1;
    min-height: 240px;
    overflow: auto;
    border: 1px solid var(--rz-border-color, #d5d5d5);
    border-radius: 4px;
    background: var(--rz-base-background-color, #fff);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.koo-source-line[b-75038mga6c] {
    display: flex;
    gap: 0.75rem;
    height: 20px;          /* must match Virtualize ItemSize, or the scrollbar drifts */
    line-height: 20px;
    padding: 0 0.5rem;
    white-space: pre;
}

.koo-source-gutter[b-75038mga6c] {
    flex: 0 0 4.5rem;
    text-align: right;
    color: var(--rz-text-tertiary-color, #888);
    user-select: none;      /* copying the listing should yield the file, not the line numbers */
}

.koo-source-text[b-75038mga6c] {
    flex: 1 1 auto;
}

.koo-line-calibration[b-75038mga6c] { background-color: var(--rz-info-lighter); }
.koo-line-excluded[b-75038mga6c]    { background-color: var(--rz-danger-lighter); }
.koo-line-unmatched[b-75038mga6c]   { background-color: var(--rz-warning-lighter); }

/* Not a row at all — blank, comment, or malformed. Muted rather than coloured: nothing happens to
   it, and giving it a warning tint would suggest something did. */
.koo-line-unparsed[b-75038mga6c] { color: var(--rz-text-tertiary-color, #999); font-style: italic; }

.koo-legend[b-75038mga6c] {
    font-size: 0.8125rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    border: 1px solid var(--rz-border-color, #d5d5d5);
}
/* /Components/Pages/Operator/KooUploadPage.razor.rz.scp.css */
/* FEAT-097 — let the wizard's checking tabs use the page instead of a 450px box.

   Every selector below hangs off a plain <div> written in KooUploadPage.razor (.koo-wizard,
   .koo-step-fill). That is not a stylistic choice: Blazor stamps the scope attribute only on
   elements authored in this component's own markup, so putting these class names on a
   RadzenStack/RadzenTabs instead would compile to .koo-wizard[b-xxx] against a div Radzen
   renders — no match, no error, layout silently unchanged.

   The height has to be handed down link by link. WorkspaceShell already makes
   .bn-workspace__main a flex column with min-height:0; each element between it and the tab panel
   must repeat flex:1 + min-height:0 or the chain collapses back to content height. */

.koo-wizard[b-bwvp7r3jyr] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* the RadzenStack holding the alerts and the stepper */
.koo-wizard[b-bwvp7r3jyr]  > .rz-stack {
    flex: 1;
    min-height: 0;
}

.koo-wizard[b-bwvp7r3jyr]  .rz-steps {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Only the step on screen. The others are hidden with the plain HTML `hidden` attribute, so
   :not([hidden]) is the semantic selector — matching on Radzen's own markup details (an empty
   inline style attribute on the visible panel) would break on any Radzen upgrade. Without the
   guard, `display: flex` here would override `hidden` and reveal every step at once. */
.koo-wizard[b-bwvp7r3jyr]  .rz-steps > [role="tabpanel"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* the step body: warnings and buttons keep their natural height, the tabs take what is left */
.koo-step-fill[b-bwvp7r3jyr] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.koo-step-fill[b-bwvp7r3jyr]  > .rz-stack {
    flex: 1;
    min-height: 0;
}

.koo-step-fill[b-bwvp7r3jyr]  .koo-fill-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.koo-step-fill[b-bwvp7r3jyr]  .koo-fill-tabs > .rz-tabview-panels {
    flex: 1;
    min-height: 0;
}

/* Same `hidden` rule as the steps above, for the tab panels themselves. */
.koo-step-fill[b-bwvp7r3jyr]  .koo-fill-tabs > .rz-tabview-panels > [role="tabpanel"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* the single child each tab renders (grid wrapper, map, file listing) */
.koo-step-fill[b-bwvp7r3jyr]  .koo-fill-tabs > .rz-tabview-panels > [role="tabpanel"]:not([hidden]) > * {
    flex: 1;
    min-height: 0;
}
/* /Components/Shared/BarabPicker/BarabPicker.razor.rz.scp.css */
/* Issue #0001 A2-1/A2-2 — BarabPicker shell + search-row styling.
   Mirrors the existing bn-picker__* / bn-quickopen__* class contract from
   wwwroot/css/barabneo-shell.css so a future de-duplication is mechanical. */

.bn-picker--fixed[b-4doghp1gbg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: var(--bn-picker-height, 480px);
    max-height: var(--bn-picker-max-height, none);
}

.bn-picker__inputbox[b-4doghp1gbg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    background: var(--rz-base-background-color);
}

.bn-picker__inputbox .rzi[b-4doghp1gbg] {
    font-size: 18px;
    color: var(--rz-text-tertiary-color);
}

.bn-picker__search-input[b-4doghp1gbg] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0.25rem 0;
}

.bn-picker__clear[b-4doghp1gbg] {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.bn-picker__clear:hover[b-4doghp1gbg] {
    background: var(--rz-base-100);
}

.bn-picker__list[b-4doghp1gbg] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px;
}

.bn-picker__list:focus-visible[b-4doghp1gbg] {
    outline: 2px solid var(--rz-primary-light, var(--rz-primary));
    outline-offset: -2px;
}

.bn-picker__row[b-4doghp1gbg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
}

.bn-picker__row:hover[b-4doghp1gbg] {
    background: var(--rz-base-100);
}

.bn-picker__row--active[b-4doghp1gbg] {
    background: var(--bn-orange-soft, var(--rz-base-100));
}

.bn-picker__name[b-4doghp1gbg] {
    flex: 1 1 auto;
}

.bn-picker__code[b-4doghp1gbg] {
    color: var(--rz-text-tertiary-color);
    font-family: var(--bn-mono, monospace);
    font-size: 0.85em;
}

.bn-picker__group[b-4doghp1gbg] {
    color: var(--rz-text-secondary-color);
    font-size: 0.85em;
}

.bn-picker__empty[b-4doghp1gbg] {
    padding: 1rem;
    color: var(--rz-text-tertiary-color);
    text-align: center;
}

.bn-picker__footer[b-4doghp1gbg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rz-border-color);
}
/* /Components/Shared/Forms/BarabFormActionBar.razor.rz.scp.css */
.bn-form-actions[b-zhgzqol3rk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--rz-base-background-color, #fff);
    border-top: 1px solid var(--rz-border-color, #e0e0e0);
}

.bn-form-actions[data-sticky="true"][b-zhgzqol3rk] {
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.bn-form-actions__destructive[b-zhgzqol3rk] {
    display: flex;
    gap: 0.5rem;
}

.bn-form-actions__separator[b-zhgzqol3rk] {
    width: 1px;
    height: 1.75rem;
    background: var(--rz-border-color, #e0e0e0);
    margin: 0 0.25rem;
}

.bn-form-actions__spacer[b-zhgzqol3rk] {
    flex: 1;
}

.bn-form-actions__dirty-indicator[b-zhgzqol3rk] {
    font-size: 0.875rem;
    color: var(--rz-warning, #f57c00);
    font-style: italic;
}

.bn-form-actions__secondary[b-zhgzqol3rk],
.bn-form-actions__primary[b-zhgzqol3rk] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Shared/Notifications/NotificationBell.razor.rz.scp.css */
/* Positioning context for the absolutely-positioned dropdown. The dropdown is a sibling
   of .bn-bell (not a child), so it must anchor to this wrapper — otherwise top:100% resolves
   against a full-height layout ancestor and the dropdown drops to the page bottom. */
.bn-bell-wrap[b-blg6q9in5d] {
    position: relative;
    display: inline-flex;
}

.bn-bell[b-blg6q9in5d] {
    position: relative;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.bn-bell__badge[b-blg6q9in5d] {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    background: var(--rz-danger, #d32f2f);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 0 0.3rem;
    min-width: 1.1rem;
    text-align: center;
    line-height: 1.1rem;
}

.bn-bell__dropdown[b-blg6q9in5d] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 22rem;
    max-height: 30rem;
    overflow-y: auto;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-border-color, #e0e0e0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    padding: 0.5rem;
}

.bn-bell__head[b-blg6q9in5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem 0.5rem;
    border-bottom: 1px solid var(--rz-border-color, #e0e0e0);
}

.bn-bell__empty[b-blg6q9in5d] {
    padding: 1rem;
    text-align: center;
    color: var(--rz-text-tertiary-color, #999);
}

.bn-bell__list[b-blg6q9in5d] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bn-bell__item[b-blg6q9in5d] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--rz-border-color-lighter, #f0f0f0);
}

.bn-bell__item--unread[b-blg6q9in5d] {
    background: var(--rz-info-lighter, #f0f7ff);
}

.bn-bell__item--link[b-blg6q9in5d] {
    cursor: pointer;
}

.bn-bell__item--link:hover[b-blg6q9in5d] {
    background: var(--rz-base-200, #f5f5f5);
}

.bn-bell__subject[b-blg6q9in5d] {
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.bn-bell__when[b-blg6q9in5d] {
    font-size: 0.8em;
    color: var(--rz-text-secondary-color, #666);
}

.bn-bell__foot[b-blg6q9in5d] {
    padding: 0.5rem;
    text-align: center;
    border-top: 1px solid var(--rz-border-color, #e0e0e0);
}