/* Use this file to make color pallete changes and sweeping changes across the app to Style using a GW Consistent Styling choice used by their other applications */
:root {
    --gw-navy: #002856;
    --gw-light-blue: #8fabdd;
    --gw-blue: #2a7ad7;
    --gw-teal: #52CEE6;
    --gw-text: #333333;
    --gw-eggshell: #F5F5F5;
    --gw-white: #fff;
    --gw-orange: #E39852;
    --gw-light-grey: #CCCCCC;
    --gw-medium-grey: #878787;
    --gw-dark-teal: #0C869D;
    --gw-error: #E73D47;
    --gw-overlay-navy: #002856;
    --gw-overlay-grey: #333333;
    --gw-aq-main-btn: #0D6EFD;
    --gw-action-upload: #058B48;
    --gw-action-finalize: #058B48;
    --gw-status-draft: white;
    --gw-status-requested: #FD7E14;
    --gw-status-approved: #0D6EFD;
    --gw-status-proposed: #7209B7;
    --gw-status-pending: #CC9A06;
    --gw-status-issued: #7FC96B;
    --gw-status-bound: #058B48;
    --gw-status-cancelled: #DC3545;
    --gw-status-expired: #6C757D;
    --gw-action-resume: #95d5b2;
    --gw-action-grey: #444444;
    --gw-font-size1: 2.5rem;
    --gw-font-size2: 2rem;
    --gw-font-size3: 1.75rem;
    --gw-font-size4: 1.5rem;
    --gw-font-size5: 1.25rem;
    --gw-font-size6: 1rem;
}

.bg-vortex-blue {
    background-color: var(--gw-blue);
}

.bg-vortex-orange {
    background-color: var(--gw-orange) !important;
}

.text-vortex-blue {
    color: var(--gw-blue);
}

a,
.btn-link,
.btn-link:focus {
    color: #0071c1;
}

.btn.btn-primary {
    background-color: var(--gw-white);
    border-color: var(--gw-dark-teal);
    color: var(--gw-dark-teal);
}

/*checked primary button*/
.btn-check:checked+.btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:first-child:active,
:not(.btn-check)+.btn.btn-primary:active {
    background-color: var(--gw-dark-teal);
    border-color: var(--gw-dark-teal);
    color: var(--gw-white);
}

@media (hover: hover) {
    .btn.btn-primary:hover {
        background-color: var(--gw-dark-teal);
        border-color: var(--gw-dark-teal);
        color: var(--gw-white);
    }
}

.btn.btn-secondary {
    background-color: var(--gw-blue);
    border-color: var(--gw-blue);
    color: var(--gw-white);
}

.btn.btn-secondary:active {
    background-color: var(--gw-blue);
    border-color: var(--gw-blue);
    color: var(--gw-white);
}

.btn.btn-secondary:hover {
    background-color: var(--gw-navy);
    border-color: var(--gw-navy);
    color: var(--gw-white);
}

.btn.btn-wizardnav {
    background-color: var(--gw-light-blue);
    border-color: var(--gw-dark-teal);
    color: var(--gw-white);
}

.btn.btn-wizardnav:active {
    background-color: var(--gw-blue);
    border-color: var(--gw-blue);
    color: var(--gw-white);
}

.btn.btn-wizardnav:hover {
    background-color: var(--gw-blue);
    border-color: var(--gw-blue);
    color: var(--gw-white);
}

.btn.btn-outline-wizardnav {
    background-color: var(--gw-white);
    border-color: var(--gw-blue);
    color: var(--gw-blue);
    font-weight: 700 !important;
    text-transform: uppercase;
}

.btn.btn-outline-wizardnav:disabled {
    background-color: var(--gw-light-blue);
    border-color: var(--gw-light-blue);
    color: var(--gw-white);
}

.btn.btn-outline-wizardnav:active {
    background-color: var(--gw-blue);
    border-color: var(--gw-blue);
    color: var(--gw-white);
}

.btn.btn-outline-wizardnav:hover {
    background-color: var(--gw-blue);
    border-color: var(--gw-blue);
    color: var(--gw-white);
}

td.k-command-cell.k-table-td {
    display: table-cell;
    text-align: center;
}

.publicPortalBlue {
    color: #2a7ad7;
}

