/*********************************************************************/
/*
/* Global Styles
/*
/*********************************************************************/

:root {
    /* Garg Variables */
    --garg-font-family: "Inter", "Roboto", Arial, sans-serif;
    --garg-font-family-alt: "Times New Roman", Times, serif;
    --garg-border-radius: .25rem;
    --garg-font-size: 14px;
    --garg-text-color-light: #FFFFFF;
    --garg-text-color-dark: #000000;
    --garg-text-color-grey: #DCDCDC;
    --garg-bg-color-light: #FFFFFF;
    --garg-bg-color-dark: #203764;
    --garg-bg-color-grey: #DCDCDC;
    --garg-line-height: 1.5rem;
    /* Radzen Variables */
    --rz-body-padding: 0;
    --rz-text-color: var(--garg-text-color-dark);
    --rz-root-font-size: var(--garg-font-size);
    --rz-text-font-family: var(--garg-font-family);
    --rz-profile-menu-top-item-background-color: var(--garg-bg-color-dark);
    --rz-menu-top-item-background-color: var(--garg-bg-color-dark);
    --rz-menu-top-item-color: var(--garg-text-color-grey);
    --rz-dialog-background-color: var(--garg-bg-color-dark);
    --rz-dialog-title-background-color: var(--garg-bg-color-dark);
    --rz-header-background-color: var(--garg-bg-color-dark);
    --rz-header-color: var(--garg-bg-color-grey);
    --rz-layout-background-color: var(--rz-body-background-color) !important;
    /* Radzen Grid Variables */
    --rz-pager-dropdown-width: 6rem;
    /* Radzen Container Border Radius */
    --rz-border-radius: var(--garg-border-radius);
    --rz-dialog-border-radius: calc(var(--garg-border-radius) * 2);
    /* Radzen Button Variables */
    --rz-button-border-radius: calc(var(--garg-border-radius) * 2);
    /* Radzen Tab Variables */
    --rz-tabs-tab-hover-background-color: var(--rz-base-200);
    --rz-tabs-tab-background-color: var(--rz-base-100);
    --rz-tabs-tab-selected-background-color: var(--rz-base-200);
    --rz-tabs-border: var(--rz-grid-cell-border);
    --rz-tabs-border-radius: var(--garg-border-radius);
    /* Radzen Menu Variables */
    --rz-menu-top-item-selected-color: var(--garg-text-color-dark);
    --rz-menu-item-selected-color: var(--garg-text-color-dark);
    /* Radzen Upload Variables */
    --rz-upload-button-bar-background-color: none;
    --rz-upload-button-bar-border-radius: calc(var(--garg-border-radius) * 2);
    --rz-upload-button-bar-padding: 0;
    /*Root Element Values*/
    font-size: var(--rz-root-font-size);
}

body {
    font-family: var(--garg-font-family);
    font-style: normal;
    color: var(--garg-text-color-dark);
    font-size: var(--garg-font-size);
    line-height: var(--garg-line-height);
    background-color: var(--garg-bg-color-light);
    background-image: none !important;
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
}

    a:hover,
    a:focus {
        color: var(--rz-link-hover-color);
    }

.garg-login-button-image {
    padding: 0;
    border-radius: 0;
}


/*********************************************************************/
/*
/* Radzen Component Overrides
/*
/*********************************************************************/
/* Limit Tab Panels Height*/
.rz-tabview, .rz-tabview-panel {
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}

.rz-tabview-top > .rz-tabview-nav li {
    margin-right: .5rem;
    border-top: var(--rz-grid-cell-border) !important;
}

.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected, .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    box-shadow: var(--rz-button-shadow);
    clip-path: inset(-1rem -1rem 0 -1rem); /* Clip Drop Shadow From Bottom*/
    border-top: var(--rz-grid-cell-border) !important;
}

