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

    .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;
}

.lp-quick-filter__values {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid 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: .75rem;
    opacity: .6;
}

.lp-quick-filter__section-title {
    cursor: pointer;
    font-weight: 600;
    font-size: .8rem;
    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: rgba(0, 120, 212, .15);
    font-weight: 600;
}

.lp-quick-filter__actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding-top: .25rem;
    border-top: 1px solid 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.
   ========================================================================== */

.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 rgba(123, 31, 162, .35);
    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: #6a2c93;
    padding: 0 .5rem 0 .2rem;
    white-space: nowrap;
}

html.dark .lp-totals-dock__label { color: #ce93d8; }

.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: rgba(123, 31, 162, .07);
    border-color: rgba(123, 31, 162, .2);
}

.lp-totals-dock__cell.is-active { background: rgba(123, 31, 162, .06); }

.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: rgba(123, 31, 162, .09);
    border: 1px solid rgba(123, 31, 162, .28);
    font-size: .72rem;
    font-weight: 600;
    color: #4a1d6e;
    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: #9c27b0;
}

html.dark .lp-agg-chip {
    background: rgba(206, 147, 216, .16);
    border-color: rgba(206, 147, 216, .35);
    color: #f3e5f5;
}

html.dark .lp-agg-chip__fn { color: #ce93d8; }

.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: rgba(123, 31, 162, .05);
    font-size: .7rem;
}

html.dark .lp-group-footer { background: rgba(206, 147, 216, .08); }

/* ---- 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: rgba(123, 31, 162, .08); }

.lp-totals-pop__opt.is-on {
    background: rgba(123, 31, 162, .1);
    font-weight: 600;
    color: #4a1d6e;
}

html.dark .lp-totals-pop__opt.is-on { background: rgba(206, 147, 216, .18); color: #f3e5f5; }

.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; }

.lp-composer__h { font-size: .9rem; font-weight: 600; color: #3a1552; }

html.dark .lp-composer__h { color: #e1bee7; }

.lp-composer__sub { font-size: .68rem; color: #8a7a98; margin-bottom: .5rem; }

.lp-composer__sec {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9c27b0;
    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: .78rem; font-weight: 600; min-width: 105px; }

.lp-fnchip {
    padding: .12rem .55rem;
    border-radius: 10px;
    font-size: .64rem;
    font-weight: 700;
    border: 1px solid rgba(123, 31, 162, .3);
    color: #7b1fa2;
    background: transparent;
    cursor: pointer;
    user-select: none;
}

.lp-fnchip:hover { background: rgba(123, 31, 162, .08); }

.lp-fnchip.is-on { background: #9c27b0; color: #fff; border-color: #9c27b0; }

html.dark .lp-fnchip { color: #ce93d8; border-color: rgba(206, 147, 216, .4); }
html.dark .lp-fnchip.is-on { background: #9c27b0; color: #fff; }

/* 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: #7b1fa2 !important;
    border: 1.5px solid #7b1fa2 !important;
    font-weight: 700;
}