button.public-portal-light,
.public-portal-light:hover {
    background-color: #52cee6;
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 5px;
}

button.public-portal-light:disabled {
    background-color: #52cee6;
}

button.public-portal-dark {
    background-color: #002856;
    color: white;
    margin-right: 10px;
}

div.vertical-line {
    border-left: 2px solid #bdc0c4;
    height: 80%;
    transform: translateY(10%);
}

.badge-status {
    border-radius: 0px;
    padding: 10px 15px;
    border: 1px solid black;
    text-align: center;
    align-content: center;
    margin-right: 15px;
    box-shadow: 5px 5px 5px #888888;
}

.status-draft {
    color: var(--gw-status-draft);
}

.status-requested {
    color: var(--gw-status-requested);
}

.status-approved {
    color: var(--gw-status-approved);
}

.status-proposed {
    color: var(--gw-status-proposed);
}

.status-pending {
    color: var(--gw-status-pending);
}

.status-issued {
    color: var(--gw-status-issued);
}

.status-bound {
    color: var(--gw-status-bound);
}

.status-cancelled {
    color: var(--gw-status-cancelled);
}

.status-expired {
    color: var(--gw-status-expired);
}

.background-status-draft {
    background-color: var(--gw-status-draft);
    color: black;
}

.background-status-requested {
    background-color: var(--gw-status-requested);
    color: white;
}

.background-status-approved {
    background-color: var(--gw-status-approved);
    color: white;
}

.background-status-proposed {
    background-color: var(--gw-status-proposed);
    color: white;
}

.background-status-pending {
    background-color: var(--gw-status-pending);
    color: white;
}

.background-status-issued {
    background-color: var(--gw-status-issued);
    color: white;
}

.background-status-bound {
    background-color: var(--gw-status-bound);
    color: white;
}

.background-status-cancelled {
    background-color: var(--gw-status-cancelled);
    color: white;
}

.background-status-expired {
    background-color: var(--gw-status-expired);
    color: white;
}

.btn-separator
{
    min-height: 1rem;
    border: 1px dashed lightgray;
    display: inline;
    opacity: .75;
    margin-left: .5rem;
    margin-right: .5rem;
}

.main-btn, .main-btn-lg {
    background-color: white;
    color: black;
    display: inline-block;
    padding: .2rem .5rem;
    font-family: var(--bs-btn-font-family);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border-width: 2px;
    border-style: solid;
    border-color: var(--gw-aq-main-btn);
    border-radius: 6px;
}

.main-btn-lg {
    padding: .5rem 1rem;
}

.main-btn:hover {
    background-color: var(--gw-aq-main-btn);
    color: white;
}

.main-btn:disabled {
    background-color: var(--gw-aq-main-btn);
    color: white;
    opacity: .5;
}

.action-request {
    color: var(--gw-status-requested);
    border-color: var(--gw-status-requested);
    background-color: white;
}

.action-request:hover {
    background-color: var(--gw-status-requested);
    color: white;
}

.action-request:disabled {
    background-color: var(--gw-status-requested);
    border-color: var(--gw-status-requested);
    color: white;
    opacity: .5;
}


.action-approve {
    color: var(--gw-status-approved);
    border-color: var(--gw-status-approved);
    background-color: white;
}

.action-approve:hover {
    background-color: var(--gw-status-approved);
    color: white;
}

.action-approve:disabled {
    background-color: var(--gw-status-approved);
    border-color: var(--gw-status-approved);
    color: white;
    opacity: .5;
}

.action-propose {
    color: var(--gw-status-proposed);
    border-color: var(--gw-status-proposed);
    background-color: white;
}

.action-propose:hover {
    background-color: var(--gw-status-proposed);
    color: white;
}

.action-propose:disabled {
    background-color: var(--gw-status-proposed);
    border-color: var(--gw-status-proposed);
    color: white;
    opacity: .5;
}

.action-bind {
    color: var(--gw-status-bound);
    border-color: var(--gw-status-bound);
    background-color: white;
}

.action-bind:hover {
    background-color: var(--gw-status-bound);
    color: white;
}

.action-bind:disabled {
    background-color: var(--gw-status-bound);
    border-color: var(--gw-status-bound);
    color: white;
    opacity: .5;
}

