/* Modern styling extensions for Athena */

/* Card styling */
.athena-card {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    margin-bottom: 1.5rem;
}

    .athena-card:hover {
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

    .athena-card .card-header {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        padding: 1rem 1.25rem;
    }

/* Button styling */
.btn {
    border-radius: 0.25rem;
    font-weight: 500;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

/* Form controls */
.form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Table styling */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

/* Badge styling */
.badge {
    font-weight: 500;
    padding: 0.4em 0.7em;
}

/* Spinner overlay */
#dvLoading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8) url('/Images/spinner.gif') no-repeat center center;
    z-index: 9999;
    display: none;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .athena-card {
        margin-bottom: 1rem;
    }

    .btn {
        padding: 0.375rem 0.75rem;
    }
}

/* Fix for menu icon alignment */
.dropdown-menu .dropdown-item i {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* Ensure consistent padding on dropdown items */
.dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

    /* Add a slight hover effect */
    .dropdown-menu .dropdown-item:hover {
        background-color: rgba(13, 110, 253, 0.05);
    }

/* ==========================================================================
   Athena — mobile navigation (offcanvas)          Bootstrap 5.2.3
   --------------------------------------------------------------------------
   v3 — SUPERSEDES both earlier versions. Delete whatever is in modernStyle.css
   from the previous rounds and paste this in its place; it is cumulative.

   Quick check that you're actually running this file: search your deployed
   CSS for "athenaNavOffcanvas". If it isn't there, the browser or the
   ~/Content/css bundle is serving a cached copy (see note at the bottom).

   Pairs with the markup in Site.master.navbar-offcanvas.txt.
   Everything is inside a max-width media query except sections 6 and 7, so
   the desktop layout is untouched.
   ========================================================================== */


/* ---- 1. Panel size ------------------------------------------------------ */

@media (max-width: 991.98px) {

    #athenaNavOffcanvas.offcanvas-end {
        --bs-offcanvas-width: min(88vw, 360px);
        width: min(88vw, 360px);
    }

    #athenaNavOffcanvas .offcanvas-body {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2rem;
    }
}


/* ---- 2. Top-level labels: line up icon, text and caret ------------------
   The four toggles use fa-users / fa-user-tie / fa-user-shield / fa-cogs,
   which are all different widths, so the labels start at different x
   positions and the carets end at ragged ones. Flex row + fixed-width icon
   + caret pushed to the right edge fixes both.                              */

@media (max-width: 991.98px) {

    #athenaNavOffcanvas .navbar-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        padding-top: .6rem;
        padding-bottom: .6rem;
        font-weight: 600;
    }

        /* Uniform icon column. Same effect as adding fa-fw in the markup. */
        #athenaNavOffcanvas .navbar-nav > .nav-item > .nav-link > i {
            flex: 0 0 auto;
            width: 1.5em;
            text-align: center;
            margin-right: .5rem !important; /* overrides the me-1 utility */
        }

        /* Caret to the far right of the panel instead of hugging the text. */
        #athenaNavOffcanvas .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
            margin-left: auto;
        }
}


/* ---- 3. Dark-theme the inline dropdowns --------------------------------- */

@media (max-width: 991.98px) {

    #athenaNavOffcanvas .dropdown-menu {
        background-color: transparent !important;
        border: 0;
        box-shadow: none !important;
        padding: .25rem 0 .5rem;
        margin-left: .75rem;
        border-left: 2px solid rgba(255, 255, 255, .18);
    }

    /* Flex so a label that wraps to a second line indents under itself
       rather than tucking under the icon.                                   */
    #athenaNavOffcanvas .dropdown-item {
        display: flex;
        align-items: flex-start;
        color: rgba(255, 255, 255, .85);
        white-space: normal; /* BS default is nowrap — clips     */
        line-height: 1.3;
        padding: .5rem .75rem; /* ~38px tap target                */
    }

        #athenaNavOffcanvas .dropdown-item > i {
            flex: 0 0 auto;
            width: 1.25em;
            text-align: center;
            margin-top: .15em; /* optically centres on line 1     */
            margin-right: .5rem !important;
        }

        #athenaNavOffcanvas .dropdown-item:hover,
        #athenaNavOffcanvas .dropdown-item:focus {
            color: #fff;
            background-color: rgba(255, 255, 255, .1);
        }

        #athenaNavOffcanvas .dropdown-item.menuDisabled {
            color: rgba(255, 255, 255, .35);
        }

    #athenaNavOffcanvas .dropdown-divider {
        border-top-color: rgba(255, 255, 255, .2);
    }
}


/* ---- 4. User / log-off block -------------------------------------------
   THE OFF-PANEL DROPDOWN FIX.

   Bootstrap only makes dropdowns render inline below the expand breakpoint
   via ".navbar-nav .dropdown-menu { position: static }". The user block is a
   plain <div class="d-flex">, NOT a .navbar-nav, so that rule never matched
   it — this one menu kept its Popper positioning. Combined with
   .dropdown-menu-end (right edge aligned to the toggle) it renders off the
   left side of a 360px panel, where offcanvas-body's overflow clips it.

   Popper writes position/inset/transform as INLINE styles, so overriding
   them needs !important. This is scoped to below-lg only, so the desktop
   end-aligned popup is unaffected.                                          */

@media (max-width: 991.98px) {

    #athenaNavOffcanvas .athena-nav-user {
        align-items: flex-start !important; /* was align-items-center */
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

        #athenaNavOffcanvas .athena-nav-user > .nav-item.dropdown {
            flex: 1 1 auto;
            min-width: 0;
        }

        #athenaNavOffcanvas .athena-nav-user .dropdown-menu {
            position: static !important;
            inset: auto !important;
            transform: none !important;
            float: none;
            width: 100%;
        }
}


/* ---- 5. Offcanvas header ------------------------------------------------ */
/* Bootstrap hides this at lg and up, so it is mobile-only already. */

#athenaNavOffcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}


/* ---- 6. Desktop: cap dropdown height ------------------------------------
   Admin Tasks has 22 items; on a 768px-tall laptop it can still run off the
   bottom of the window.                                                     */

@media (min-width: 992px) {

    .navbar .dropdown-menu {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}


/* ---- 7. Slimmer scrollbars ---------------------------------------------- */

#athenaNavOffcanvas .offcanvas-body::-webkit-scrollbar,
.navbar .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

#athenaNavOffcanvas .offcanvas-body::-webkit-scrollbar-thumb,
.navbar .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 3px;
}


/* ==========================================================================
   If the dark styling doesn't appear at all
   --------------------------------------------------------------------------
   Site.master loads modernStyle.css directly (line 28) AND pulls the
   ~/Content/css bundle (line 35). ASP.NET's bundler caches minified output,
   and WebGrease — the minifier in System.Web.Optimization — is old enough
   that it can choke on modern syntax such as min() or CSS custom properties,
   silently dropping the rest of the file from that point on.

   To rule it out, set this in BundleConfig and retest:

       BundleTable.EnableOptimizations = False

   If the styles appear with optimizations off but not on, that's the
   minifier. Keep this block in modernStyle.css (loaded raw) rather than in
   anything that goes through the bundle, and hard-refresh (Ctrl+F5).
   ========================================================================== */