/* =============================================================================
 * Barab.Core.UI — shared component styles
 *
 * Ships as a Razor Class Library static web asset. Host apps load this file
 * via <link href="_content/Barab.Core.UI/css/barab-core-ui.css" rel="stylesheet"/>
 * BEFORE any app-only stylesheet. Contains the visual contract for components
 * that ship in Barab.Core.UI:
 *
 *   - WorkspaceShell page layout zones (ADR-021)
 *   - BarabTabPanel
 *   - BarabMasterPanel
 *   - BarabSplitLayout
 *   - BarabGrid family (BarabGrid + Link / Chip / Status / Action columns)
 *
 * Note: component styles live here as plain descendant selectors, mirrored from
 * the component-level .razor.css files. That mirroring is NOT because the scoped
 * bundle is inert — App.razor DOES link BarabNeo.styles.css, and both delivery
 * paths were measured working independently while fixing #781. It exists so the
 * contract survives a host that forgets the bundle link (the #50/#100/#109
 * failure mode) and so load order against app-only sheets stays predictable.
 * Add new rules here AND keep the matching .razor.css in sync — the two copies
 * are expected to agree.
 *
 * Hairline borders use var(--rz-base-200) — no fallback. Radzen has no
 * `--rz-border` colour token (#1053): its border tokens are shorthands, e.g.
 * `--rz-border-normal: var(--rz-border-width) solid var(--rz-base-200)`, so the
 * colour to reach for is --rz-base-200 itself. It is defined by the theme
 * (fluent-base.css) and re-pointed by the app brand sheet, and barabneo-shell.css
 * already borders this way. Do not reintroduce a literal fallback: it can only
 * mask a missing theme, and a missing theme leaves the app unstyled anyway.
 *
 * The same applies to --rz-border-color / -color-light / -color-lighter /
 * -hover-color / --rz-border-light / --rz-border-radius-sm (#1113). None of them
 * is a Radzen token either, and without a fallback an undefined custom property
 * makes the whole declaration invalid at computed-value time -- `border: 1px
 * solid var(--rz-border-color)` computes to `border-style: none; border-width:
 * 0px`, i.e. no border at all. Use --rz-base-200 for hairlines, --rz-base-100
 * for the lighter variants, --rz-base-300 for hover, --rz-border-radius for the
 * radius. The names that ARE real: --rz-border-width, --rz-border-radius, and
 * the --rz-border-normal / -primary / -disabled / -danger *shorthands*, which
 * expand to a full `width style colour` value -- so they belong on their own
 * (`border-top: var(--rz-border-normal)`), never after a `1px solid`.
 * ============================================================================= */

/* BarabGrid — mirrored from BarabGrid.razor.css. Add new rules here; keep
   BarabGrid.razor.css in sync as living documentation. */

/* Outer flex container — column direction so the optional header bar sits
   above the RadzenDataGrid and the grid itself fills remaining height. */
.bn-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* Make the Radzen DataGrid root fill the wrapper and scroll internally. */
.bn-grid .rz-data-grid,
.bn-grid .rz-datatable {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.bn-grid .rz-data-grid-data,
.bn-grid .rz-datatable-data,
.bn-grid .rz-grid-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Sticky column headers. */
.bn-grid--sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rz-grid-header-background-color, #fff);
}

/* Optional header bar (Title + Actions) rendered above the column headers. */
.bn-grid__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
    background: var(--rz-base-background-color, #fff);
}

