/* lp-components.css — global styles de-duplicated from per-instance component <style> blocks.
   Loaded via a <link> at the END of <body> in _Layout.cshtml so it keeps the SAME cascade
   precedence the original in-body inline styles had (beats head-injected Telerik/theme CSS).
   Perf: replaces hundreds of duplicate <style> tags (CellEditor ~545x, FormControlContainer per control). */

/* --- from CellEditor.razor --- */

    /* Remove border from checkbox */
    .custom-checkbox.k-checkbox {
        border: none !important;
    }

    /* Remove border when checked */
    .custom-checkbox.k-checkbox:checked {
        border: none !important;
    }

    /* Remove border on hover and focus states */
    .custom-checkbox.k-checkbox:hover,
    .custom-checkbox.k-checkbox:focus {
        border: none !important;
    }

    .animated-button {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        min-width: 40px !important;
        max-width: 40px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        padding: 4px 8px !important;
    }

    .animated-button.has-text {
        min-width: 200px !important;
        max-width: 200px !important;
    }

    .animated-button .button-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 24px !important;
    }

    .animated-button .button-text {
        display: inline-block !important;
        opacity: 0;
        margin-left: 8px !important;
        transition: opacity 0.2s ease-in-out !important;
    }

    .animated-button.has-text .button-text {
        opacity: 1;
    }

    .unit-conversion-tester {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .unit-conversion-tester .tester-inputs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .unit-conversion-tester .tester-message,
    .unit-conversion-tester .tester-result {
        font-size: 0.85rem;
    }

    .lp-button-control {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }


    .PaddingToMatchTileLayout {
        padding: 0.5rem;
    }

    .mini-chip {
        transform: scale(0.8);
        margin: 0px;
    }

    /* Prevent Updates marker: a filled ring (thick solid band, hollow centre) target. */
    .spec-tag-target {
        display: inline-block;
        width: 0.85em;
        height: 0.85em;
        border: 0.22em solid currentColor;
        border-radius: 50%;
        box-sizing: border-box;
        vertical-align: middle;
    }

    /* Disabled specification tag: greyed, no background, light text. The body div carries .spec-tag-disabled;
       the :has() selector strips the surrounding Telerik chip's background/border. */
    .spec-tag-disabled {
        color: #9e9e9e;
        font-style: italic;
    }

    .k-chip:has(.spec-tag-disabled) {
        background: transparent;
        border-color: #e0e0e0;
        color: #9e9e9e;
    }

    /* PO review tag — the shared confidence pill. See ReviewConfidenceFormat.TagStyle/TagCssClass.
       The colours and the shape are written INLINE, the same way every other review pill on this screen is,
       because these render inside Telerik chips and grid cells whose own rules outrank a plain class selector.
       What CANNOT be written inline lives here.

       THE TWO STANDING FACTS ARE SEPARATE CLASSES AND MUST STAY THAT WAY. --off means "switched off in this
       review", a live state one click changes. --overridden means "the reviewer has moved off what the AI
       concluded", which is history. Greying on --off is precisely the defect this vocabulary replaced: it
       greyed a specification the reviewer had just switched ON. */
    .lp-review-tag {
        cursor: help;
    }

    /* Windows High Contrast and forced-colors discard author colours outright, so the overridden state has to
       survive as SHAPE (a dashed border) and TEXTURE (a strike-through) — never as a hue. Same reason the
       switched-off outline is re-stated: without it, "off" and "on" would both render as the system's fill. */
    @media (forced-colors: active) {
        .lp-review-tag--overridden {
            forced-color-adjust: none;
            border: 1px dashed GrayText;
            color: GrayText;
            background: Canvas;
            text-decoration: line-through;
        }

        .lp-review-tag--off {
            border: 1px solid CanvasText;
            background: Canvas;
        }
    }

    .NoBorderTextBox {
        border-style: none;
    }

    .TitleTextBox {
        border-style: none;
        font-size: 1.5rem;
    }

    .SectionTitleTextBox {
        border-style: none;
        font-size: 1rem;
        font-weight: 600;
    }

    .SectionTitleTextBox--page {
        font-size: 1.15rem;
    }

    .SectionTitleText {
        font-size: 1rem;
        font-weight: 600;
    }

    .SectionTitleText--page {
        font-size: 1.15rem;
    }

    .RecordTitleTextBox {
        padding-left: 0;
        border-style: none;
        font-size: 1.5rem;
    }

    .NoBorderTextBox .k-input-inner {
        padding-left: 0;
    }


/* --- from FormControlContainer.razor --- */
    .lp-form-control-icon {
        transition: color 160ms ease-in-out, fill 160ms ease-in-out, stroke 160ms ease-in-out;
    }

/* --- from QuickFilterMenu.razor (per-column filter menu) ---
   Global rather than scoped: this file is linked at the end of <body> so it wins over the
   Telerik/theme sheets the app injects into <head> at runtime. */
.lp-quick-filter {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 260px;
    max-width: 340px;
    padding: .25rem;
}

/* Any-of / All-of, shown only for a collection column. Sits directly above the value list because
   it governs how the ticks below are read. Reuses .lp-fnchip so it matches the other small toggles
   in the grid's menus rather than introducing a fourth chip style. */
.lp-quick-filter__mode {
    display: flex;
    gap: .25rem;
    padding: .1rem .25rem .35rem;
}

.lp-quick-filter__values {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .12));
    border-radius: 3px;
    padding: .25rem;
}

