/* =================================================================
   Toast Container
   ================================================================= */
#toast_container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1500;
    display: flex;
    flex-direction: column;
}

#toast_container > .toast {
    display: block;
    pointer-events: auto;
    margin-bottom: 0.5rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#toast_container > .toast.removing {
    opacity: 0;
}

/* =================================================================
   Site Banner - Pure CSS Layout (No JavaScript)
   ================================================================= */

/* Banner container - fixed at top of viewport */
.adid-site-banner {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Below navbar */
}

.adid-site-banner__inner {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.9rem 1rem;
    min-height: 3rem; /* Consistent minimum height */
}

.adid-site-banner__content {
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
    padding-right: 2rem; /* Space for close button */
    flex: 1;
}

.adid-site-banner__link {
    text-decoration: underline;
    color: inherit;
}

.adid-site-banner__link:hover {
    opacity: 0.9;
}

/* Close button - positioned absolutely, doesn't affect layout */
.adid-site-banner__close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.35rem 0.45rem;
}

/* Top placement - full viewport width */
.adid-site-banner--top .adid-site-banner__inner {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* =================================================================
   CSS Custom Properties for Layout
   ================================================================= */
:root {
    --banner-height: 3rem;
    --banner-super-height: 4.5rem;
    --sidebar-width: 225px;
    --navbar-height: 56px;
}

/* =================================================================
   ================================================================= */

/* Top navbar - fixed at top */
.sb-topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1039;
    padding: 0.5rem 1rem;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
}

/* Force all navbar children to align vertically */
.sb-topnav > *,
.sb-topnav .input-group,
.sb-topnav .form-control,
.sb-topnav .btn,
.sb-topnav form {
    display: flex;
    align-items: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Override Bootstrap's my-2 my-md-0 classes */
.sb-topnav .my-2,
.sb-topnav .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure input groups align properly */
.sb-topnav .input-group {
    height: auto;
}

.sb-topnav .input-group .form-control,
.sb-topnav .input-group .btn {
    height: 38px;
    line-height: 1.5;
}


/* When banner exists, push navbar down */
body.sb-nav-fixed:has(.adid-site-banner) .sb-topnav {
    top: var(--banner-height);
}

body.sb-nav-fixed:has(.adid-site-banner--super) .sb-topnav {
    top: var(--banner-super-height);
}

/* Sidenav and content container */
#layoutSidenav {
    display: flex;
    margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
}

/* When banner exists, add extra space at top of layout */
body.sb-nav-fixed:has(.adid-site-banner) #layoutSidenav {
    margin-top: calc(var(--navbar-height) + var(--banner-height));
    min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
}

body.sb-nav-fixed:has(.adid-site-banner--super) #layoutSidenav {
    margin-top: calc(var(--navbar-height) + var(--banner-super-height));
    min-height: calc(100vh - var(--navbar-height) - var(--banner-super-height));
}

/* Sidebar navigation */
#layoutSidenav #layoutSidenav_nav {
    flex-basis: var(--sidebar-width);
    flex-shrink: 0;
    transition: transform 0.15s ease-in-out;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
    z-index: 1038;
}

/* When banner exists, remove sidebar padding and adjust top position */
body.sb-nav-fixed:has(.adid-site-banner) #layoutSidenav #layoutSidenav_nav .sb-sidenav {
    padding-top: 0 !important;
}

body.sb-nav-fixed:has(.adid-site-banner) #layoutSidenav #layoutSidenav_nav {
    top: calc(var(--navbar-height) + var(--banner-height));
    height: calc(100vh - var(--navbar-height) - var(--banner-height));
}

/* Ensure sidebar menu can scroll when banner is present */
body.sb-nav-fixed:has(.adid-site-banner) #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
    overflow-y: auto !important;
    flex-grow: 1;
}

body.sb-nav-fixed:has(.adid-site-banner--super) #layoutSidenav #layoutSidenav_nav .sb-sidenav {
    padding-top: 0 !important;
}