/* Allow DataGrid Headers to Wrap Text */
.rz-column-title-content {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Allow DataGrid To Headers To Stick To Limit The Div Height */
.rz-datatable-scrollable {
    box-sizing: border-box !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

/* Prevent Data Grid Auto Sizing, Fix Borders */
.rz-grid-table {
    width: unset !important;
    border-style: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    border-bottom: var(--rz-grid-cell-border) !important;
}
    /* Set Borders Like This To Since Cannot use Border Collapse With Sticky Headers Because Header Borders Clip On Scroll */
    .rz-grid-table th, .rz-grid-table td {
        border-right: none !important;
        border-bottom: none !important;
        border-left: var(--rz-grid-cell-border) !important;
        border-top: var(--rz-grid-cell-border) !important;
    }

        .rz-grid-table th:last-child, .rz-grid-table td:last-child {
            border-right: var(--rz-grid-cell-border) !important;
        }

/* Remove Data Grid Standard Rounded Borders and Outline*/
.rz-data-grid {
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    /*width: fit-content !important; /* Shrinks White Space After Columns */
    width: auto !important; /* Allow Columns To Be Resized */
    height: 100% !important;
}

/* Radzen Notifications on Top And Positions */
.rz-notification {
    z-index: 9990 !important;
    inset-block-start: .75rem !important;
    inset-inline-end: .75rem !important;
}

.rz-notification-item-wrapper {
    margin: 0;
}

/* Menu Fonts */
.rz-menu {
    font-weight: 500;
}

/* Profile Menu */
.rz-profile-menu {
    padding-block: 0 !important;
    padding-inline: 0 !important;
    background-color: var(--header-background-color);
}

/* Popup Z-Index */
.rz-popup {
    z-index: 10000 !important;
    display: none;
    position: absolute;
    overflow: hidden;
}

/* Radzen HTML Editor Icons*/
.rz-toolbar .rz-button .rzi {
    font-size: 1.25rem;
}

/* Radzen Button Icon*/
.rz-button-md .rzi {
    font-size: 1.5rem;
    font-weight: 200;
}

/*********************************************************************/
/*
/* Layout - General
/*
/*********************************************************************/
/* Reset Default Margins and Secure View Height */
html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* Prevents the Main Window/Body from Scrolling */
}

/* Define the Grid Layout on the Body */
body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0px 0px;
    grid-template-areas:
        "app-header"
        "app-body"
        "app-footer";
}

