@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* /Components/DynamicPrices/DynamicPrices.razor.rz.scp.css */
.diagram-wrapper[b-n3yvxsypjs] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
/* /Components/Pages/Config/Floors/FloorPage.razor.rz.scp.css */
[b-c0re71xgve] .floor-tabs {
    /* MudTabs renders display:flex;flex-direction:column and grows via the "flex-grow-1" utility
       class, but a flex item's default min-height is content-based, so it was growing past its
       MudPaper parent's bounded height instead of clipping to it. ::deep is required: MudTabs'
       own root div isn't literal markup in this file, so a plain (non-::deep) scoped rule
       silently never matches it under Blazor CSS isolation (same pitfall documented in
       PlanningPage.razor.css). */
    min-height: 0;
}

[b-c0re71xgve] .floor-tabs-panels {
    /* Targets MudTabs' internal .mud-tabs-panels wrapper via the TabPanelsClass parameter.
       MudBlazor's own CSS already gives it flex-grow:1, but (same issue as .floor-tabs above)
       it still needs min-height:0 to actually shrink to the remaining space instead of growing
       to fit whichever tab panel's content is tallest. */
    min-height: 0;
}

[b-c0re71xgve] .floor-tab-panel {
    /* Targets the active MudTabPanel's own content div via the PanelClass parameter. Needs a
       definite height so the "overflow-auto" utility class (passed alongside it) has a bounded
       box to scroll within — without this it just grows to content size like everything above
       it, pushing the tab headers off-screen instead of staying put while only this panel
       scrolls. */
    height: 100%;
}
/* /Components/Pages/PlanningPage.razor.rz.scp.css */
.planning-drop-wrapper[b-mj3xhh4z3g] {
    /* A literal div in PlanningPage.razor wrapping MudDropContainer, purely so the ::deep rule
       below has a scoped ancestor to anchor to — see the HTML comment above the wrapper in
       PlanningPage.razor for why that's necessary (::deep alone isn't enough when the ::deep'd
       element's nearest literal-markup ancestor is a sibling, not a parent). Needs the exact same
       flex/height chain as .planning-drop-container below, since it sits between the same two
       links (MudStack above, MudDropContainer's own root below). */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

[b-mj3xhh4z3g] .planning-drop-container {
    /* ::deep is required: MudDropContainer renders its own wrapping div — a child component's
       own root element, not literal markup in PlanningPage.razor — so a plain (non-::deep) scoped
       rule silently never matches it under Blazor CSS isolation (the exact same pitfall already
       documented for .planning-heat/MudDropZone in PlanningGrid.razor.css). Without ::deep this
       whole ruleset was dead: the div rendered as a plain auto-height block, so nothing below it
       (.planning-page-layout, PlanningGrid's root, .planning-grid) had a definite height to fill,
       and the grid grew to its full content size instead of scrolling within the viewport.

       It needs to participate in the outer MudStack's height:100dvh flex-column chain the same way
       PlanningGrid's root already does, or the grid below it won't get its remaining vertical
       space. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: 16px;
}

.planning-page-layout[b-mj3xhh4z3g] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.planning-side-panel[b-mj3xhh4z3g] {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 1px solid var(--mud-palette-table-lines);
    padding-left: 8px;
    overflow-y: auto;
}
[b-mj3xhh4z3g] .planning-side-panel .mud-picker-calendar-container {
    margin: auto;
}

.planning-reservation-list[b-mj3xhh4z3g] {
    overflow-y: auto;
}

.planning-drag-source-zone[b-mj3xhh4z3g] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1 1 auto;
}

[b-mj3xhh4z3g] .planning-drag-item {
    /* ::deep required — MudPaper is a child component, so the class passed into it via Class="..."
       lands on MudPaper's own rendered root div, which (like MudCard/MudCardHeader elsewhere in
       this file) doesn't carry PlanningPage's scope attribute itself. See the .planning-drop-container
       rule above for the fuller explanation of why that's necessary under Blazor CSS isolation.

       cursor: default, not grab — the row itself isn't draggable anymore (see the MudDragHandle
       wrapping each row's drag_handle icon in PlanningPage.razor); MudBlazor's own CSS already puts
       cursor: grab/grabbing on .mud-drag-handle unconditionally, so nothing needs adding for that. */
    cursor: default;
}

[b-mj3xhh4z3g] .planning-drag-item .mud-drag-handle {
    /* MudDragHandle wraps only the small (20px) drag-handle icon, and it's now the ONLY way to
       start a drag on touch (see MudDropZone.razor.cs's IsEffectivelyDraggable, and MudBlazor's own
       .mud-drop-item[draggable=true] touch-action:none rule losing its match on the row once a
       handle takes over) — 20px alone is well under the ~44px comfortable touch target, so pad the
       hit area out without growing the icon itself. The negative margin cancels the padding's
       effect on the row's MudStack layout, so nothing visibly shifts. */
    padding: 12px;
    margin: -12px;
}

[b-mj3xhh4z3g] .planning-drag-item--participant {
    /* Indented relative to its owning reservation's row (see .planning-drag-item--reservation's
       mt-2 in PlanningPage.razor, which puts a gap before the NEXT reservation group starts) so the
       flat drag-item list still reads as "participants grouped under their reservation" even though
       there's only one actual MudDropZone/list underneath. */
    margin-left: 1.5rem;
}

[b-mj3xhh4z3g] .planning-selected-timeslot-card {
    border-color: var(--planning-accent, var(--mud-palette-lines-default));
}

[b-mj3xhh4z3g] .planning-selected-timeslot-header {
    background-color: var(--planning-accent, var(--mud-palette-primary));
    color: var(--planning-accent-text, var(--mud-palette-primary-text));
}

[b-mj3xhh4z3g] .planning-selected-timeslot-content {
    background-color: color-mix(in srgb, var(--planning-accent, var(--mud-palette-primary)) 18%, var(--mud-palette-surface));
}
/* /Components/Pages/PosPage.razor.rz.scp.css */
.pos--container[b-m2aaeb23ud] {
    display: grid;
    height: 100dvh;
    overflow: auto;
}

@container (max-width: 659px) {
    .pos--container[b-m2aaeb23ud] {
        grid-template-rows: minmax(300px, 1fr) 1fr;
    }
}

@container (min-width: 660px) {
    .pos--container[b-m2aaeb23ud] {
        grid-template-columns: 350px 1fr;
    }
}

.pos--sidebar[b-m2aaeb23ud] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .5rem;
    overflow: hidden;
    position: sticky;
    top: .5rem;
    max-height: calc(100dvh - 1rem);
    z-index: 10;
    background-color: var(--mud-palette-background);
}