body.sb-nav-fixed:has(.adid-site-banner--super) #layoutSidenav #layoutSidenav_nav {
    top: calc(var(--navbar-height) + var(--banner-super-height));
    height: calc(100vh - var(--navbar-height) - var(--banner-super-height));
}

/* Ensure sidebar menu can scroll when super banner is present */
body.sb-nav-fixed:has(.adid-site-banner--super) #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
    overflow-y: auto !important;
    flex-grow: 1;
}

/* Main content area */
body.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding-top: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#layoutSidenav #layoutSidenav_content main {
    margin-top: 0;
}

/* =================================================================
   Responsive adjustments - Sidebar & Content
   ================================================================= */

/* Mobile: sidebar slides in/out, content full width */
@media (max-width: 991.98px) {
    #layoutSidenav {
        flex-direction: column;
    }

    #layoutSidenav #layoutSidenav_nav {
        transform: translateX(calc(-1 * var(--sidebar-width)));
        transition: transform 0.3s ease-in-out;
    }

    /* On mobile, content should always be full width, independent of sidebar state */
    body.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
        width: 100%;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Sidebar visible state */
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        transform: translateX(0);
    }

    /* Overlay when sidebar is open */
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1037;
        transition: opacity 0.3s ease-in-out;
    }
}

/* Desktop: sidebar always visible */
@media (min-width: 992px) {
    #layoutSidenav {
        flex-direction: row;
    }

    #layoutSidenav #layoutSidenav_nav {
        transform: translateX(0);
        overflow-y: auto;
    }

    /* When sidebar is visible on desktop, add left padding for offset */
    body.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
        padding-left: var(--sidebar-width) !important;
    }

    /* When sidebar is toggled on desktop, hide it and remove padding */
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav,
    body.sb-nav-fixed.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content,
    body.sb-nav-fixed.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* =================================================================
   Navbar Styling
   ================================================================= */

/* Navbar brand and logo - consistent sizing */
body.sb-nav-fixed .navbar-brand {
    width: var(--sidebar-width);
    margin: 0;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
}

body.sb-nav-fixed .navbar-brand img {
    width: 150px;
    object-fit: scale-down;
    display: block;
}

/* Logo sizing for unauthenticated pages (login, etc.) */
.sb-topnav .navbar-brand img {
    width: 150px;
    object-fit: scale-down;
    display: block;
}

/* Ensure navbar search and user inputs are hidden on mobile by default */
@media (min-width: 768px) {
    .sb-topnav .d-none.d-md-inline-block {
        display: inline-flex;
        align-items: center;
    }
}

/* =================================================================
   Mobile Banner Adjustments
   ================================================================= */

