/* Shared FilterPopup (Components/Shared/FilterPopup.razor, Figma node 1482:24397) — a checkbox-tree filter
   panel: an optional tinted sidebar section plus a multi-column main section, with a footer button bar,
   in a non-modal TelerikPopup hung under the page's Filter button. */

/* Class lands on Telerik's outer animation container, which is sized to its content (Width="max-content"
   in FilterPopup.razor). It is capped to the viewport — the 96px reserved vertically is the page header, the
   popup's gap below it and a bottom margin; horizontally it keeps the page's own gutter — and the wrappers
   inside pass that cap down so only the body ever scrolls. */
.lh-filter-popup {
    max-width: calc(100vw - 2 * var(--kendo-spacing-5));
    max-height: calc(100vh - 96px);
}

.lh-filter-popup .k-child-animation-container,
.lh-filter-popup .k-popup {
    width: 100%;
    max-height: inherit;
}

/* Kendo's own border/shadow stay, but the panel's tinted sidebar and footer run edge to edge, so nothing
   inside may pad it and the corners clip the children. */
.lh-filter-popup .k-popup {
    padding: 0;
    overflow: hidden;
}

/* "Filter" button (and the popup's own footer buttons): semibold label. */
.k-button.lh-filter-btn,
.lh-filter-footer .k-button {
    font-weight: var(--lh-weight-semibold);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
}

/* "Filter" button's pressed look while its popup is open — a lighter tint of the resting navy (Figma's
   secondary/active swatch is about 70% navy over white; Kendo's own -active token isn't light enough). */
.k-button.k-button-solid.k-button-secondary.lh-filter-btn-selected {
    background-color: color-mix(in srgb, var(--kendo-color-secondary) 72%, white);
    border-color: color-mix(in srgb, var(--kendo-color-secondary) 72%, white);
}

/* Body (sidebar + main) is the only part that scrolls, and only when the content is taller than the cap;
   the 56px footer stays pinned below it. */
.lh-filter-content {
    max-height: inherit;
}

.lh-filter-content>* {
    flex: 0 0 auto;
}

.lh-filter-content>.lh-filter-body {
    flex: 0 1 auto;
    min-height: 0;
}

.lh-filter-content>.lh-filter-footer {
    height: 56px;
}

/* GridCard's Show/Hide Columns button (Figma node 2201:15711): same navy as the Filter button but with a
   regular-weight 12px label. Its pressed look while the popup is open is .lh-filter-btn-selected above. */
.k-button.lh-column-chooser-btn {
    font-weight: var(--lh-weight-normal);
    font-size: var(--lh-text-sm);
}

.lh-filter-body {
    align-items: stretch;
    overflow-y: auto;
}

/* Same equal-share squash as everywhere else in this app (Kendo's StackLayout children default to
   flex:1 0 0%): the sidebar keeps its own width and the main section takes whatever is left. */
.lh-filter-body>* {
    flex: 0 0 auto;
}

.lh-filter-body>.lh-filter-main {
    flex: 1 1 auto;
}

/* Sidebar and main share the same padding and the same title-then-content rhythm, so the first row of
   each starts at the same height. */
.lh-filter-sidebar,
.lh-filter-main {
    padding: var(--kendo-spacing-5);
    box-sizing: border-box;
}

.lh-filter-sidebar {
    width: 199px;
    background-color: var(--kendo-color-info-subtle);
}

/* Same squash again for each panel's own column of children (title, then the checkbox groups), which
   otherwise share the panel's full height equally and drift apart. */
.lh-filter-sidebar>*,
.lh-filter-main>* {
    flex: 0 0 auto;
}

/* Figma leaves a 20px white gap between the tinted sidebar and the main panel. */
.lh-filter-main {
    position: relative;
    margin-left: var(--kendo-spacing-5);
}

/* Without a sidebar beside it there is no gap to leave. */
.lh-filter-main.lh-filter-main-solo {
    margin-left: 0;
}

