/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Modern FlightDeck shell: dark header with CSS-only hover dropdowns (no Bootstrap 3, no
   Kendo jQuery menu). Shared tokens come from wwwroot/css/app.css. */

.fd-header[b-1lwcuu14vx] {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Installed on an iPhone the status bar is translucent, so the header background paints
       behind the dynamic island and the inset pushes its contents clear of it. The insets are
       0px everywhere else, so this is identical to `padding: 0 20px` on desktop. */
    padding-top: env(safe-area-inset-top);
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: 0;
    padding-left: calc(20px + env(safe-area-inset-left));
    background: var(--fd-header);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fd-brand[b-1lwcuu14vx] {
    padding: 14px 12px 14px 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.fd-brand:hover[b-1lwcuu14vx] {
    color: #fff;
    text-decoration: none;
}

.fd-nav[b-1lwcuu14vx] {
    flex: 1;
    min-width: 0;
}

.fd-menu[b-1lwcuu14vx] {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-menu-group[b-1lwcuu14vx] {
    position: relative;
}

/* Group labels are buttons now (mobile needs a tap target to expand/collapse), so reset the
   browser chrome; the more specific rules below still set display/padding/color per breakpoint. */
.fd-menu-label[b-1lwcuu14vx] {
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
}

.fd-menu-chevron[b-1lwcuu14vx] {
    display: none;
}

.fd-menu > .fd-menu-group > .fd-menu-label[b-1lwcuu14vx] {
    display: block;
    padding: 15px 14px;
    color: var(--fd-header-text);
    cursor: default;
}

.fd-menu > .fd-menu-group:hover > .fd-menu-label[b-1lwcuu14vx] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.fd-menu-popup[b-1lwcuu14vx] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
    z-index: 1030;
}

.fd-menu-group:hover > .fd-menu-popup[b-1lwcuu14vx] {
    display: block;
}

.fd-menu-popup li[b-1lwcuu14vx] {
    position: relative;
}

.fd-menu-popup a[b-1lwcuu14vx],
.fd-menu-popup .fd-menu-label[b-1lwcuu14vx] {
    display: block;
    padding: 7px 20px;
    color: var(--fd-text);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.fd-menu-popup a:hover[b-1lwcuu14vx],
.fd-menu-popup .fd-menu-group:hover > .fd-menu-label[b-1lwcuu14vx] {
    /* var(--fd-bg) used to sit here, but in dark mode it's nearly the same shade as
       --fd-surface (the popup's own background), so the hover was invisible. --fd-popup-hover
       is the token the app already uses for hover rows inside a popup surface. */
    background: var(--fd-popup-hover);
}

/* Nested flyouts (e.g. Azure > App Settings) open to the right. */
.fd-menu-popup .fd-menu-popup[b-1lwcuu14vx] {
    top: -7px;
    left: 100%;
}

.fd-nav-search-desktop[b-1lwcuu14vx] {
    margin-left: auto;
}

/* Forces a hover-open popup closed right after a menu item is clicked (see desktopMenuSuppressed
   in the code block); scoped above the mobile breakpoint so it can't fight the accordion's
   .fd-menu-group-open rule there. */
@media (min-width: 961px) {
    .fd-nav.fd-nav-suppress-hover .fd-menu-popup[b-1lwcuu14vx] {
        display: none !important;
    }
}

.fd-nav-search-desktop[b-1lwcuu14vx]  .fd-nav-search-box {
    width: 220px;
}

/* Quieter chrome so the search box sits comfortably in the dark header. */
.fd-nav-search-desktop[b-1lwcuu14vx]  .k-input {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: #fff;
}

.fd-nav-search-desktop[b-1lwcuu14vx]  .k-input:hover,
.fd-nav-search-desktop[b-1lwcuu14vx]  .k-input:focus-within {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

.fd-nav-search-desktop[b-1lwcuu14vx]  .k-input .k-input-inner::placeholder {
    color: var(--fd-header-text);
}

.fd-nav-search-mobile[b-1lwcuu14vx] {
    display: none;
}

.fd-header-actions[b-1lwcuu14vx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.fd-theme-toggle[b-1lwcuu14vx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fd-header-text);
    font-size: 13px;
    cursor: pointer;
}

.fd-theme-toggle:hover[b-1lwcuu14vx] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.fd-theme-toggle-icon[b-1lwcuu14vx] {
    font-size: 14px;
    line-height: 1;
}

.fd-user[b-1lwcuu14vx] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fd-user-name[b-1lwcuu14vx] {
    color: var(--fd-header-text);
    text-decoration: none;
}

.fd-user-name:hover[b-1lwcuu14vx] {
    color: #fff;
    text-decoration: none;
}

.fd-logout-form[b-1lwcuu14vx] {
    margin: 0;
}

.fd-logout[b-1lwcuu14vx] {
    padding: 0;
    border: none;
    background: none;
    color: var(--fd-header-text);
    font: inherit;
    cursor: pointer;
}

.fd-logout:hover[b-1lwcuu14vx] {
    color: #fff;
}

.fd-page[b-1lwcuu14vx] {
    max-width: 1800px;
    margin: 0 auto;
    /* Bottom inset keeps grid pagers and form buttons above the home indicator; the side insets
       matter in landscape, which is the orientation people rotate into for the wide reports. */
    padding: 24px calc(20px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}

.fd-version[b-1lwcuu14vx] {
    position: fixed;
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(4px + env(safe-area-inset-bottom));
    color: var(--fd-text-muted);
    font-size: 11px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* Hamburger: hidden on desktop, shown under the breakpoint. */
.fd-menu-toggle[b-1lwcuu14vx] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* 44px is the iOS minimum tap target. */
    width: 44px;
    height: 44px;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.fd-menu-toggle:hover[b-1lwcuu14vx] {
    background: rgba(255, 255, 255, 0.08);
}

.fd-menu-toggle span[b-1lwcuu14vx] {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--fd-header-text);
}

/* Mobile: single-row header (brand / user / hamburger); the menu becomes a slide-down panel with
   each hover-dropdown rendered as a collapsed, tap-to-expand accordion section, since touch has
   no hover. */
@media (max-width: 960px) {
    .fd-header[b-1lwcuu14vx] {
        flex-wrap: nowrap;
    }

    .fd-menu-toggle[b-1lwcuu14vx] {
        display: flex;
    }

    .fd-header-actions[b-1lwcuu14vx] {
        min-width: 0;
        margin-left: auto;
    }

    .fd-user[b-1lwcuu14vx] {
        min-width: 0;
    }

    .fd-nav-search-desktop[b-1lwcuu14vx] {
        display: none;
    }

    .fd-nav-search-mobile[b-1lwcuu14vx] {
        display: block;
        padding: 12px 20px 4px;
    }

    .fd-nav-search-mobile[b-1lwcuu14vx]  .fd-nav-search-box {
        width: 100%;
    }

    .fd-user-name[b-1lwcuu14vx] {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fd-nav[b-1lwcuu14vx] {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* dvh tracks the Safari URL bar; subtracting the top inset accounts for the header
           having grown by it. The panel scrolls ~60 entries, so without the bottom padding the
           last item sits under the home indicator and can't be tapped. */
        max-height: calc(100dvh - 60px - env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
        overflow-y: auto;
        background: var(--fd-surface);
        border-bottom: 1px solid var(--fd-border);
        box-shadow: 0 12px 24px rgba(16, 24, 40, 0.18);
    }

    .fd-nav.fd-nav-open[b-1lwcuu14vx] {
        display: block;
    }

    .fd-menu[b-1lwcuu14vx] {
        display: block;
        padding: 6px 0 12px;
    }

    .fd-menu-group[b-1lwcuu14vx] {
        position: static;
    }

    .fd-menu > .fd-menu-group > .fd-menu-label[b-1lwcuu14vx] {
        padding: 12px 20px 4px;
        color: var(--fd-text-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .fd-menu > .fd-menu-group:hover > .fd-menu-label[b-1lwcuu14vx] {
        color: var(--fd-text-muted);
        background: none;
    }

    /* Collapsed by default; a group only renders its children once tapped open, so opening one
       section doesn't force scrolling past every other section's items. */
    .fd-menu-popup[b-1lwcuu14vx] {
        display: none;
        position: static;
        min-width: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .fd-menu-group-open > .fd-menu-popup[b-1lwcuu14vx] {
        display: block;
    }

    .fd-menu > .fd-menu-group > .fd-menu-label[b-1lwcuu14vx],
    .fd-menu-popup .fd-menu-group > .fd-menu-label[b-1lwcuu14vx] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
    }

    .fd-menu > .fd-menu-group > .fd-menu-label:active[b-1lwcuu14vx],
    .fd-menu-popup .fd-menu-group > .fd-menu-label:active[b-1lwcuu14vx] {
        background: var(--fd-popup-hover);
    }

    .fd-menu-chevron[b-1lwcuu14vx] {
        display: inline-block;
        flex-shrink: 0;
        transition: transform 0.15s ease;
    }

    .fd-menu-chevron[b-1lwcuu14vx]::before {
        content: "▸";
    }

    .fd-menu-group-open > .fd-menu-label .fd-menu-chevron[b-1lwcuu14vx] {
        transform: rotate(90deg);
    }

    .fd-menu-popup a[b-1lwcuu14vx] {
        padding: 9px 20px;
        white-space: normal;
    }

    /* Nested sub-groups (e.g. Azure > App Settings) read as an indented sub-heading. */
    .fd-menu-popup .fd-menu-group > .fd-menu-label[b-1lwcuu14vx] {
        padding: 8px 20px 2px;
        color: var(--fd-text-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .fd-menu-popup .fd-menu-popup a[b-1lwcuu14vx] {
        padding-left: 34px;
    }

    .fd-page[b-1lwcuu14vx] {
        padding: 16px calc(12px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    }
}
/* /Components/Shared/Card.razor.rz.scp.css */
.fd-card[b-kzurunf70t] {
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    margin-bottom: 20px;
}

.fd-card-header[b-kzurunf70t] {
    padding: 12px 20px;
    border-bottom: 1px solid var(--fd-border);
    font-size: 15px;
    font-weight: 600;
}

.fd-card-body[b-kzurunf70t] {
    padding: 20px;
}

.fd-card-details > summary.fd-card-header[b-kzurunf70t] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.fd-card-details > summary.fd-card-header[b-kzurunf70t]::-webkit-details-marker {
    display: none;
}

.fd-card-details > summary.fd-card-header[b-kzurunf70t]::after {
    content: "";
    flex-shrink: 0;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--fd-text-muted);
    border-bottom: 2px solid var(--fd-text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.fd-card-details[open] > summary.fd-card-header[b-kzurunf70t]::after {
    transform: rotate(45deg);
}

.fd-card-details > summary.fd-card-header:focus-visible[b-kzurunf70t] {
    outline: 2px solid #ff6358;
    outline-offset: -2px;
}

/* Progressive enhancement: browsers implementing ::details-content get a smooth
   height animation with correct hidden-when-closed accessibility semantics for
   free. Everywhere else <details> still opens/closes instantly and works fully -
   the feature never depends on this animation succeeding. */
@supports selector(::details-content) {
    .fd-card-details[b-kzurunf70t]::details-content {
        overflow: clip;
        height: 0;
        transition: height 0.2s ease, content-visibility 0.2s allow-discrete;
    }

    .fd-card-details[open][b-kzurunf70t]::details-content {
        height: auto;
    }
}
/* /Components/Shared/ClientEnvironmentPicker.razor.rz.scp.css */
/* With every client expanded to its own tag, cap the input height and scroll instead
   of letting ~40 chips push the rest of the criteria form off screen. */
.client-select-wrap[b-6zuo85gcvo]  .k-input-values {
    max-height: 120px;
    overflow-y: auto;
}

.expand-all-btn[b-6zuo85gcvo] {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    cursor: pointer;
    opacity: 0.65;
}

.expand-all-btn:hover[b-6zuo85gcvo] {
    opacity: 1;
}
/* /Components/Shared/CriteriaField.razor.rz.scp.css */
.fd-field[b-ejtlaunlwi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fd-field-label[b-ejtlaunlwi] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fd-text-muted);
}

/* Stretch text-like Telerik inputs to the column; leaves checkboxes/switches at natural size. */
.fd-field-input[b-ejtlaunlwi]  .k-input,
.fd-field-input[b-ejtlaunlwi]  .k-picker {
    width: 100%;
}