.pos--content[b-m2aaeb23ud] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .5rem;
    flex: 1 1 0px;
}

@container (max-width: 659px) {
    .pos--numpad[b-m2aaeb23ud] {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,.2);
    }
}
/* /Components/Planning/PlanningGrid.razor.rz.scp.css */
.planning-grid-root[b-ddlur752al] {
    /* This component is meant to sit inside a flex layout the host page controls (see
       PlanningPage.razor.css) — flex/min-width so it shares space correctly there, but these
       are no-ops if the parent isn't flex, so it's still fine to drop in anywhere. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

.planning-grid-zoom[b-ddlur752al] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 1.5rem;
    padding: .25em .5em;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.planning-grid[b-ddlur752al] {
    display: grid;
    position: relative;
    overflow: auto;
    flex: 1 1 auto;
    /* Fill the available width — columns are minmax(ColumnWidthPx, 1fr), so they grow to
       use the space (no more empty gray gutter) but never shrink below the slider's value;
       if even the minimums don't fit, this fills 100% and the grid content overflows into
       its own horizontal scrollbar instead of squeezing columns further. */
    width: 100%;
}

/* Stands in for .planning-grid while its data is loading, or once loaded but genuinely empty
   for the day — same flex: 1 1 auto so it fills the same space the grid would have, instead of
   collapsing to content height and leaving .planning-grid-zoom floating in the middle of
   .planning-grid-root. */
.planning-grid-state[b-ddlur752al] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    gap: .5rem;
}

.planning-column-line[b-ddlur752al] {
    border-right: 1px solid var(--mud-palette-table-lines);
}

.planning-row-line[b-ddlur752al] {
    /* Real grid item, not a CSS repeating-gradient background — same reasoning as
       .planning-column-line above. Row lines used to be drawn with a repeating-linear-gradient
       tiled every var(--planning-row-height), on the (mistaken) assumption that a fixed-px tile
       height meant it could never drift the way the 1fr-stretched column lines can. In practice,
       at high zoom the grid's total height can reach several thousand pixels (up to 96 rows x
       60px), and browsers' repeating-gradient rasterization loses precision over that much tiled
       height regardless of the tile size being an exact integer — tile boundaries blur, double
       up, or vanish. Real grid items are pixel-exact by construction, just like the columns. */
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.planning-corner[b-ddlur752al] {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-table-lines);
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.planning-header[b-ddlur752al] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-table-lines);
    border-right: 1px solid var(--mud-palette-table-lines);
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    /* Overrides the implicit auto min-width grid items get by default, which would otherwise
       keep this column from shrinking below the label's full text width no matter how narrow the
       grid track itself is asked to be. */
    min-width: 0;
}

