/* Base type scale (rem root).  This enables rem-driven sizing throughout the site.
 * Use `rem` for sizing as much as possible so all sizing will be relative to the user's viewport size.
 * When necessary, use the following breakpoints for media queries:
 *     Small:       @media (width < 1920px) { ...
 *     Medium:      @media (1920px <= width < 2560px) { ...
 *     Large:       @media (2560px <= width < 3300px) { ...
 *     Extra-Large: @media (3300px <= width) { ...
 */

html {
    font-size: 12px;
}

@media (width < 1920px) { /* S */
    html {
        font-size: 12px;
    }
}

@media (1920px <= width < 2560px) { /* M */
    html {
        font-size: 14px;
    }
}

@media (2560px <= width < 3300px) { /* L */
    html {
        font-size: 18px;
    }
}

@media (3300px <= width) { /* XL */
    html {
        font-size: 22px;
    }
}


/* Global styles versus CSS Isolation
 *
 *   Throughout the app, it is wise to add styles here in app.css as much as possible in order to apply these
 *   styles to all elements globally.  However, if you need to uniquely style an element, component, or a page,
 *   do not add detailed selectors here.  Rather, for those situations, please use .css isolation.  This is done
 *   by adding a *.razor.css file to your component or page.  However, CSS isolation does not apply to 3rd party
 *   controls like a TelerikCard.  To use .css isolation with 3rd party controls like Telerik, simply wrap the
 *   page, component, or control in a div, then use the ::deep combinator in your local *.razor.css file.  For
 *   more information, search the solution for existing examples of this.
 *   References:
 *     Blazor CSS Isolation:  https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation
 *     Telerik's Solution:  https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation
 */


/* Font Definitions */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
}


/* Theme Customizations
 *
 *   To customize the styles in this theme, use css variable overrides in the :root section below whenever
 *   possible.  For example, see the font override below:  --kendo-font-family: "IBM Plex Sans";  We may wind
 *   up replacing the wwwroot/css/telerik/fluent-main.css file with a customized "Milliman Theme" in the
 *   future.  We may also decide to utilize .scss files, but for now, we are going with theme variables.
 *   References:
 *     Available css variables:  https://www.telerik.com/design-system/docs/themes/kendo-themes/fluent/theme-variables
 *     Customization examples:  https://www.telerik.com/design-system/docs/themes/kendo-themes/fluent/customization
 */

:root {
    --kendo-body-bg: #222B36;
    --kendo-font-family: "IBM Plex Sans", sans-serif;
    --kendo-font-family-sans: "IBM Plex Sans", sans-serif;
    --kendo-font-family-sans-serif: "IBM Plex Sans", sans-serif;
    --kendo-invalid-text: #F44336;
    --kendo-line-height: 1.55;
    --kendo-font-size: 0.95rem;
    --kendo-font-size-xs: 0.67rem;
    --kendo-font-size-sm: 0.81rem;
    --kendo-font-size-md: 0.95rem;
    --kendo-font-size-lg: 1.08rem;
    --kendo-font-size-xl: 1.35rem;
    --kendo-card-font-size: var(--kendo-font-size-md);
    --kendo-table-size-font-size: var(--kendo-font-size-sm);
    --kendo-button-solid-base-disabled-bg: white;
}


/* Global Theme Overrides */

.k-h1, .k-h2, .k-h3, .k-h4, .k-h5, .k-h6 {
    font-weight: normal;
}

.validation-message {
    color: var(--kendo-invalid-text);
}


/* BEGIN Raw Initial Loading Spinner. */
/* This non-component based spinner mimics Telerik's Loader with the ConvergingSpinner style. */
/* It gets displayed while the Blazor app downloads. */