@media (max-width: 575.98px) {
    :root {
        --banner-height: 2.5rem;
        --banner-super-height: 3.5rem;
    }

    .adid-site-banner__inner {
        padding: 0.75rem 0.5rem;
        min-height: var(--banner-height);
    }

    .adid-site-banner__content {
        font-size: 0.875rem;
        line-height: 1.3;
        padding-right: 2.5rem;
    }

    .adid-site-banner__close {
        right: 0.5rem;
        padding: 0.25rem 0.35rem;
        font-size: 1.1rem;
    }

    .adid-site-banner--super .adid-site-banner__inner {
        min-height: var(--banner-super-height);
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --banner-height: 2.75rem;
    }

    .adid-site-banner__inner {
        padding: 0.85rem 0.75rem;
        min-height: var(--banner-height);
    }

    .adid-site-banner__content {
        font-size: 0.95rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .adid-site-banner__inner {
        padding: 0.9rem 1rem;
    }

    .adid-site-banner__content {
        font-size: 1rem;
    }
}

@media (max-width: 374.98px) {
    :root {
        --banner-height: 2.25rem;
    }

    .adid-site-banner__inner {
        padding: 0.65rem 0.4rem;
        min-height: var(--banner-height);
    }

    .adid-site-banner__content {
        font-size: 0.8rem;
        padding-right: 2rem;
    }

    .adid-site-banner__close {
        font-size: 1rem;
        padding: 0.2rem 0.3rem;
    }
}

@media (min-width: 1200px) {
    .adid-site-banner__inner {
        padding: 1rem 1.25rem;
    }
}

@media (min-width: 1400px) {
    .adid-site-banner__content {
        font-size: 1.1rem;
    }
}

/* =================================================================
   Fallback for browsers that don't support :has()
   ================================================================= */
@supports not (selector(:has(*))) {
    body.sb-nav-fixed.has-banner .sb-topnav {
        top: var(--banner-height);
    }

    body.sb-nav-fixed.has-banner #layoutSidenav {
        margin-top: calc(var(--navbar-height) + var(--banner-height));
    }

    body.sb-nav-fixed.has-banner #layoutSidenav #layoutSidenav_nav .sb-sidenav {
        padding-top: 0 !important;
    }

    body.sb-nav-fixed.has-super-banner .sb-topnav {
        top: var(--banner-super-height);
    }

    body.sb-nav-fixed.has-super-banner #layoutSidenav {
        margin-top: calc(var(--navbar-height) + var(--banner-super-height));
    }

    body.sb-nav-fixed.has-super-banner #layoutSidenav #layoutSidenav_nav .sb-sidenav {
        padding-top: 0 !important;
    }

    @media (max-width: 991.98px) {
        body.sb-nav-fixed.has-banner #layoutSidenav #layoutSidenav_nav {
            top: calc(var(--navbar-height) + var(--banner-height));
            height: calc(100vh - var(--navbar-height) - var(--banner-height));
        }

        body.sb-nav-fixed.has-super-banner #layoutSidenav #layoutSidenav_nav {
            top: calc(var(--navbar-height) + var(--banner-super-height));
            height: calc(100vh - var(--navbar-height) - var(--banner-super-height));
        }
    }

    @media (min-width: 992px) {
        body.sb-nav-fixed.has-banner #layoutSidenav #layoutSidenav_nav {
            top: calc(var(--navbar-height) + var(--banner-height));
            height: calc(100vh - var(--navbar-height) - var(--banner-height));
        }

        body.sb-nav-fixed.has-super-banner #layoutSidenav #layoutSidenav_nav {
            top: calc(var(--navbar-height) + var(--banner-super-height));
            height: calc(100vh - var(--navbar-height) - var(--banner-super-height));
        }
    }
}

/* =================================================================
   Banner Text Wrapping and Responsiveness
   ================================================================= */

.adid-site-banner__content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.adid-site-banner__text {
    display: inline;
}

.adid-site-banner {
    overflow-x: hidden;
}

.adid-site-banner__inner {
    max-width: 100%;
    box-sizing: border-box;
}

/* =================================================================
   Content Overflow Prevention
   ================================================================= */


#layoutSidenav #layoutSidenav_content main {
    width: 100%;
    max-width: 100%;
}

/* Reduce excessive top spacing between navbar and page header */
#layoutSidenav #layoutSidenav_content main .container-fluid h1.mt-4 {
    margin-top: 1rem;
}

/* When banner is present, reduce container top padding to maintain consistent gap with navbar */
body.sb-nav-fixed:has(.adid-site-banner) #layoutSidenav #layoutSidenav_content main .container-fluid {
    padding-top: 0;
}

body.sb-nav-fixed:has(.adid-site-banner--super) #layoutSidenav #layoutSidenav_content main .container-fluid {
    padding-top: 0;
}


/* Allow page to scroll when content is wider */
body {
    overflow-x: auto;
    width: 100%;
    padding-top: 0;
}

/* =================================================================
   DataTables - Make page scroll instead of table container
   ================================================================= */
.dataTables_wrapper .dataTables_scroll {
    overflow-x: visible !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.dataTables_wrapper .dataTables_scrollHead {
    overflow: visible !important;
}

/* Ensure main content area allows horizontal overflow to page */
#layoutSidenav #layoutSidenav_content {
    overflow-x: visible !important;
}

#layoutSidenav #layoutSidenav_content main {
    overflow-x: visible !important;
}

#layoutSidenav #layoutSidenav_content main .container-fluid {
    overflow-x: visible !important;
}