/* text-overflow: ellipsis needs its own block-level box to truncate against — applying it
   directly to .planning-header (a flex container) doesn't reliably work, since the text becomes
   an anonymous flex item that (like the grid item above) refuses to shrink below its own content
   width by default. */
.planning-header--label[b-ddlur752al] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.planning-hour-label[b-ddlur752al] {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: .125rem;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-table-lines);
    border-bottom: 1px solid var(--mud-palette-table-lines);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.planning-column-background[b-ddlur752al] {
    /* One per location (not per block, unlike .planning-timeslot-column below) so a location's
       derived column-background wash shows for its FULL height even when it has no timeslots at
       all that day. Rendered before the row/column lines and hour labels in DOM order so those
       still paint on top of it (plain in-flow grid items paint in DOM order — see
       .planning-timeslot-column below for why the timeslot blocks themselves, being absolutely
       positioned, don't need the same ordering care).

       --planning-accent is set inline per-location (see AccentStyle in PlanningGrid.razor.cs) from
       LocationItem.HeaderColor — this is the ONLY color a location configures; everything else
       (this wash, and the timeslot fills below) is a color-mix() of it against the current
       MudBlazor theme's own surface/background tokens, which is what makes it come out right in
       both light and dark mode without a separate color needing to be picked for each. Keep the
       mix percentage here in sync with TrackPage.razor's BackgroundMixPercent, which previews the
       same calculation on the Appearance tab. */
    background-color: color-mix(in srgb, var(--planning-accent, var(--mud-palette-primary)) 8%, var(--mud-palette-background));
    pointer-events: none;
}

.planning-timeslot-column[b-ddlur752al] {
    /* A plain (non-absolute) grid item placed on the block's real grid-column — the browser's
       own grid layout guarantees this fills exactly that column's width, however it's sized.
       `position: relative` makes it the containing block for the .planning-timeslot child below,
       so that child only ever needs a small fixed inset, never a computed/percentage offset.
       It spans the FULL column height (so a timeslot starting anywhere can still be positioned
       via plain top/height), which means every timeslot in the same column overlaps every other
       one's wrapper — pointer-events: none keeps that overlap from blocking clicks/hovers on
       earlier timeslots; only the actual visible .planning-timeslot box (pointer-events: auto)
       is interactive. */
    position: relative;
    pointer-events: none;
}