/* The X sits in the main panel's top-right corner, out of the flow: if it were a row sibling of the
   title, its own taller button box would push the content below the sidebar's first row. */
.lh-filter-close.k-button {
    position: absolute;
    top: var(--kendo-spacing-3);
    right: var(--kendo-spacing-3);
}

.lh-filter-section-title {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xl);
    font-weight: var(--lh-weight-semibold);
    line-height: var(--lh-leading-tight);
    color: var(--kendo-color-secondary);
}

/* Roots flow top-to-bottom across 1-3 columns, balanced (the popup is only as tall as its content);
   FilterPopup picks the count from the number of rows. break-inside keeps each parent with its own
   children. Each column is at least wide enough for a typical label so a short list doesn't collapse. */
.lh-filter-columns {
    column-gap: var(--kendo-spacing-4);
    column-fill: balance;
}

.lh-filter-columns-1 {
    column-count: 1;
}

.lh-filter-columns-2 {
    column-count: 2;
}

.lh-filter-columns-3 {
    column-count: 3;
}

.lh-filter-group {
    break-inside: avoid;
    padding-bottom: var(--kendo-spacing-3);
}

.lh-filter-group-divided {
    margin-bottom: var(--kendo-spacing-3);
    border-bottom: 1px solid var(--lh-border-faint);
}

.lh-filter-item {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-2);
    min-height: 32px;
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    color: var(--kendo-color-on-app-surface);
}

/* Checkbox and label are both centered on the row's midline: the checkbox keeps its own box (no stray
   margin pushing it off-center) and the label/count use a tight line box so the glyphs sit in the middle
   of it rather than below center. */
.lh-filter-item .k-checkbox-wrap {
    display: flex;
    align-self: center;
    flex: 0 0 auto;
}

.lh-filter-item .k-checkbox {
    margin: 0;
}

/* Checked and mixed states share one strong teal. This theme's plain primary is the pale teal (and its
   hover/active neighbours are brighter or paler still), so the readable teal is primary-on-surface; the
   check mark is white on it. Kendo's theme reads all of these through its checkbox variables, so they are
   overridden there — the mixed square and the check are both drawn in the "text" colour. Mixed (a parent
   with some but not all children checked) is Figma's teal outline with a small solid square on white. */
.lh-filter-item .k-checkbox {
    --kendo-checkbox-checked-bg: var(--kendo-color-primary-on-surface);
    --kendo-checkbox-checked-border: var(--kendo-color-primary-on-surface);
    --kendo-checkbox-checked-text: var(--kendo-color-surface);
    --kendo-checkbox-hover-checked-bg: var(--kendo-color-primary-on-surface);
    --kendo-checkbox-hover-checked-border: var(--kendo-color-primary-on-surface);
    --kendo-checkbox-hover-checked-text: var(--kendo-color-surface);
    --kendo-checkbox-indeterminate-border: var(--kendo-color-primary-on-surface);
    --kendo-checkbox-indeterminate-text: var(--kendo-color-primary-on-surface);
    --kendo-checkbox-indeterminate-bg: var(--kendo-color-surface);
}

.lh-filter-item-child {
    padding-left: var(--kendo-spacing-6);
}

.lh-filter-label,
.lh-filter-count {
    display: flex;
    align-items: center;
    line-height: var(--lh-leading-tight);
}

.lh-filter-label {
    cursor: pointer;
}

.lh-filter-count {
    font-size: var(--lh-text-sm);
    color: var(--kendo-color-subtle);
}

.lh-filter-footer {
    align-items: center;
    justify-content: space-between;
    /* Keeps Cancel and the right-hand actions apart when the popup is as narrow as its footer (Status only). */
    gap: var(--kendo-spacing-8);
    padding: var(--kendo-spacing-3) var(--kendo-spacing-5);
    box-sizing: border-box;
    background-color: var(--kendo-color-base-subtle);
}

.lh-filter-footer>* {
    flex: 0 0 auto;
}