@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* necessary so that page doesn't shift when going from scrolling page to non-scrolling. example is login to registration tabs  */
@media (min-width: 768px) {
    .desktop-padding {
        padding-left: 16px;
    }
}

@media (max-width: 767px) {
    .desktop-padding {
        padding-left: 0px;
    }
}



html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    /*overflow: hidden;*/ /* <-- critical */
}

a, .btn-link {
    color: #0366d6;
}

.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* full viewport height */
}

.fixed-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--bs-body-bg, #fff);
}

/*.scrollable-content {
    flex: 1;
    overflow-y: auto;*/ /* only this part scrolls */
/*}*/

/* Window should scroll for Index page */
.index-layout-root .fixed-header {
    position: sticky; /* sticky header; window scrolls */
    top: 0;
    z-index: 1030;
    background: var(--bs-body-bg, #fff);
}

/* Disable the inner scroller that causes the second scrollbar */
.index-layout-root .scrollable-content {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Make sure the container itself isn't forcing viewport height */
.index-layout-root .page-container {
    height: auto !important;
    min-height: 0 !important;
}

/* Common culprits that reintroduce inner scrollbars */
.index-layout-root .main,
.index-layout-root .vh-100,
.index-layout-root [style*="100vh"] {
    height: auto !important;
    min-height: auto !important;
}

/* If Telerik/Mud adds layout wrappers with overflow, neutralize them */
.index-layout-root .k-page-layout,
.index-layout-root .k-content,
.index-layout-root .mud-layout,
.index-layout-root .mud-main-content {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.smalllink {
    font-size: small;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


hr.hrfade {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

.disabled-navlink {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}


.no-space {
    margin: 0; /* Remove default margins for ASP.NET controls */
}


.modal-backdrop {
    z-index: 1050 !important; /* Ensure it's above everything */
}

.modal {
    z-index: 1060 !important; /* Ensure the modal appears above the backdrop */
}

@media (max-width: 767.98px) {  /*universally lessen the x margins on mobile */
    .container,
    .container-fluid,
    .row,
    .content-wrapper,
    .main-wrapper {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .no-mobile-x-margin {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==== FINAL OVERRIDES: lock action pane to true browser height ==== */

/* If you set these earlier with different values, keep them in sync here */
.player-layout {
    --pad-y: 16px; /* your page top/bottom padding */
}

/* 1) Ensure the page itself is the only outer scroller (you already fixed .scrollable-content) */
:global(html), :global(body) {
    overflow-y: auto !important;
}

/* 2) The grid should not constrain height; the pane will handle its own height */
.player-layout {
    /* allow normal page scroll; don't clamp the grid’s height */
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

/* 3) Action pane: use dynamic viewport units (100dvb) with a 100vh fallback */
@supports (height: 100dvb) {
    .action-pane {
        position: sticky !important;
        top: calc(var(--header-offset) + var(--pad-y)) !important;
        height: calc(100dvb - var(--header-offset) - (var(--pad-y) * 2)) !important; /* true browser height */
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* only inner scroller scrolls */
        z-index: 3;
    }
}

/* Fallback for browsers without dvb/dvh support */
@supports not (height: 100dvb) {
    .action-pane {
        position: sticky !important;
        top: calc(var(--header-offset) + var(--pad-y)) !important;
        height: calc(100vh - var(--header-offset) - (var(--pad-y) * 2)) !important; /* older viewport unit */
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 3;
    }
}

/* 4) Inner scroller stays the only scrollable region on the right */
.action-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}

.action-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    width: 100%;
    padding-left: 6px;
    padding-right: 2px;
}

/* 5) Left side uses the page scroll only (no internal scrollbars) */
.left-stack, .details-content, .video-box {
    height: auto !important;
    overflow: visible !important;
    min-height: 0;
}

/* 6) Desktop-only: keep this behavior; mobile still stacks & disables sticky */
@media (max-width: 991.98px) {
    .action-pane {
        position: static !important;
        top: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    .action-scroll {
        overflow: visible !important;
        max-height: none !important;
        padding-left: 0;
        padding-right: 0;
    }
}