/* Header Layout */
.app-header {
    grid-area: app-header;
    text-align: left;
    margin: 0;
    padding: 0;
    background-color: var(--garg-bg-color-dark);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 0px 0px;
    grid-template-areas:
        "app-header-logo app-header-user"
        "app-header-menu app-header-menu"
        "app-header-page app-header-page";
}

    .app-header .app-header-logo {
        box-sizing: border-box;
        grid-area: app-header-logo;
        padding: 0.5rem 1rem 0.5rem 1rem;
        margin: 0;
        display: flex;
        align-items: center;
    }

        .app-header .app-header-logo .app-header-logo-logo {
            box-sizing: border-box;
            background-image: url('/images/logos/square/blue/garg-logo-square-blue-border-600.png');
            background-repeat: no-repeat;
            background-position: left center;
            background-size: contain;
            align-self: stretch;
            aspect-ratio: 773 / 967;
            flex: 0 0 auto;
        }

        .app-header .app-header-logo .app-header-logo-text {
            box-sizing: border-box;
            text-align: left;
            color: var(--garg-bg-color-grey);
            font-size: 2rem;
            font-family: var(--garg-font-family-alt);
            line-height: 2rem;
            font-weight: 200;
            padding-left: 0.5rem;
        }

    .app-header .app-header-user {
        box-sizing: border-box;
        grid-area: app-header-user;
        text-align: left;
        margin: 0;
        padding: 0;
    }

        .app-header .app-header-user .app-header-user-component {
            box-sizing: border-box;
            margin: 0.5rem 1rem 0.5rem 1rem;
            padding: 0;
        }

        .app-header .app-header-user .app-header-user-text {
            margin: 0;
            padding: 0;
            color: var(--garg-bg-color-grey);
        }

        .app-header .app-header-user .app-header-user-menu {
        }

    .app-header .app-header-menu {
        grid-area: app-header-menu;
        text-align: left;
        margin: 0;
        padding: 0;
    }

        .app-header .app-header-menu .app-header-menu-component {
            box-sizing: border-box;
            font-size: 1.25rem;
            color: var(--garg-bg-color-grey);
            margin: 0.5rem 0.5rem 0.5rem 0.5rem;
            padding: 0;
        }

    .app-header .app-header-page {
        grid-area: app-header-page;
        text-align: left;
        margin: 0;
        padding: 0;
        background-color: var(--garg-bg-color-grey);
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        gap: 0px 0px;
        grid-template-areas:
            "app-header-page-title"
            "app-header-page-breadcrumb";
    }

        .app-header .app-header-page .app-header-page-title {
            box-sizing: border-box;
            grid-area: app-header-page-title;
            text-align: left;
            margin: 0.5rem 2rem 0.5rem 2rem;
            padding: 0;
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 200;
        }

        .app-header .app-header-page .app-header-page-breadcrumb {
            box-sizing: border-box;
            grid-area: app-header-page-breadcrumb;
            text-align: left;
            margin: 0rem 2rem 0.5rem 2rem;
            padding: 0;
            font-size: 1rem;
            line-height: 1rem;
            font-weight: 200;
        }

            .app-header .app-header-page .app-header-page-breadcrumb .app-header-page-breadcrumb-component {
                box-sizing: border-box;
            }

/* Main Layout */
.app-body {
    grid-area: app-body;
    /* Enables Vertical Scrolling Only Inside This Element */
    overflow-y: auto;
    background-color: var(--garg-bg-color-light);
    color: var(--garg-text-color-dark);
    text-align: left;
    margin: 0;
    padding: 0.5rem 2rem 0.5rem 2rem;
}

/* Footer Layout */
.app-footer {
    grid-area: app-footer;
    background-color: var(--garg-bg-color-grey);
    color: var(--garg-text-color-dark);
    text-align: left;
    margin: 0;
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 200;
}

/*********************************************************************/
/*
/* Layout - Content
/*
/*********************************************************************/
div.content-column-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

div.content-column {
    flex-grow: 0;
}

div.content-column-stretch {
    flex-grow: 1;
}

div.content-row-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

div.content-row {
    flex-grow: 0;
}

div.content-row-stretch {
    flex-grow: 1;
}

div.content-gap-none {
    gap: 0;
}

div.content-gap-small {
    gap: 0.5rem;
}

div.content-gap-normal {
    gap: 1rem;
}

div.content-gap-large {
    gap: 1.5rem;
}

fieldset.group-vertical {
    display: inline-flex;
    flex-direction: column;
    border: groove;
    padding: 0.5rem;
    overflow: hidden;
    gap: 0.5rem;
}

legend.group-title-normal {
    font-weight: 600;
    font-size: 1.25rem;
}

/*********************************************************************/
/*
/* Controls - Full Page Overlay
/*
/*********************************************************************/
.loading-overlay-container {
    position: fixed; /* Fixed position relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.7); /* Semi-transparent background */
    display: flex; /* Use flexbox for centering content */
    flex-direction: column;
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    z-index: 9999; /* Ensure it's on top of other elements */
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Initially fully transparent */
    transition: visibility 0s, opacity 0.3s linear; /* Smooth transition for showing/hiding */
}

    .loading-overlay-container.show {
        visibility: visible;
        opacity: 1;
    }

.loading-overlay-content {
    color: #FFFFFF;
    text-align: center;
    font-weight: 600;
    font-size: 2rem;
    align-items: center;
}