.action-cancel {
    color: var(--gw-status-cancelled);
    border-color: var(--gw-status-cancelled);
    background-color: white;
}

.action-cancel:hover {
    background-color: var(--gw-status-cancelled);
    color: white;
}

.action-cancel:disabled {
    background-color: var(--gw-status-cancelled);
    border-color: var(--gw-status-cancelled);
    color: white;
    opacity: .5;
}

.action-sign {
    color: var(--gw-action-upload);
    border-color: var(--gw-action-upload);
    background-color: white;
}

.action-sign:hover {
    background-color: var(--gw-action-upload);
    color: white;
}

.action-sign:disabled {
    background-color: var(--gw-action-upload);
    border-color: var(--gw-action-upload);
    color: white;
    opacity: .5;
}

.action-finalize {
    color: var(--gw-action-finalize);
    border-color: var(--gw-action-finalize);
    background-color: white;
}

.action-finalize:hover {
    background-color: var(--gw-action-finalize);
    color: white;
}

.action-finalize:disabled {
    background-color: var(--gw-action-finalize);
    border-color: var(--gw-action-finalize);
    color: white;
    opacity: .5;
}

.action-resume {
    color: black;
    border-color: black;
    background-color: white;
} 

.action-resume:hover {
    background-color: black;
    color: white;
}

.action-resume:disabled {
    background-color: var(--gw-action-resume);
    border-color: var(--gw-action-resume);
    color: white;
    opacity: .5;
}

.action-grey {
    color: var(--gw-action-grey);
    border-color: var(--gw-action-grey);
    background-color: white;
} 

.action-grey:hover {
    background-color: var(--gw-action-grey);
    color: white;
}

.action-grey:disabled {
    background-color: var(--gw-action-grey);
    border-color: var(--gw-action-grey);
    color: white;
    opacity: .5;
}

.group-box {
    position: relative;
    border: 1px solid #ccc;
    padding: .5rem;
    border-radius: 0.25rem;
}

.group-box-label {
    position: absolute;
    background-color: white;
    text-wrap: nowrap;
    top: -0.75rem;
    left: 1rem;
    padding: 0 0.5rem;
    font-weight: bold;
    font-size:.75rem
}

.font-size-1 {
    font-size: var(--gw-font-size1) !important;
}

.font-size-2 {
    font-size: var(--gw-font-size2) !important;
}

.font-size-3 {
    font-size: var(--gw-font-size3) !important;
}

.font-size-4 {
    font-size: var(--gw-font-size4) !important;
}

.font-size-5 {
    font-size: var(--gw-font-size5) !important;
}

.font-size-6 {
    font-size: var(--gw-font-size6) !important;
}

.quote-header .form-floating > .form-control-plaintext ~ label::after,
.quote-header .form-floating > .form-control:focus ~ label::after,
.quote-header .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.quote-header .form-floating > .form-select ~ label::after {
    background-color: transparent;
}

.label-transparent-bg .form-floating > .form-control-plaintext ~ label::after,
.label-transparent-bg .form-floating > .form-control:focus ~ label::after,
.label-transparent-bg .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.label-transparent-bg .form-floating > .form-select ~ label::after {
    background-color: transparent;
}

/* Skeleton-shimmer loading for grids.
   This restyles Telerik's OWN built-in loader (EnableLoaderContainer, on by default), which already
   shows on every data operation -- first load, filter change, page change -- and is fully managed by
   Telerik. Because we only change its appearance (no custom Blazor state, wrapper, or NoDataTemplate),
   it cannot interfere with paging. The default spinner is hidden and replaced with shimmering skeleton
   row-bars drawn over the grid's content area. */

/* Hide the default spinner + label. */
.k-grid .k-loader-container .k-loader,
.k-grid .k-loader-container .k-loader-container-label {
    display: none;
}

/* Make the loader an opaque light surface (hiding the previous page's rows) so the skeleton bars read
   clearly. The container itself is the surface: Telerik's own overlay element sits at z-index 10000,
   above the container's ::before/::after skeleton layers, so any visible overlay would hide them. */
.k-grid .k-loader-container {
    background-color: var(--gw-white);
    overflow: hidden;
}

.k-grid .k-loader-container .k-loader-container-overlay {
    display: none;
}