[b-ddlur752al] .mud-drop-zone.planning-timeslot {
    /* ::deep is required: .planning-timeslot is applied to a MudDropZone, a child component, so
       its root element is rendered by MudDropZone's own markup, not PlanningGrid.razor's — Blazor
       CSS isolation only stamps this file's scope attribute onto elements literally authored in
       PlanningGrid.razor, so a plain (non-::deep) scoped rule silently never matches it (this was
       the actual cause of "the timeslot is not styled" — not a specificity conflict).

       The compound selector (.mud-drop-zone.planning-timeslot, not just .planning-timeslot) is
       still worth keeping on top of ::deep: this element already carries MudBlazor's own
       .mud-drop-zone class (position: relative, plus a transition), and a plain single-class
       .planning-timeslot rule would have the SAME specificity as .mud-drop-zone, leaving
       stylesheet load order to decide the winner. The compound selector has higher specificity,
       so this always wins regardless.

       The MudDropZone for this booking itself (not a separate overlay) — dropping directly onto
       a timeslot is possible because the zone IS the visible block, styled via ChildContent inside
       it (see PlanningGrid.razor). top/height are set inline per block — a timeslot can start at
       any minute, not just on a slot boundary, so it's positioned in pixels rather than placed
       on a CSS grid row. left/right are a small fixed inset into .planning-timeslot-column, which
       is already exactly the width of its column (see above).

       background-color/border-color are color-mix()'d from --planning-accent — a CSS variable
       inherited from the .planning-timeslot-column wrapper above (custom properties inherit
       through the DOM regardless of Blazor's ::deep scoping, which only affects selector
       matching) — against the theme's own --mud-palette-surface, exactly like
       .planning-column-background above. A location with no configured header falls back to
       var(--mud-palette-primary) as the mix color, so uncustomized locations still look
       intentional rather than colorless. Keep this percentage in sync with TrackPage.razor's
       HeatMixPercent.

       transition: MudBlazor's own .mud-drop-zone class ships `transition: all 300ms ...` — left
       alone, even a class swap applied instantly in C# (see PlanningGrid.razor.cs's
       OnTimeSlotClicked, which was specifically fixed to render the selected class with no
       artificial delay) would still visibly fade its color in over that same 300ms, undoing the
       point of that fix. This compound selector already has higher specificity than plain
       .mud-drop-zone (see above), so overriding just `transition` here — scoped to the two
       properties that actually differ in .planning-timeslot--selected below, not `all` — is
       enough; no !important needed. */
    position: absolute !important;
    pointer-events: auto;
    cursor: pointer;
    padding: .25rem;
    box-sizing: border-box;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    background-color: color-mix(in srgb, var(--planning-accent, var(--mud-palette-primary)) 4%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    font-size: 0.75rem;
    transition: background-color 100ms ease-out, border-color 100ms ease-out;
}

[b-ddlur752al] .mud-drop-zone.planning-timeslot.planning-timeslot--selected {
    /* Same ::deep + compound-selector reasoning as the base .planning-timeslot rule above — this
       is still the MudDropZone's own root element. A stronger mix of the same --planning-accent
       (see above) makes the selected state read as "more of the location's own color", rather
       than a color inversion — and the border switches to the accent itself at full strength for
       a visible ring in both themes (a literal black border, the old default, all but disappears
       against a dark surface). Keep this percentage in sync with TrackPage.razor's
       SelectedMixPercent. */
    border-color: var(--planning-accent, var(--mud-palette-primary));
    background-color: color-mix(in srgb, var(--planning-accent, var(--mud-palette-primary)) 25%, var(--mud-palette-surface));
    outline: 2px solid var(--planning-accent, var(--mud-palette-primary));
}

.planning-timeslot--fill[b-ddlur752al] {
    /* Occupancy indicator: grows from the bottom as Participants/MaximumParticipants increases,
       via an inline `height` percentage (see FillPercentage in PlanningGrid.razor). A flat
       low-alpha NEUTRAL GRAY overlay (not black) — a same-hue overlay couldn't guarantee contrast
       against the block's own color-mix()'d background, and pure black is a light-mode-only trick
       that all but disappears against a dark timeslot background; mid-gray at low alpha reads as a
       darkening on a light fill and a lightening on a dark one, so it stays visible in both themes
       without needing to know which is active. Positioned relative to .planning-timeslot itself
       (the nearest positioned ancestor), so 0/0/0 reaches its full padding box, not just the padded
       content area — the fill should read as filling the whole block, not just the text region.
       Absolutely positioned elements always paint after normal-flow siblings regardless of DOM
       order, so this alone would sit ON TOP of .planning-timeslot--content below even though it
       comes first in markup — that's fixed by giving --content its own `position: relative` (see
       below), which promotes it to the same "positioned descendant" paint step, where DOM order
       then decides the stacking (last wins). */
    position: absolute;
    inset: auto 2px 2px;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--planning-accent, var(--mud-palette-primary)) 50%, var(--mud-palette-surface));
    pointer-events: none;
}

.planning-timeslot--content[b-ddlur752al] {
    /* See .planning-timeslot--fill above for why this needs `position: relative` — it has no
       offset properties, so this doesn't otherwise move or resize it, it only promotes it to the
       same paint step as the (also positioned) fill bar so DOM order there decides who's on top. */
    position: relative;
    display: grid;
    height: 100%;
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    grid-template-rows: minmax(0, auto) minmax(0, auto);
    grid-template-areas:
    "tl tr"
    "bl br";
    justify-content: space-between;
    gap: 6px;
}

.planning-timeslot--content .top-left[b-ddlur752al]     { grid-area: tl; min-width: 0; }
.planning-timeslot--content .top-right[b-ddlur752al]    { grid-area: tr; min-width: 0; justify-self: end; }
.planning-timeslot--content .bottom-left[b-ddlur752al]  { grid-area: bl; min-width: 0; align-self: end; }
.planning-timeslot--content .bottom-right[b-ddlur752al] { grid-area: br; min-width: 0; justify-self: end; align-self: end; }

.planning-timeslot--name[b-ddlur752al] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-ddlur752al] .planning-timeslot--badge-icon {
    /* MudIcon's own default Small size reads oversized against these compact (often <20px tall,
       for a single GoKart-style lane) blocks — shrunk further, and flex: 0 0 auto so it never
       ellipsizes/shrinks like the name text next to it does. */
    flex: 0 0 auto;
    font-size: 0.85rem !important;
}

[b-ddlur752al] .planning-timeslot--participants {
    font-size: 0.7rem;
    color: inherit;
    opacity: 0.75;
}
/* /Components/Pos/NumPad.razor.rz.scp.css */
.numpad--grid[b-5q0qjteeb1] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .25rem;
}