.bn-grid__title {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Link cells. */
a.bn-grid__link,
a.bn-grid__link:visited,
a.bn-grid__link:active {
    color: var(--bn-orange, #f26532);
    text-decoration: none;
    font-weight: 500;
}
a.bn-grid__link:hover,
a.bn-grid__link:focus {
    text-decoration: underline;
}

/* Chip cells. */
.bn-grid .bn-grid__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.bn-grid .bn-grid__chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.4;
    background: var(--rz-base-300, #e0e0e0);
    color: var(--rz-text-color, #1d1d1d);
    white-space: nowrap;
}

.bn-grid .bn-grid__chip--more {
    background: var(--bn-orange-soft, rgba(242, 101, 50, 0.12));
    color: var(--bn-orange, #f26532);
    cursor: default;
}

.bn-grid .bn-grid__chip-empty,
.bn-grid .bn-grid__numeric-empty {
    color: var(--rz-text-secondary-color, #757575);
}

/* Numeric cells: monospaced figures so digits align across rows. */
.bn-grid .bn-grid__numeric {
    font-variant-numeric: tabular-nums;
}

/* Status pill cells. */
.bn-grid .bn-grid__status {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 500;
    white-space: nowrap;
}

.bn-grid .bn-grid__status--neutral  { background: var(--rz-base-300, #e0e0e0); color: var(--rz-text-color, #1d1d1d); }
.bn-grid .bn-grid__status--success  { background: rgba(46, 125, 50, 0.12);   color: #2e7d32; }
.bn-grid .bn-grid__status--warning  { background: rgba(237, 108, 2, 0.12);   color: #ed6c02; }
.bn-grid .bn-grid__status--danger   { background: rgba(211, 47, 47, 0.12);   color: #d32f2f; }
.bn-grid .bn-grid__status--info     { background: rgba(2, 119, 189, 0.12);   color: #0277bd; }

/* Row-action button group (BarabGridActionColumn). */
.bn-grid .bn-grid__actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

/* ============================================================================
 * ADR-021 — Page Layout Zones Contract
 *
 * WorkspaceShell + BarabTabPanel layout primitives. Mirrored here from the
 * component-scoped .razor.css files — same pattern as BarabGrid above, and for
 * the reasons given in the file header. See ADR-021 in Obsidian:
 * 01_Projekty/barab/Planning/ADR/ADR-021-page-layout-zones-contract.md
 * ============================================================================ */

/* #675 — Radzen's layout body carries a 16px padding that insets the whole workspace from
   the window edge. On a master-detail page that is width the grid and the preview want and
   nothing gains: the workspace already provides its own inset where it belongs (see
   .bn-workspace__title-row below), so the outer one only shrinks the working area.

   Deliberately scoped with :has(> .bn-workspace) rather than reset on .rz-body outright —
   pages that are NOT a workspace (Profil, Login, the docs portal, the report designer) do
   not share the workspace's own spacing and are left exactly as they were. */
.rz-body:has(> .bn-workspace) {
    padding: 0;
}

/* root: full available height, flex column */
.bn-workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* sticky zones — never scroll */
.bn-workspace__breadcrumb,
.bn-workspace__title-row {
    flex-shrink: 0;
}

/* title row: plain flex row, full width, sticky-aligned children. Pages
   prepend <div style="flex:1"></div> in their actions-page SectionContent
   to push buttons to the right edge. */
.bn-workspace__title-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
}

/* #781 — badges are secondary metadata, not part of the title. `margin-left: auto`
   absorbs the free space between the title and the badges so they read as a separate
   right-hand zone instead of a suffix on the heading. On a narrow row there is no free
   space left to absorb, so the auto margin collapses to 0 and the layout is unchanged.
   On pages that also emit actions-page content with the documented `flex: 1` spacer,
   the spacer consumes the free space first (flex-grow resolves before auto margins),
   so those title rows keep their current arrangement. */
.bn-workspace__badges {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
}

/* tabs container: fills remaining height. A tab's actions live in its own
   BarabTabPanel toolbar (FEAT-133, #1023), not in the tab strip. RadzenTabs
   internals are styled with descendant selectors (replacing the ::deep rules
   from the removed scoped CSS file). */
.bn-workspace__tabs {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* RadzenTabs internals: flex-column so panels fill remaining height */
.bn-workspace__tabs .rz-tabview {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* #989 — wrap the tab strip onto additional lines instead of overflowing
   horizontally when there are too many tabs to fit on one row. RadzenTabs has
   no built-in wrap parameter (checked against the pinned Radzen.Blazor
   source) — the "Tabs — Wrap" behavior in Radzen's own demo is plain CSS
   flex-wrap on .rz-tabview-nav, so that's all this adds. */
.bn-workspace__tabs .rz-tabview-nav {
    flex-wrap: wrap;
}

.bn-workspace__tabs .rz-tabview-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;        /* scroll is delegated to BarabTabPanel */
    padding: 0;
}

/* #675 — the padding reset has to land on the PANEL, not only on its container:
   Radzen's 16px sits on .rz-tabview-panel, and the rule above (…-panels) misses it
   by one letter. Until this was fixed, every tab body was inset 16px on each side by
   a default nobody chose, and the comment claiming BarabTabPanel supplied that padding
   was simply wrong — .bn-tabpanel had none. It does now (see .bn-tabpanel below), so
   the inset is deliberate and lives in one place. */
.bn-workspace__tabs .rz-tabview-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* body must be a flex chain so BarabTabPanel can scroll independently */
.bn-workspace__body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.bn-workspace__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bn-workspace__siderail {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid var(--rz-base-200);
    overflow-y: auto;
}

/* BarabTabPanel — minimal flex wrapper for scrollable tab body */
.bn-tabpanel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* BarabMasterPanel — master list panel for MasterDetail / MasterDetailStacked
   layouts (ADR-021 § 5). Scaffold styling — full responsive behaviour will
   be tuned when the first master-detail page lands. */
.bn-master-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--rz-base-background-color, #ffffff);
    border: 1px solid var(--rz-base-200);
    border-radius: 0.375rem;
    overflow: hidden;
}

.bn-master-panel__header {
    flex-shrink: 0;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.bn-master-panel__title {
    font-weight: 600;
}

/* Pages place a <div style="flex:1"></div> spacer inside Actions to push
   buttons to the right edge — same convention as actions-page. */
.bn-master-panel__actions {
    display: contents;
}

.bn-master-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* BarabSplitLayout — resizable split-pane container for master-detail pages
   (ADR-021 § 5). Hosts a RadzenSplitter with two panes; orientation toggled
   by the user via a toggle button passed into the Detail context slot. */
.bn-split-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

.bn-split-layout > .rz-splitter {
    flex: 1;
    min-height: 0;
}

/* #664 — fullscreen detail. Radzen has no maximise primitive for a splitter, so the layout
   root is lifted out of the page flow and the master pane is simply not rendered. Radzen's
   .rz-body carries a transform, which makes IT the containing block for position: fixed — so
   this covers the whole content area (global header and side rail stay put), which is the
   intended reading of #664's "detail over the whole window". z-index stays below Radzen's
   dialog/notification layer (1000+) so a confirm dialog raised from the maximised detail still
   appears on top of it. */
.bn-split-layout--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--rz-base-background-color, #fff);
    padding: 0.5rem;
}

.bn-split-layout__full {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* The toolbar handed to the detail slot is a positioning wrapper only — its buttons must stay
   direct flex items of the tab strip they are placed in, hence display: contents. */
.bn-split-layout__toolbar {
    display: contents;
}

/* Each splitter pane is a flex column so its contents can fill height. Vertical
   overflow scrolls the pane itself (#1247) — tabbed content already scrolls
   internally via .bn-tabpanel's own overflow-y, so this stays inert for those
   consumers and only kicks in for plain (non-tabbed) pane content that grows
   taller than the pane. */
.bn-split-layout .rz-splitter-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* RadzenTabs inside the detail pane needs the same flex chain as the
   WorkspaceShell tab zone — replicated here because detail tabs are not
   children of .bn-workspace__tabs. */
.bn-split-layout .rz-tabview {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.bn-split-layout .rz-tabview-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

/* Same one-letter miss as in .bn-workspace__tabs above (#675). Detail-pane tabs sit
   inside a splitter pane that is already inset by the page, so they get no padding of
   their own — the pane's own content decides. */
.bn-split-layout .rz-tabview-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}