#initial-loader {
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

    /* Hide the spinner. */
    #initial-loader.d-none {
        display: none;
    }

    /* Loader text. */
    #initial-loader .loading-text {
        color: #A9A9A9;
        margin-top: 10px;
        font-size: 0.9rem;
    }

    /* The spinner container. */
    #initial-loader .spinner {
        width: 35px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* The actual spinning portion. */
    #initial-loader .ring {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        animation: spin 1.7s cubic-bezier(0.8, 0, 0.2, 1) infinite; /* first half: spin 180° with cubic-bezier so they "whip around"; second half: hold (while the dots converge on the center and diverge back to the corners) */
        transform-origin: center center; /* center of rotation */
    }

    /* The four little dots. */
    #initial-loader .dot {
        --offset: calc(0.375 * 35px);
        width: 25%;
        aspect-ratio: 1;
        background: #A9A9A9;
        border-radius: 50%;
        position: absolute;
        animation: converge 1.7s ease-in-out infinite;
    }

        /* The dots are placed at the four corners. */
        #initial-loader .dot:nth-child(1) {
            top: 0;
            left: 0;
            --tx: var(--offset);
            --ty: var(--offset);
        }

        #initial-loader .dot:nth-child(2) {
            top: 0;
            right: 0;
            --tx: calc(-1 * var(--offset));
            --ty: var(--offset);
        }

        #initial-loader .dot:nth-child(3) {
            bottom: 0;
            right: 0;
            --tx: calc(-1 * var(--offset));
            --ty: calc(-1 * var(--offset));
        }

        #initial-loader .dot:nth-child(4) {
            bottom: 0;
            left: 0;
            --tx: var(--offset);
            --ty: calc(-1 * var(--offset));
        }

/* Key frame animation fot the dots. */

/* 0–50%: rotate the ring 0 -> 180° (ease-in-out)
   50–100%: keep it at 180° so it doesn’t move during converge/expand */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

/* 0–50%: dots stay put (no translate)
   50–75%: move in toward center
   75–100%: move back out to their corners */
@keyframes converge {
    0%, 50% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(var(--tx), var(--ty));
    }

    100% {
        transform: translate(0, 0);
    }
}

/* END Raw Initial Loading Spinner. */


/* Global Container Formatting */

html, body {
    overflow: hidden;
    background-color: #222B36;
}


/* Scrollbar styles - scoped to scrollable containers only.
 * Applying ::-webkit-scrollbar globally causes phantom scrollbar gutters
 * on non-scrollable elements, which appear as faint vertical stripes
 * against dark backgrounds.
 */

#content-container::-webkit-scrollbar,
#inner-nav-container::-webkit-scrollbar {
    width: 0.63rem;
    height: 0.75rem;
}

#content-container::-webkit-scrollbar-track,
#inner-nav-container::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 0.63rem;
}

#content-container::-webkit-scrollbar-thumb,
#inner-nav-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 0.63rem;
}

#content-container::-webkit-scrollbar-thumb:hover,
#inner-nav-container::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}


/* Menu Drop-down styles. */

.k-animation-container.menu-dropdown .k-popup.k-menu-popup {
    border-radius: 0.5rem;
    margin: 1.06rem 0.31rem 0 0;
    min-width: 7.5rem;
}

.k-menu-popup .k-item.k-menu-item.menu-dropdown {
    position: relative;
}

    .k-menu-popup .k-item.k-menu-item.menu-dropdown .k-link.k-menu-link {
        padding: 0.63rem;
    }

    .k-menu-popup .k-item.k-menu-item.menu-dropdown > span {
        background-color: #353E4B;
        color: #ACAFB2;
    }

    .k-menu-popup .k-item.k-menu-item.menu-dropdown:hover > span {
        background-color: #3C4450;
    }

    /* Draw a horizontal line as a spacer under every menu item except the last one. */
    .k-menu-popup .k-item.k-menu-item.menu-dropdown:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0.63rem;
        right: 0.63rem;
        height: 1px;
        background-color: #ACAFB2;
    }


/* Stop Edge browser from injecting its own "eye" icon or "clear" button in inputs. */
input[type="password"]::-ms-reveal {
    display: none;
}

input[type="password"]::-ms-clear {
    display: none;
}


/* Global page styles */

.page-container {
    background-color: white;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0.5rem;
}

.sub-page-container {
    padding: 0.94rem;
}

h5 {
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
    margin-block-start: 0;
    margin-block-end: 0;
}


/* Miscellaneous */

a {
    text-decoration: none;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.k-menu-popup .k-menu-group .k-link.k-menu-link {
    outline: none;
}

.password-suffix-icon { /* Adds left and right padding around the "eye" icon in password input boxes */
    cursor: pointer;
    padding: 0 0.5rem;
}

.login-page-container,
.password-reset-page-container {
    height: 75vh;
}

.required-asterisk {
    color: red;
    margin-right: 0.25rem;
}

.k-floating-label-container.required > .k-floating-label::after {
    content: '*';
    color: red;
    margin-left: 0.25rem;
}

/* Remove the inner focus outline that the Telerik Fluent theme renders via a ::after pseudo-element
 * on :focus/.k-focus.  This covers the pressed, active, and post-click focused states so the outline
 * never appears. !important is needed to override the Telerik Fluent theme. */
.k-button:focus::after,
.k-button.k-focus::after {
    outline: none !important;
    display: none !important;
}