/*********************************************************************/
/*
/* Controls - HTML Viewer
/*
/*********************************************************************/
.html_viewer_wrapper {
}
    /* Hide unrendered mermaid blocks so text code doesn't flash */
    .html_viewer_wrapper pre.mermaid,
    .html_viewer_wrapper pre code.language-mermaid,
    .html_viewer_wrapper div.mermaid {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.2s ease-in-out;
    }
    /* Ensure the rendered SVG wraps display nicely with a subtle fade-in */
    .html_viewer_wrapper .rendered-mermaid-diagram {
        opacity: 0;
        animation: fadeIn 0.3s forwards;
    }

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/*********************************************************************/
/*
/* Controls - HTML Editor
/*
/*********************************************************************/
.html_editor_wrapper {
}

    .html_editor_wrapper pre.mermaid,
    .html_editor_wrapper pre code.language-mermaid,
    .html_editor_wrapper div.mermaid {
        background-color: #f6f8fa;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        padding: 16px;
        margin-top: 0;
        margin-bottom: 16px;
        overflow: auto;
        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 85%;
        line-height: 1.45;
    }


/*********************************************************************/
/*
/* Controls - Console
/*
/*********************************************************************/
.console {
    background-color: #212529;
    color: #f8f9fa;
    font-family: monospace;
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

    .console .console-header {
        background-color: #343a40;
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        flex-grow: 0;
    }

        .console .console-header .console-title {
            font-weight: bold;
            color: #adb5bd;
            flex: 1;
            white-space: nowrap;
        }
        .console .console-header .console-timezone {
            color: #adb5bd;
            flex: 0 0 auto;
            white-space: nowrap;
            padding: 0 1rem 0 5rem;
        }

        .console .console-header .console-clear {
            background: transparent;
            border: 1px solid #6c757d;
            color: #f8f9fa;
            padding: 0.25rem 0.5rem;
            cursor: pointer;
            border-radius: 0.25rem;
            flex: 0 0 auto;
            white-space: nowrap;
        }

.console-clear:hover {
    background-color: #495057;
}

.console .console-content {
    overflow-y: auto;
    overflow-anchor: revert;
    padding: 1rem;
    flex-grow: 1;
}

    .console .console-content .console-message {
        margin-bottom: 0.25rem;
        display: flex;
        align-items: flex-start;
    }

        .console .console-content .console-message .console-message-time {
            color: #6c757d;
            flex: 0 0 auto;
            white-space: nowrap;
            margin-right: 1rem;
        }

        .console .console-content .console-message .console-message-text {
            color: #20c997;
            flex-grow: 1;
        }



/*********************************************************************/
/*
/* Controls - Grid Columns
/*
/*********************************************************************/
.datagrid-header-left {
    text-align: left;
    width: 100%;
    font-weight: bold;
}

.datagrid-header-center {
    text-align: center;
    width: 100%;
    font-weight: bold;
    padding-left: .2rem;
    padding-right: .2rem;
}

.datagrid-header-right {
    text-align: right;
    width: 100%;
    font-weight: bold;
    padding-left: .2rem;
    padding-right: .2rem;
}

.datagrid-footer-left {
    text-align: left;
    width: 100%;
    font-weight: bold;
    padding-left: .2rem;
    padding-right: .2rem;
}

.datagrid-footer-center {
    text-align: center;
    width: 100%;
    font-weight: bold;
}

.datagrid-footer-right {
    text-align: right;
    width: 100%;
    font-weight: bold;
}

.datagrid-editor {
}

.datagrid-editor-compact {
    display: block;
    box-sizing: border-box !important;
    width: 100%;
    border: none !important;
    height: 1.2rem;
    font-size: .875rem;
    line-height: 1rem;
    padding-left: .25rem;
    padding-right: .25rem;
}

.datagrid-chip-wrapper {
}

.datagrid-chip {
}