.lp-quick-filter__value {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .2rem;
    cursor: pointer;
}

.lp-quick-filter__value:hover {
    background: rgba(0, 0, 0, .04);
}

/* The label takes the slack so counts stay right-aligned in a ragged list. */
.lp-quick-filter__value-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-quick-filter__value-count {
    flex: 0 0 auto;
    font-size: var(--lp-menu-font-sm, .82rem);
    opacity: .6;
}

.lp-quick-filter__section-title {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--lp-menu-font, .85rem);
    padding: .2rem 0;
    user-select: none;
}

.lp-quick-filter__operator,
.lp-quick-filter__presets {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.lp-quick-filter__presets {
    max-height: 200px;
    overflow-y: auto;
}

.lp-quick-filter__preset {
    padding: .2rem .35rem;
    cursor: pointer;
    border-radius: 3px;
}

.lp-quick-filter__preset:hover {
    background: rgba(0, 0, 0, .06);
}

.lp-quick-filter__preset.selected {
    background: var(--lp-accent-tint-strong);
    font-weight: 600;
}

.lp-quick-filter__actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding-top: .25rem;
    border-top: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .1));
}

/* ==========================================================================
   Grid totals — summary dock, group total chips, totals composer
   ==========================================================================

   Two rendering contexts, and the glass has to work in both:

   * Inside a DynamicPage, the grid sits on a translucent .dashboard-card over the app's gradient,
     so a frosted surface reads as glass — it blurs the gradient behind it.
   * Standalone, the grid has no card and sits on a plain background, where the same rules would
     look like weak grey rather than glass.

   So these surfaces state their own tint and blur rather than relying on what is behind them, and
   the tint is deliberately denser than .dashboard-card's (0.82 vs 0.73). Every one of them carries
   numbers, and translucency that is fine behind body text drops small tabular figures below the
   4.5:1 contrast floor.
   ========================================================================== */

/* Totals used to be purple, spelled out about thirty times. That was defensible while they lived
   behind their own Sigma button; now they sit inside the Group & totals menu next to neutral group
   chips, and a second palette in one popup reads as a second control. One accent, stated once, so
   sort/filter/group/totals match and a theme change moves all of them.

   The dark override is here because the ThemeBuilder light and dark sheets ship identical
   --kendo-color-* values, so the tokens alone do not follow html.dark. */
