/* =============================================================================
 * 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: BarabNeo.styles.css (the Blazor scoped CSS bundle) is intentionally
 * NOT linked from the host app. All component styles live here as plain
 * descendant selectors. Keep the component-level .razor.css files as
 * read-only documentation references.
 * ============================================================================= */

/* BarabGrid — mirrored from BarabGrid.razor.css because BarabNeo.styles.css
   (the Blazor scoped bundle) is not linked from App.razor. 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-border, #e5e7eb);
    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 {
    color: var(--rz-text-secondary-color, #757575);
}

/* 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 because BarabNeo App.razor does not link
 * the Blazor scoped CSS bundle (BarabNeo.styles.css) — same pattern as
 * BarabGrid above. See ADR-021 in Obsidian:
 * 01_Projekty/barab/Planning/ADR/ADR-021-page-layout-zones-contract.md
 * ============================================================================ */

/* 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-border, #e5e7eb);
}

.bn-workspace__badges {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

/* tabs container: fills remaining height. The actions-tab SectionOutlet is
   placed by each page as the last child of <Tabs> inside <RadzenTabs>, where
   Radzen naturally renders it inline with the tab strip — so no positioning
   gymnastics here. 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;
}

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

.bn-workspace__tabs .rz-tabview-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 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-border, #e5e7eb);
    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-border, #e5e7eb);
    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-border, #e5e7eb);
}

.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 / actions-tab. */
.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;
}

/* Each splitter pane is a flex column so its contents can fill height. */
.bn-split-layout .rz-splitter-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 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;
}

.bn-split-layout .rz-tabview-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}