/* Horizontal skeleton row bars filling the loading area. */
.k-grid .k-loader-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 24px,
        var(--gw-light-grey) 24px,
        var(--gw-light-grey) 36px,
        transparent 36px,
        transparent 66px
    );
    opacity: 0.5;
}

/* A highlight band that sweeps across the bars for the shimmer. */
.k-grid .k-loader-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
    animation: gridLoaderShimmer 1.3s ease-in-out infinite;
}

@keyframes gridLoaderShimmer {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(320%);
    }
}

/* First-load shimmer, rendered in a grid's NoDataTemplate (the initial load has no rows, so Telerik
   shows that template instead of its loader). Same skeleton-bar + sweep look as the loader above.
   The template sits inside the no-records cell, which spans every column (wider than the grid) and
   carries cell padding. Positioning it absolutely against .k-grid-content -- the nearest positioned
   ancestor, since the table and its cells are static -- makes it fill exactly the visible data area,
   edge to edge, the same box Telerik's loader covers on later loads. The padding reset beats
   app.css's ".k-grid td > *" cell-content padding. */
.k-grid .grid-firstload-shimmer {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    overflow: hidden;
    background-color: var(--gw-white);
}

/* "No results" message in a grid's NoDataTemplate. The no-records cell spans every column, so with
   many columns it is far wider than the grid and the theme's centered text lands off-screen to the
   right. Pinned to the visible data area the same way as the first-load shimmer above. */
.k-grid .grid-norecords-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--kendo-spacing-4) var(--kendo-spacing-2);
    text-align: center;
}

/* Mobile card rows (a Bootstrap .card as a grid cell's template). app.css pads every cell's direct
   child ".k-grid td > *", which inset the card's header background and divider from its borders. A
   card brings its own header/body padding, so it takes none from the cell. */
.k-grid td > .card {
    padding: 0;
}

.grid-firstload-shimmer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 24px,
        var(--gw-light-grey) 24px,
        var(--gw-light-grey) 36px,
        transparent 36px,
        transparent 66px
    );
    opacity: 0.5;
}

.grid-firstload-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
    animation: gridLoaderShimmer 1.3s ease-in-out infinite;
}

/* ---- Non-modal document viewer windows (multiple-open documents) ---- */
/* Telerik windows render outside the component's DOM, so these rules are global
   and keyed off the Class set on each viewer window. */

/* The theme positions .k-window absolutely in page coordinates, so a window dragged low
   stretched the page past the footer. Instead of fixing the window itself (which breaks
   Telerik's drag math when the page is scrolled), each window is contained in this
   fixed, full-viewport, click-through layer via ContainmentSelector. */
.vortex-document-viewer-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* Above Telerik's root-level windows (10003+, one more per open window) so viewers opened from a
       modal float over it. Popups anchored inside a viewer (PDF toolbar dropdowns) still stack on top,
       since Telerik gives them their anchor's z-index + 1. */
    z-index: 10100;
}

.vortex-document-viewer.k-window {
    pointer-events: auto;
    border: 1px solid rgba(0, 40, 86, 0.12);
    border-radius: 6px;
    /* Layered elevation: a wide soft shadow plus a tight one for edge definition */
    box-shadow: 0 12px 28px rgba(0, 40, 86, 0.22),
                0 2px 6px rgba(0, 40, 86, 0.14);
}

.vortex-document-viewer .k-window-titlebar {
    background-color: var(--gw-blue);
    color: var(--gw-white);
    border-bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.vortex-document-viewer .k-window-title {
    color: var(--gw-white);
    font-weight: 600;
}

/* Let the PDF viewer fill the window so resizing the window resizes the PDF,
   and the window itself never shows a second scrollbar. */
.vortex-document-viewer .k-window-content {
    padding: 0;
    overflow: hidden;
}

/* Titlebar action icons (minimize / maximize / close) sit on the blue bar */
.vortex-document-viewer .k-window-titlebar .k-icon,
.vortex-document-viewer .k-window-titlebar .k-svg-icon,
.vortex-document-viewer .k-window-titlebar .k-button-icon {
    color: var(--gw-white);
}

.vortex-document-viewer .k-window-titlebar .k-svg-icon > svg {
    fill: var(--gw-white);
}

.vortex-document-viewer .k-window-titlebar .k-window-titlebar-action:hover {
    background-color: var(--gw-navy);
}