:root {
    /* One type scale for every grid menu -- toolbar search, filter, sort, group, and the per-column
       quick filter. They are the same control wearing five labels, so a title or a hint must not
       change size depending on which button opened it. Each used to pick its own. */
    --lp-menu-font: 0.85rem;
    --lp-menu-font-sm: 0.82rem;
    --lp-menu-font-xs: 0.72rem;
    --lp-menu-pad: 0.75rem;

    --lp-accent: var(--kendo-color-primary, #0f6cbd);
    --lp-accent-ink: var(--kendo-color-primary-on-subtle, #0a2e4a);
    --lp-accent-tint-faint: var(--kendo-color-primary-subtle, #ebf3fc);
    --lp-accent-tint: var(--kendo-color-primary-subtle, #ebf3fc);
    --lp-accent-tint-strong: var(--kendo-color-primary-subtle-hover, #dbe9fb);
    --lp-accent-line: var(--kendo-color-primary-emphasis, #abd1f8);
}

html.dark {
    --lp-accent: #8ab4ff;
    --lp-accent-ink: #d6e4ff;
    --lp-accent-tint-faint: rgba(138, 180, 255, .08);
    --lp-accent-tint: rgba(138, 180, 255, .16);
    --lp-accent-tint-strong: rgba(138, 180, 255, .24);
    --lp-accent-line: rgba(138, 180, 255, .38);
}

.lp-totals-surface {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15);
}

/* On a page with no translucent card there is no gradient to frost, so lift the tint to opaque-ish
   and drop the heavy shadow, which would otherwise float unattached. */
.dynamic-page--standalone .lp-totals-surface,
.lp-grid-standalone .lp-totals-surface {
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 10px rgba(31, 38, 135, .12);
}

html.dark .lp-totals-surface {
    background: rgba(38, 38, 38, .72);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);
    color: var(--kendo-color-on-app-surface, #f4f4f5);
}

html.dark .dynamic-page--standalone .lp-totals-surface,
html.dark .lp-grid-standalone .lp-totals-surface {
    background: rgba(38, 38, 38, .94);
}

/* ---- D1: the summary dock ---- */

.lp-totals-dock {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    padding: .3rem .5rem;
    border-top: 2px solid var(--lp-accent-line);
    border-radius: 0 0 8px 8px;
    overflow-x: auto;
    min-height: 44px;
}

.lp-totals-dock__label {
    display: flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lp-accent-ink);
    padding: 0 .5rem 0 .2rem;
    white-space: nowrap;
}

html.dark .lp-totals-dock__label { color: var(--lp-accent); }

.lp-totals-dock__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    padding: .2rem .4rem;
    border-radius: 6px;
    cursor: pointer;
    min-width: 0;
    background: transparent;
    border: 1px solid transparent;
}

.lp-totals-dock__cell:hover {
    background: var(--lp-accent-tint);
    border-color: var(--lp-accent-line);
}

.lp-totals-dock__cell.is-active { background: var(--lp-accent-tint-faint); }

.lp-totals-dock__colname {
    font-size: .62rem;
    color: rgba(60, 60, 80, .6);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

html.dark .lp-totals-dock__colname { color: rgba(255, 255, 255, .55); }

/* ---- shared chip ---- */

.lp-agg-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .12rem .5rem;
    border-radius: 11px;
    background: var(--lp-accent-tint);
    border: 1px solid var(--lp-accent-line);
    font-size: var(--lp-menu-font-xs);
    font-weight: 600;
    color: var(--lp-accent-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lp-agg-chip__fn {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lp-accent);
}

.lp-agg-chip--dropped {
    background: rgba(198, 40, 40, .1);
    border-color: rgba(198, 40, 40, .35);
    color: #b71c1c;
}

/* ---- D2: group strip chips ---- */

.lp-group-totals {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
    padding-left: .75rem;
    flex-wrap: wrap;
}

.lp-group-footer {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .5rem .3rem 2.2rem;
    background: var(--lp-accent-tint-faint);
    font-size: .7rem;
}

/* ---- shared popup surface (cell picker + composer) ---- */

.lp-totals-pop {
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 16px 48px rgba(31, 38, 135, .3);
    border-radius: 12px;
    padding: .5rem;
    min-width: 210px;
}

html.dark .lp-totals-pop {
    background: rgba(40, 40, 44, .95);
    border-color: rgba(255, 255, 255, .12);
    color: #f4f4f5;
}

.lp-totals-pop__title {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888;
    padding: .2rem .5rem .35rem;
}

.lp-totals-pop__opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .35rem .55rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: .8rem;
}

.lp-totals-pop__opt:hover { background: var(--lp-accent-tint); }

.lp-totals-pop__opt.is-on {
    background: var(--lp-accent-tint-strong);
    font-weight: 600;
    color: var(--lp-accent-ink);
}

.lp-totals-pop__hint {
    font-size: .65rem;
    color: #999;
    padding: .4rem .55rem .15rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
    margin-top: .3rem;
    line-height: 1.4;
}

/* ---- D3: composer ---- */

.lp-composer { width: 380px; max-height: 70vh; overflow-y: auto; padding: .85rem 1rem; }

/* Inside the group menu the panel already sets the width, the padding and the scroll, so the
   composer must claim none of them: a fixed 380px here forced the menu wider than every other
   toolbar popup, and a second overflow-y made the section scroll independently of the panel
   around it. */
.lp-composer--embedded {
    width: auto;
    max-height: none;
    overflow-y: visible;
    padding: 0;
}

.lp-composer__h { font-size: var(--lp-menu-font); font-weight: 600; color: var(--lp-accent-ink); }

.lp-composer__sub { font-size: var(--lp-menu-font-sm); color: var(--kendo-color-subtle, #707070); margin-bottom: .5rem; }

/* Subordinate to the menu's own section titles: same family, one step down and in subtle ink.
   Accent blue read as a link here, and at .62rem it read as a different component's heading. */
.lp-composer__sec {
    font-size: var(--lp-menu-font-sm);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle, #707070);
    margin: .75rem 0 .35rem;
}

.lp-composer__row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    flex-wrap: wrap;
}

.lp-composer__name { font-size: var(--lp-menu-font); font-weight: 600; min-width: 105px; }

.lp-fnchip {
    padding: .12rem .55rem;
    border-radius: 10px;
    font-size: var(--lp-menu-font-xs);
    font-weight: 700;
    border: 1px solid var(--lp-accent-line);
    color: var(--lp-accent);
    background: transparent;
    cursor: pointer;
    user-select: none;
}

.lp-fnchip:hover { background: var(--lp-accent-tint); }

.lp-fnchip.is-on { background: var(--lp-accent); color: #fff; border-color: var(--lp-accent); }

/* An inner grid expanded inside the page-settings panel (e.g. Dashboard Items).
   The panel is a narrow sidebar; a grid at its natural height fills it entirely the moment the
   section opens, pushing every field below out of reach.

   Scoped to the panel rather than to each grid, deliberately: CellEditor renders an inner grid from
   fourteen separate places depending on the control type, so wrapping call sites fixes whichever one
   was tested and leaves the rest — this covers every path, including ones added later. A Telerik
   grid is a flex column, so bounding it makes its own content area scroll rather than clipping. */
.drawer-settings-scroll .k-grid,
.page-settings-window-scroll .k-grid {
    max-height: 45vh;
}

.drawer-settings-scroll .k-grid .k-grid-content,
.page-settings-window-scroll .k-grid .k-grid-content {
    overflow-y: auto;
}

.lp-menu-inner-grid {
    margin-top: .4rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
}

html.dark .lp-menu-inner-grid { border-color: rgba(255, 255, 255, .12); }

/* A dashboard item whose ControlType the dashboard cannot render. Stated on the tile face rather
   than left blank, so a mis-picked widget type is visibly a fault instead of a missing card. */
.lp-dashboard-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 1rem;
    text-align: center;
    height: 100%;
}

.lp-dashboard-unsupported__mark { font-size: 1.6rem; line-height: 1; opacity: .75; }
.lp-dashboard-unsupported__hint { font-size: .8rem; opacity: .7; }

/* Interval pills under a grouped date column's chip in the Group menu. Indented so they read as
   belonging to the chip above them; the pills themselves reuse .lp-fnchip unchanged. */
.lp-group-menu__intervals {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: -.15rem 0 .35rem 1.1rem;
}

.lp-totals-toggle.is-on {
    background: rgba(255, 255, 255, .85) !important;
    color: var(--lp-accent) !important;
    border: 1.5px solid var(--lp-accent) !important;
    font-weight: 700;
}


/* --- from DynamicNestedGrid.razor ---
   Every grid instance used to emit these inline, and a detail row renders a whole nested
   grid inside its parent's DOM, so one screen shipped the same rules several times over.
   The .columnRowButton rule was worse again: it sat in a HeaderTemplate, once per column. */

/* Ensure the popup root matches content width and clips overflow */
.lp-group-menu__popup {
    min-width: 280px;
    max-width: 360px;
    box-sizing: border-box;
    /* The panel inside does the scrolling; clipping here as well would hide its scrollbar. */
    overflow: hidden;
    max-height: min(70vh, 620px);
    background-color: var(--kendo-color-surface, #fff);
    z-index: 10000; /* keep above grid content */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* The filter menu holds a whole condition builder, so it needs the room the other three don't.
   It stays a variant of the same popup rather than an inline Width/Height on the component: a
   fixed height also ignored the 70vh cap, which is what put the group menu off the bottom of the
   screen in the first place. */
.lp-group-menu__popup--wide {
    min-width: min(600px, 92vw);
    max-width: min(600px, 92vw);
}

/* Some themes wrap content; ensure inner container is opaque too */
.lp-group-menu__popup, .lp-group-menu__popup .k-popup, .lp-group-menu__popup .k-popup-content {
    background-color: var(--kendo-color-surface, #fff);
    color: var(--kendo-color-on-app-surface, inherit);
}

/* Make sure SVG icons use a visible color and size */
.lp-group-menu__popup .k-svg-icon {
    color: var(--kendo-color-on-app-surface, inherit);
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* Slight hover styling for available columns for visual clarity */
.lp-group-menu__column:hover {
    background-color: var(--kendo-color-base-subtle-hover, rgba(0, 0, 0, 0.06));
}

/*
                                A CSS rule that matches the OnRowRender handler to
                                conditionally hide hierarchy expand buttons and
                                stops the pointer events of the cells with no
                                expand buttons.
                                You may want to add this to your site-wide stylesheet.
                            */
.k-grid tr.no-children td.k-hierarchy-cell * {
    display: none;
}

.k-grid tr.no-children td.k-hierarchy-cell {
    pointer-events: none;
}

.k-grid-columnmenu-popup.k-popup {
    max-width: unset !important;
}

/* shrink the hierarchy column - do not hide it completely */
.no-default-hierarchy-column .k-hierarchy-col {
    width: 0;
}

/* hide everything in the hierarchy column */
.no-default-hierarchy-column .k-hierarchy-cell * {
    display: none;
}

/* Hide the Group Panel but keep grouping enabled via column menu/tools */
.no-group-panel .k-grouping-header {
    display: none !important;
}

/* Keep paging logic enabled but hide pager chrome when everything fits on one page.
   Must stay a CHILD combinator: a detail row renders a whole nested grid inside this
   grid's DOM, so a descendant selector hid the child grid's pager too — a parent with
   one page of rows silently took the pager off every grid expanded underneath it,
   however many rows those had. The class only ever describes its own grid. */
.lp-hide-grid-pager > .k-grid-pager {
    display: none !important;
}

.lp-in-cell-editor {
    position: relative;
}

.lp-in-cell-editor--active {
    outline: 2px solid var(--kendo-color-primary, #0058e9);
    outline-offset: -1px;
    background-color: rgba(0, 88, 233, 0.06);
}

.lp-edit-cell-expand-host {
    position: relative;
    width: 100%;
}

.lp-edit-cell-expand-host--with-hint {
    padding-top: 1.1rem;
}

.lp-in-cell-hover-hint {
    position: absolute;
    top: 0.15rem;
    left: 0.35rem;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    color: var(--kendo-color-primary, #0058e9);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}

.lp-edit-cell-expand-host--chevron.lp-edit-cell-expand-host--with-hint .lp-in-cell-hover-hint {
    right: 1.75rem;
}

.lp-edit-cell-expand-host--chevron {
    padding-right: 1.6rem;
}

.lp-edit-cell-expand-indicator {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    cursor: pointer;
    color: var(--kendo-color-border-strong, rgba(36, 36, 36, 0.62));
    transition: opacity 160ms ease-in-out, color 160ms ease-in-out, fill 160ms ease-in-out, stroke 160ms ease-in-out;
}

.lp-edit-cell-expand-host:hover .lp-edit-cell-expand-indicator,
.lp-edit-cell-expand-host:focus-within .lp-edit-cell-expand-indicator {
    opacity: 1;
    visibility: visible;
    color: var(--kendo-color-primary, #0058e9);
}

.lp-edit-cell-expand-icon {
    transition: color 160ms ease-in-out, fill 160ms ease-in-out, stroke 160ms ease-in-out;
}

.lp-group-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lp-group-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.lp-toolbar-search {
    display: inline-flex;
    align-items: center;
    height: 32px;
}

.lp-toolbar-search__field {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lp-toolbar-search .exp-wrap {
    display: inline-flex;
    align-items: center;
}

.lp-toolbar-search__field .exp-action .exp-input {
    padding-right: 3rem;
}

.lp-toolbar-search__field.is-menu-open .exp-action {
    width: var(--expanded-w, 300px);
    max-width: var(--expanded-max, var(--expanded-w, 300px));
    border-radius: calc(var(--h, 40px) / 2 + 6px);
    background-color: var(--bg-expanded, rgb(237, 235, 233)) !important;
    color: var(--fg-expanded, #2c3e50);
    padding-left: 48px;
    padding-right: 24px;
}

.lp-toolbar-search__field.is-menu-open .exp-action .exp-icon {
    left: var(--exp-icon-expanded-left, 15px);
    --exp-icon-translate-x: 0;
}

.lp-toolbar-search__field.is-menu-open .exp-action .exp-input {
    opacity: 1;
}

.lp-toolbar-search__menu-anchor {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.lp-toolbar-search__field.is-menu-open .lp-toolbar-search__menu-anchor,
.lp-toolbar-search__field.has-text .lp-toolbar-search__menu-anchor,
.lp-toolbar-search__field .exp-wrap.exp-wrap--expanded + .lp-toolbar-search__menu-anchor,
.lp-toolbar-search__field .exp-wrap.exp-wrap--collapsing + .lp-toolbar-search__menu-anchor,
.lp-toolbar-search__field .exp-wrap.exp-wrap--focused + .lp-toolbar-search__menu-anchor,
.lp-toolbar-search__field .lp-toolbar-search__menu-anchor:hover,
.lp-toolbar-search__field .lp-toolbar-search__menu-anchor:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lp-toolbar-search__menu-button {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.lp-toolbar-search__menu-button:hover,
.lp-toolbar-search__menu-button:focus-visible {
    background: var(--kendo-color-base-subtle-hover, rgba(0, 0, 0, 0.06));
    outline: none;
}

.lp-toolbar-search__mode {
    width: 100%;
    height: 32px;
    border-radius: 16px;
    border: none;
    padding: 0 2.1rem 0 0.9rem;
    background: var(--kendo-color-surface, #fff);
    color: inherit;
    font: inherit;
    box-shadow: 0 0 0 1px var(--kendo-color-border, rgba(15, 23, 42, 0.08));
    box-sizing: border-box;
    cursor: pointer;
}

.lp-toolbar-search__mode:focus {
    outline: 2px solid var(--kendo-color-primary, rgba(37, 99, 235, 0.35));
    outline-offset: 1px;
}

/* The list-based menus are deliberately full-bleed -- their rows carry the padding so a hover
   highlight spans the whole popup. This one is a plain form, so it insets itself, by the shared
   amount rather than a number of its own. */
.lp-search-menu__panel {
    min-width: 320px;
    padding: var(--lp-menu-pad);
}

.lp-search-menu__hint {
    margin-top: 0.45rem;
    color: var(--kendo-color-subtle, rgba(15, 23, 42, 0.68));
    font-size: var(--lp-menu-font-sm, 0.82rem);
    line-height: 1.35;
}

.lp-search-menu__options {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.lp-search-menu__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--lp-menu-font, 0.85rem);
    line-height: 1.25;
}

.lp-search-menu__option code {
    min-width: 2rem;
    font-size: var(--lp-menu-font-sm, 0.82rem);
    font-weight: 600;
}

.lp-grid-toolbar-template {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
}

.lp-grid-toolbar-template__primary,
.lp-grid-toolbar-template__secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lp-grid-toolbar-template__secondary {
    margin-left: auto;
}

.lp-infinite-scroll-container {
    width: 100%;
}

.lp-infinite-scroll-container.is-enabled {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--lp-grid-viewport-offset, 260px));
    overflow-y: auto;
}

.lp-infinite-sentinel {
    width: 100%;
    height: 1px;
}

.lp-infinite-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
}

.clipboard-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--kendo-color-primary, #0058e9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
}

.lp-group-menu__badge {
    margin-left: 0.25rem;
    /* Smaller badge visuals for the toolbar chip */
    --kendo-badge-padding-x: 4px;
    --kendo-badge-padding-y: 0px;
    --kendo-badge-font-size: 10px;
    --kendo-badge-line-height: 16px;
    --kendo-badge-min-width: 16px;
    --kendo-badge-min-height: 16px;
}

.lp-group-menu__popup .lp-group-menu__panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* padding: 0.75rem; - removed */
    box-sizing: border-box;

    /* Scroll inside the panel rather than growing past the viewport. The menu gained sections
       over time (grouped columns, available columns, behaviour, totals) and a popup anchored
       near the bottom of a tall grid ran off the screen with its footer -- and the Clear button
       -- unreachable. 70vh keeps it inside the window at any anchor position, and the min-height
       stops a short menu becoming a scroll box for no reason. */
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* A grouped column is the one carrying state, so it reads first. Subtle rather than loud: the
   list's order already says which are grouped, this only stops the eye having to count. */
.lp-group-menu__chip.is-grouped {
    background-color: var(--kendo-color-primary-subtle, rgba(25, 118, 210, .1));
    font-weight: 500;
}

.lp-group-menu__section-title {
    font-weight: 600;
    font-size: var(--lp-menu-font, 0.85rem);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lp-group-menu__active-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lp-group-menu__chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--kendo-color-base-subtle, rgba(0, 0, 0, 0.05));
    max-width: 100%;
    min-width: 0;
}

.lp-group-menu__chip button.k-button {
    --kendo-button-padding-x: 0.25rem;
    --kendo-button-padding-y: 0.25rem;
}

.lp-group-menu__chip-label {
    flex: 1;
    min-width: 0;
    font-size: var(--lp-menu-font, 0.85rem);
    font-weight: 500;
    /* Single-line truncate to keep chips compact */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-group-menu__column-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 280px;
    overflow-y: auto;
}

.lp-group-menu__chip-primary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lp-group-menu__column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    transition: background-color 120ms ease-in-out;
    font-size: var(--lp-menu-font, 0.85rem);
    color: inherit;
}

/* Ensure long column names don't extend past the popup background */
.lp-group-menu__column > span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Both menus that have a footer put one full-width "Clear ..." button in it. This used to be two
   rules in different halves of the file, the second adding justify-content that a 100%-wide button
   made meaningless. */
.lp-group-menu__footer {
    display: flex;
    width: 100%;
}

.lp-group-menu__footer .k-button {
    width: 100%;
}

.lp-group-menu__column:enabled:hover,
.lp-group-menu__column:enabled:focus {
    background-color: var(--kendo-color-base-subtle-hover, rgba(0, 0, 0, 0.05));
    outline: none;
}

.lp-group-menu__column:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lp-file-drop-host {
    position: relative;
}

.lp-file-drop-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.35);
    border: 2px dashed var(--kendo-color-primary, #0058e9);
    border-radius: 6px;
    z-index: 30;
}

.lp-file-drop-overlay.is-uploading {
    background: rgba(15, 23, 42, 0.5);
}

.lp-file-drop-panel {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    pointer-events: none;
    z-index: 1;
}

.lp-file-drop-chooser {
    position: relative;
    width: min(900px, 100%);
    max-height: 100%;
    overflow: auto;
    background: rgba(255, 255, 255, 0.97);
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.lp-file-drop-chooser__zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.lp-file-drop-zone {
    position: relative;
    min-height: 148px;
    padding: 0.85rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(0, 88, 233, 0.18);
    background: linear-gradient(180deg, rgba(0, 88, 233, 0.04), rgba(0, 88, 233, 0.01));
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.lp-file-drop-zone:hover,
.lp-file-drop-zone:focus-within {
    transform: translateY(-2px);
    border-color: rgba(0, 88, 233, 0.45);
    box-shadow: 0 8px 20px rgba(0, 88, 233, 0.18);
    background: linear-gradient(180deg, rgba(0, 88, 233, 0.08), rgba(0, 88, 233, 0.02));
}

.lp-file-drop-zone.is-default {
    border-color: rgba(30, 126, 52, 0.35);
    background: linear-gradient(180deg, rgba(30, 126, 52, 0.08), rgba(30, 126, 52, 0.02));
}

.lp-file-drop-zone__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    justify-content: space-between;
    pointer-events: none;
}

.lp-file-drop-zone__prompt {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lp-file-drop-zone__title {
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.25;
}

.lp-file-drop-zone__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.lp-file-drop-zone__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(30, 126, 52, 0.12);
    color: #1e7e34;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lp-file-drop-zone__hint {
    color: var(--kendo-color-subtle, rgba(15, 23, 42, 0.68));
    font-size: 0.8rem;
    line-height: 1.35;
}

.lp-file-drop-zone__action {
    color: var(--kendo-color-subtle, rgba(15, 23, 42, 0.74));
    font-size: 0.82rem;
    line-height: 1.35;
}

.lp-file-drop-chooser__empty {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px dashed rgba(15, 23, 42, 0.2);
    color: var(--kendo-color-subtle, rgba(15, 23, 42, 0.72));
    background: rgba(15, 23, 42, 0.03);
}

.lp-file-drop-chooser__busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 0.75rem;
    z-index: 4;
}

.lp-file-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: copy;
    z-index: 2;
}

.lp-file-drop-input.is-disabled {
    pointer-events: none;
}

.k-grid .k-table-th:has(.lp-action-cell-marker),
.k-grid .k-table-td:has(.lp-action-cell-marker) {
    text-overflow: clip;
    overflow: visible;
}

/* Hide the built-in column menu button until the header cell is hovered or focused. */
/* Do not hide custom header buttons like the Add button. */
.k-grid .k-table-th .k-grid-header-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease-in-out;
}

.k-grid .k-table-th:hover .k-grid-header-menu,
.k-grid .k-table-th:focus-within .k-grid-header-menu {
    opacity: 1;
    visibility: visible;
}

.grid-state-window-content {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

/* ExpandingAction-based group toggle wrapper and badge */
.lp-group-menu__toggle-wrap {
    position: relative;
    display: inline-block;
}

.lp-group-menu__toggle-wrap .lp-group-menu__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 1;
    pointer-events: none;
}



.columnRowButton {
    margin-block: -7px;
}

/* Checkbox select column header: tri-state select-all checkbox + selection menu.
   Negative block margin for the same reason as .columnRowButton — header cells are padded
   for plain text, and the controls would otherwise stretch the header row. */
.lp-selection-header {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-block: -4px;
}

.lp-selection-header__menu {
    min-width: 0;
    padding-inline: 2px;
}


/* Freeflow editor canvas */
.lp-ll-canvas-wrapper {
    overflow: auto;
    height: calc(100% - 90px);
    padding: 0 12px 12px 12px;
}

.lp-ll-canvas {
    display: grid;
    grid-template-columns: repeat(12, 80px);
    grid-auto-rows: 40px;
    gap: 8px 16px;
    padding: 8px;
    border: 1px dashed var(--kendo-color-border, #ccc);
    border-radius: 4px;
    position: relative;
    background: repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(0, 0, 0, 0.04) 79px, rgba(0, 0, 0, 0.04) 80px), repeating-linear-gradient(180deg, transparent 0, transparent 39px, rgba(0, 0, 0, 0.04) 39px, rgba(0, 0, 0, 0.04) 40px);
}

.lp-ll-item {
    border: 1px solid var(--kendo-color-border, #ccc);
    border-radius: 4px;
    background: var(--kendo-color-base-subtle, #f5f5f5);
    position: relative;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lp-ll-item-header {
    cursor: move;
    font-weight: 600;
    padding: 6px 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-ll-item-size {
    font-weight: normal;
    font-size: 11px;
}

.lp-ll-item-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    cursor: se-resize;
    border-right: 2px solid #8a8a8a;
    border-bottom: 2px solid #8a8a8a;
    z-index: 2;
}

.lp-ll-tile {
    height: 100%;
}


.lp-batch-editor__body {
    max-height: 70vh;
    overflow: auto;
    padding: 0 8px 12px 0;
}


/* --- from StatusSelector.razor ---
   One status selector renders per editable status cell, so a grid page emitted this block dozens of
   times; in a group header the block's own text leaked into the header caption. The only reason it
   was inline was .status-selector's background colour, which is now an inherited custom property set
   on each instance's wrapper -- correct as well as cheaper: as a global rule the last selector
   rendered coloured every selector on the page. */

.k-floating-label-container > .k-label,
.k-floating-label-container:focus-within > .k-label,
.k-floating-label-container.k-focus > .k-label {
    transform: scale(var(--kendo-floating-label-focus-scale, 0.8));
    font-weight: 0;
}

.k-list-group-item,
.k-list-group-sticky-header {
    font-size: 10px;
    color: gray;
    padding-left: 5px;
    font-weight: normal;
}

.k-list-group-item {
    margin-top: 15px;
}

.status-chip {
    background-color: transparent;
}

.status-selector {
    background-color: var(--lp-status-color, transparent);
    color: white;
    width: fit-content;
    padding: 3px;
    border-style: none;
}

.status-selector .k-button {
    display: none;
}

/* A column's position in the sort order. Multi-level sorting is an ordering, so the row has to say
   which one this is; the arrows beside it move the column within that order. */
.lp-group-menu__sort-order {
    flex: 0 0 auto;
    min-width: 1.1rem;
    padding: 0 .2rem;
    border-radius: .35rem;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-ink);
    font-size: var(--lp-menu-font-xs);
    font-weight: 700;
    text-align: center;
}

/* Two clears now that grouping and sorting share one menu. */
.lp-group-menu__footer--split {
    gap: .4rem;
}

.lp-group-menu__footer--split .k-button {
    width: auto;
    flex: 1 1 0;
}
