/* Override MudBlazor typography to use Inter across all variants */
:root {
    --mud-typography-default-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-h1-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-h2-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-h3-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-h4-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-h5-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-h6-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-subtitle1-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-subtitle2-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-body1-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-body2-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-button-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-caption-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mud-typography-overline-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Full-page center utility */
.full-page-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-action-disabled);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-action-default);
}

/* Reconnect modal — fix invisible text in dark mode */
#components-reconnect-modal {
    color: var(--mud-palette-black) !important;
}

/* ── Full-height layout chain ────────────────────────────────────────────────
   MudBlazor sets .mud-main-content { flex: 1 1 auto } expecting .mud-layout to
   be a flex column. But .mud-layout only says height: 100%, which resolves to
   auto (= content height) unless html/body have explicit heights.

   Anchoring html + body at 100% makes .mud-layout fill the viewport.
   Adding display:flex to .mud-layout activates the built-in flex:1 on
   .mud-main-content so it fills the remaining height after the appbar.
   overflow-y:auto on .mud-main-content lets normal pages scroll there
   (scrollbar appears inside the content area, right of the drawer).
   Pages that want a full-height section (e.g. validate split-view) can use
   flex:1 on their root element to fill .mud-container exactly. ────────────── */

html, body {
    height: 100%;
}

.mud-layout {
    display: flex;
    flex-direction: column;
}

.mud-main-content {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.mud-main-content > .mud-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* MudDivider full-width variant has flex-grow:1 for growing divider lines around
   a text label in horizontal flex rows. When PageHeader is a direct flex child of
   .mud-container (every normal page), that same class consumes all remaining height.
   Target only that exact position to leave the text-divider pattern intact elsewhere. */
.mud-main-content > .mud-container > .mud-divider-fullwidth {
    flex-grow: 0;
    flex-shrink: 0;
}

/* MudBlazor's sticky (pinned) DataGrid columns hardcode --mud-palette-background-gray,
   which doesn't match this theme's actual row background (--mud-palette-surface) —
   producing a visible mismatched-color stripe down sticky columns. Match it, and
   follow the same row-hover background MudBlazor uses everywhere else. */
.sticky-right,
.sticky-left {
    background-color: var(--mud-palette-surface) !important;
}

.mud-table-row:hover .sticky-right,
.mud-table-row:hover .sticky-left {
    background-color: var(--mud-palette-surface) !important;
}

/* Pager toolbar (rows-per-page + range + nav buttons) is flex-nowrap by default
   and overflows its container on narrow screens. Wrapping is a no-op once
   everything already fits on one line, so this is safe at any width. */
.mud-table-pagination-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    row-gap: 4px;
    justify-content: flex-end;
    padding-top: 8px;
}

.mud-table-pagination-toolbar .mud-table-pagination-spacer {
    flex: 0 0 0;
}

/* Outer border + radius wrapping a fixed-height scrolling table, shared by the
   dashboard and the search index page. Global rather than scoped to either:
   the child clip below cannot be scoped at all (CSS isolation never reaches a
   child component's own rendered markup), so keeping the pair together is the
   only way they stay readable as one rule.

   overflow:hidden on .table-wrap collapses it to near-zero height on narrow
   viewports (Chromium bug: overflow:hidden ancestor + position:sticky table
   header inside) — the corners are clipped on the table itself instead. */
.table-wrap {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    width: 100%;
}

.table-wrap .mud-table {
    border-radius: inherit;
    overflow: hidden;
}

/* MudDialog: the dialog backdrop container has zero padding by default, and
   dialogs are full-width up to their max-width class — on a narrow viewport
   that means the dialog panel spans edge-to-edge with no gutter at all, on
   every dialog in the app (merge/deactivate/link/etc). Give it breathing room. */
@media (max-width: 600px) {
    .mud-dialog-container {
        padding: 12px;
        box-sizing: border-box;
    }

    /* MergeProductsDialog/MergeManufacturersDialog hardcode
       Style="min-width: 480px/420px" on their root <MudDialog> to keep the merge
       form from looking cramped on desktop. min-width wins over max-width in
       CSS's own width-resolution order, so on any phone narrower than that
       (everything under ~480px — includes iPhone SE at 375px and most Android
       phones at 360px) the dialog is forced wider than the viewport itself,
       overflowing off-screen with no way to scroll to the cut-off edge. Only
       an !important external rule can beat a non-important inline style — let
       it shrink to fit below the breakpoint instead. */
    .mud-dialog {
        min-width: 0 !important;
    }
}

/* Card/mobile mode (.mud-xs-table) hides the entire table <thead> — including
   the column-filter row — via one blanket MudBlazor rule
   (.mud-table-head .mud-table-row{display:none}). Keep the nice stacked-card
   row layout for data, but un-hide just the filter row (a separate <tr> from
   the column-title row) and restyle it to stack one filter field per row,
   matching the card rows below, instead of forcing the whole grid into a
   horizontally-scrolling table whenever filters are open. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-head .mud-table-row:has(.filter-header-cell) {
        display: flex !important;
        flex-direction: column;
        border-top: 1px solid var(--mud-palette-table-lines);
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .mud-xs-table .mud-table-head .filter-header-cell {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 2px 16px;
        min-height: 0;
    }

    /* Filterable="false" columns (e.g. the Akce/actions column, or ones with
       no FilterTemplate) still get a .filter-header-cell <th> — just an empty
       one. Harmless in normal table layout (it's just a blank grid cell), but
       our flex-column stack above turns every <th> into its own stacked row,
       so each empty one shows up as a blank gap in the mobile filter list. */
    .mud-xs-table .mud-table-head .filter-header-cell:empty {
        display: none;
    }

    .mud-xs-table .mud-table-head .filter-header-cell > * {
        width: 100%;
    }

    /* The filter inputs render at mud-input-margin-dense already (small), the
       remaining bulk is this wrapper's own reserved label/hint space. Trim it. */
    .mud-xs-table .mud-table-head .filter-header-cell .mud-input-control {
        margin-top: 0;
    }
}

/* .mud-table.cell with .mud-input-text has margin_top: 0, but mud-picker itself should have margin-top: 16px
   We must take this lack of margin into account and subtract 16px from the translate values. */
.mud-xs-table .mud-table-head .filter-header-cell
.mud-input.mud-input-text-with-label:not(.mud-shrink):not(:focus-within)
~ .mud-input-label-inputcontrol {
    transform: translate(0, 8px) scale(1);
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, -14.5px) scale(0.75);
}

/* PageHeader title + actions row. Below this width, title text can shrink to
   fit its own line indefinitely (via word-wrap), so flex-wrap alone never
   triggers — the actions row stays pinned beside it and overflows. Force a
   deterministic column stack instead. MudStack's own Row="true" utility class
   (.flex-row) sets flex-direction:row !important, so this needs !important too. */
@media (max-width: 600px) {
    .page-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}