/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ── JSP Honda Global Fixes ─────────────────────────────────────────────────── */

/*
 * Brand-sidebar Honda logo — bulletproof CSS.
 *
 * Two layers:
 *   (1) Background-image FALLBACK on the brand-sidebar itself, so even if
 *       the <img> tag fails (404, race, blocked) the Honda logo still
 *       renders as the area's background.
 *   (2) Explicit dimensions on the <img> tag for the normal case.
 *
 * Materialize's `hide-on-med-and-down` class normally hides the IMG below
 * 993px — overridden here for the brand-sidebar specifically.
 */
/* Brand-sidebar styling — JSP logo on left, hamburger toggle on right */
html body aside.sidenav-main .brand-sidebar,
html body .brand-sidebar,
.brand-sidebar,
aside.sidenav-main .brand-sidebar {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 6px 8px !important;
    background-color: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    overflow: visible !important;
    gap: 4px;
}
/* Ensure pseudo-element ::before rule from old version doesn't paint a 2nd logo */
.brand-sidebar::before,
aside.sidenav-main .brand-sidebar::before { content: none !important; }
/* Position-fixed brand-sidebar ONLY on desktop (≥993px). On mobile, let
   Materialize's sidenav handle it normally — otherwise the fixed 260px
   white box overlays the hamburger trigger and breaks mobile nav. */
@media only screen and (min-width: 993px) {
    html body aside.sidenav-main .brand-sidebar,
    html body .brand-sidebar,
    .brand-sidebar,
    aside.sidenav-main .brand-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 260px !important;
        max-width: 260px !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 2147483647 !important;
        pointer-events: auto !important;
    }
}
/* Mobile hamburger toggle in navbar — styled pink/round to match the
   #brand-toggle look inside the desktop brand-sidebar.  Shown ONLY on
   screens <993px (where the brand-sidebar collapses to height:0 and the
   in-sidebar pink button is unreachable). */
.navbar-mobile-toggle {
    display: none !important;   /* default: hidden on desktop */
}
@media only screen and (max-width: 992px) {
    /* Put the hamburger INSIDE the navbar's flex flow on the LEFT.  The
       parent ul.navbar-list.right has 'right' float — override to flex,
       use order:-10 to make hamburger the first item, and margin-right:auto
       to push the bell/avatar group to the right.  No more position:fixed
       (which was rendering outside the navbar on some mobile browsers). */
    .navbar-list.right {
        float: none !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin: 0 !important;
    }
    .navbar-mobile-toggle {
        display: flex !important;
        visibility: visible !important;
        position: static !important;
        order: -10 !important;
        margin: 0 auto 0 4px !important;   /* margin-right: auto pushes siblings right */
        padding: 0 !important;
        flex: 0 0 auto !important;
        width: 38px !important;
        height: 38px !important;
        align-items: center !important;
        align-self: center !important;
    }
    /* Remove the earlier nav-wrapper padding-left — no longer needed since
       the hamburger is now an in-flow flex item. */
    .nav-wrapper {
        padding-left: 15px !important;
    }
    /* Push the slide-out drawer content below the navbar (~56-64px) so the
       drawer logo at the top isn't covered by the pink hamburger / navbar. */
    aside.sidenav-main ul#slide-out,
    aside.sidenav-main ul.sidenav {
        padding-top: 64px !important;
    }
    .navbar-mobile-toggle a.sidenav-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: #ec407a !important;        /* pink, matches brand-toggle accent */
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
        line-height: 1 !important;
    }
    .navbar-mobile-toggle a.sidenav-trigger:hover,
    .navbar-mobile-toggle a.sidenav-trigger:active {
        background: #d81b60 !important;
    }
    .navbar-mobile-toggle a.sidenav-trigger i.material-icons {
        font-size: 24px !important;
        line-height: 1 !important;
        color: #fff !important;
    }
}
/* Push the aside.sidenav-main itself above the navbar at the brand area only.
   The rest of the navbar (notification bell, avatar) stays clickable because
   the sidebar is only 260px wide — the navbar's right half is untouched. */
aside.sidenav-main {
    z-index: 1001 !important;
}

/* SINGLE LOGO RULE — only the JS-injected JSP group logo renders.
   Original Honda <img> and the "JSP Honda" text are hidden in the sidebar. */
.brand-sidebar img:not(.jsp-logo-pinned),
aside.sidenav-main .brand-sidebar img:not(.jsp-logo-pinned),
.brand-sidebar .logo-text,
aside.sidenav-main .brand-sidebar .logo-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}
.brand-sidebar .jsp-logo-pinned,
aside.sidenav-main .brand-sidebar .jsp-logo-pinned,
html body aside.sidenav-main .brand-sidebar a.brand-logo img.jsp-logo-pinned,
html body .brand-sidebar a.brand-logo img.jsp-logo-pinned {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 46px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    position: static !important;
}

/* Small Honda logo in navbar (left of notification bell) */
.navbar-honda-logo img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* Materialize select dropdown popups — z-index above sidenav (1001).
   Materialize toggles display via INLINE style on click (no .active class
   on the popup ul), so we MUST NOT force display:none here — that would
   block the inline display:block when user clicks. Only set z-index +
   background to fix the "behind / transparent" issue. */
.select-dropdown.dropdown-content,
ul.dropdown-content.select-dropdown,
.select-wrapper .dropdown-content,
.datepicker-modal {
    z-index: 99999 !important;
    background-color: #fff !important;
}
.select-dropdown.dropdown-content li > span,
ul.dropdown-content.select-dropdown li > span {
    color: #333 !important;
}
.select-dropdown.dropdown-content li.selected,
.select-dropdown.dropdown-content li.active {
    background-color: #f3e5f5 !important;
}

/* DEAD — pseudo-element logo removed. Was producing a 2nd overlapping logo
   alongside the JS-injected <img class="jsp-logo-pinned">. */
.dead-rule-jsp-before {
    content: '' !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    height: 36px !important;
    background-position: left center !important;
    background-size: contain !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body aside.sidenav-main .brand-sidebar .logo-wrapper,
html body .brand-sidebar .logo-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}
html body aside.sidenav-main .brand-sidebar .brand-logo,
html body .brand-sidebar .brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.brand-sidebar .brand-logo,
aside.sidenav-main .brand-sidebar .brand-logo,
html body aside.sidenav-main .brand-sidebar a.brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    /* Theme sets position:absolute + heavy padding which removes the link
       from the brand-sidebar's flex layout and pushes the JSP logo down by
       22px — partially clipping it inside the 64px white box. Force it
       back into the flex flow so the logo renders centered and fully visible. */
    position: static !important;
    padding: 0 8px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    font-size: 1rem !important;
}
/* Hide any non-JSP img inside .brand-logo (e.g. original Honda img or
   Materialize placeholders). The .jsp-logo-pinned img is excluded so the
   JSP 35-year logo remains visible after auth resolves. */
.brand-sidebar .brand-logo img:not(.jsp-logo-pinned),
aside.sidenav-main .brand-sidebar .brand-logo img:not(.jsp-logo-pinned),
.brand-sidebar .brand-logo img.hide-on-med-and-down:not(.jsp-logo-pinned),
aside.sidenav-main .brand-sidebar .brand-logo img.hide-on-med-and-down:not(.jsp-logo-pinned) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}
.brand-sidebar .brand-logo .logo-text,
aside.sidenav-main .brand-sidebar .brand-logo .logo-text,
.brand-sidebar .brand-logo .logo-text.hide-on-med-and-down,
aside.sidenav-main .brand-sidebar .brand-logo .logo-text.hide-on-med-and-down {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #4a148c !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-left: 60px !important;   /* leave room for the bg-image logo on the left */
    white-space: nowrap !important;
}

/*
 * Top navbar search bar — not used in JSP Honda.
 * Hidden on all screen sizes via CSS so no individual HTML file needs editing.
 * (Materialize's hide-on-med-and-down already hid it on mobile; this removes
 *  it on desktop too.)
 */
.header-search-wrapper {
    display: none !important;
}

/*
 * CRITICAL: The .content-wrapper-before div (gradient header overlay) was
 * blocking all button/link clicks on every page. pointer-events:none makes
 * it visual-only so clicks pass through to the actual page content.
 * Using body prefix for maximum specificity to beat template CSS.
 */
body .content-wrapper-before,
#main .content-wrapper-before,
div.content-wrapper-before {
    pointer-events: none !important;
    z-index: -1 !important;   /* keep template's original -1 so it stays behind all content */
}

/*
 * On desktop, give cards and card-panels z-index:999 so they always sit ABOVE
 * the Materialize sidenav overlay (z:997) and drag-target (z:998).
 * This is the definitive click-blocking fix — regardless of whether the overlay
 * is hidden or not, the card stacking context wins.
 *
 * Materialize SELECT dropdowns and datepickers are appended to <body> at
 * z-index:10001 (root stacking context), so they always appear above cards
 * (z:999 in root context). No dropdown is trapped inside the card context.
 *
 * On mobile (<993px) we do NOT set z-index so the sidenav overlay can function
 * normally (covers the content when the mobile menu is open).
 */
#main .card,
#main .card-panel {
    position: relative;
}
#main .container,
#main .section,
#main .col.s12 {
    position: relative;
}
#main .breadcrumbs-dark {
    position: relative;
}

@media only screen and (min-width: 993px) {
    #main .card,
    #main .card-panel {
        z-index: 999;   /* above overlay(997) and drag-target(998) */
    }
}

/*
 * Materialize injects a .sidenav-overlay div (z-index 997) and a .drag-target
 * div (z-index 998) into <body>.  On desktop these must NEVER block clicks.
 * We hide them via CSS AND via desktop-nav-fix.js for belt-and-suspenders.
 */

/* Global: overlay and drag-target are NEVER interactive on desktop */
.sidenav-overlay,
.drag-target {
    /* default: hidden in large-screen CSS and via JS */
}

@media only screen and (min-width: 993px) {
    /*
     * On desktop the sidenav is fixed — its overlay and drag-target MUST be
     * completely inert.  We use every available weapon:
     *   display:none      → removes from layout entirely
     *   pointer-events:none → no mouse events even if display is somehow restored
     *   z-index:-9999     → pushed to the very bottom of the stacking order
     *   visibility:hidden → extra safety for screen readers / a11y
     * desktop-nav-fix.js also suppresses these via inline style + MutationObserver.
     */
    .sidenav-overlay {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: -9999 !important;
    }

    .drag-target {
        display: none !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -9999 !important;
    }

    /*
     * Ensure ALL interactive controls in the main content area receive
     * pointer events regardless of any overlay z-index stacking.
     * position:relative gives them a stacking context above the
     * content-wrapper-before (z-index:-1) background overlay.
     */
    /* Interactive controls inside #main — allow clicks, stack above bg overlay */
    #main button,
    #main a,
    #main a.btn,
    #main a.btn-flat,
    #main a.btn-small,
    #main .btn,
    #main .btn-flat,
    #main .btn-small,
    #main input,
    #main input[type="text"],
    #main input[type="number"],
    #main input[type="date"],
    #main input[type="file"],
    #main input[type="email"],
    #main input[type="checkbox"],
    #main select,
    #main .select-wrapper,
    #main .select-wrapper input,
    #main .select-wrapper input.select-dropdown,
    #main .dropdown-content li,
    #main .chip-item,
    #main .chip-item .remove-chip,
    #main .chip-item .chip-text,
    #main .add-btn,
    #main .drop-zone,
    #main .results-table-wrap a,
    #main .results-table-wrap button,
    #main .pagination a,
    #main .pagination li,
    #main .tgt-input,
    #main .filter-bar button,
    #main .filter-bar input {
        pointer-events: auto !important;
        position: relative;
    }

    /*
     * Labels: MUST be position:absolute (Materialize floating labels) AND
     * pointer-events:none so clicks pass through to the input/select beneath.
     * Setting pointer-events:auto here intercepts clicks on dropdowns whose
     * label hasn't floated up yet (e.g. select with no value), making the
     * select trigger non-clickable. Materialize's default is none — preserve it.
     */
    #main .input-field label {
        pointer-events: none !important;
        position: absolute !important;  /* Materialize REQUIRES absolute for floating labels */
    }

    /*
     * Materialize dropdowns and datepicker are appended to <body>, outside #main.
     * Only set pointer-events here — NEVER add position:relative or z-index:auto
     * to datepicker/dropdown elements, as that breaks their fixed positioning
     * and causes the calendar to be clipped/truncated.
     */
    .select-dropdown.dropdown-content,
    .select-dropdown.dropdown-content li {
        pointer-events: auto !important;
    }
}

/*
 * GLOBAL: Materialize REQUIRES position:absolute on .input-field labels for
 * floating-label animation, AND pointer-events:none so clicks pass through to
 * the input/select underneath. Setting pointer-events:auto causes labels to
 * intercept clicks on dropdowns whose label hasn't floated up yet (e.g. branch
 * dropdown with no value selected) — making the dropdown appear "not clickable".
 *
 * Broad selectors (label[for], .input-field label) ensure this applies whether
 * the label is inside #main or in a modal/header — and at all screen sizes.
 */
label[for],
.input-field label,
#main .input-field label,
.card-content .input-field label {
    position: absolute !important;
    pointer-events: none !important;
}

/*
 * Navbar profile alignment: when the search wrapper is removed, .navbar-list
 * collapses to the left because .nav-wrapper is display:flex. Push it right.
 */
.nav-wrapper > .navbar-list.right,
.nav-wrapper > .navbar-list {
    margin-left: auto !important;
}

/*
 * THE BUG: #toast-container is a position:fixed wrapper for toast popups.
 * It defaults to position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
 * z-index:10010. Without explicit width/height it can stretch invisibly across
 * the page. With z-index:10010 it sat ABOVE every dropdown/button, silently
 * intercepting all clicks at full desktop width. Clicks at the right edge
 * accidentally missed the container so Status / EW / Clear button worked,
 * while Branch / Payment / From / To / Search button were blocked.
 *
 * Fix: make the toast-container itself pointer-events:none so clicks pass
 * THROUGH it to the dropdowns underneath. Toast notifications inside it
 * still get pointer-events:auto so users can dismiss them.
 */
#toast-container {
    pointer-events: none !important;
    width: auto !important;
    height: auto !important;
}
#toast-container > *,
#toast-container .toast {
    pointer-events: auto !important;
}

/*
 * NUCLEAR CLICKABILITY GUARANTEE.
 * Force EVERY descendant of the page body to receive pointer events. The
 * only elements blocked from intercepting clicks are:
 *   - <label> elements (must pass through to underlying input/select)
 *   - .sidenav-overlay / .drag-target on desktop (handled in media query above)
 *   - .content-wrapper-before (the gradient header background)
 *   - #toast-container (rule above keeps it click-through)
 *
 * This catches the case where elements aren't inside .card / .card-panel
 * (filter bars, modals, dialogs, custom UI on users-list / dropdown / etc).
 */
body *:not(label):not(.sidenav-overlay):not(.drag-target):not(.content-wrapper-before):not(#toast-container) {
    pointer-events: auto !important;
}
label[for],
.input-field label {
    pointer-events: none !important;
}

/* Re-assert overlay suppression AFTER the nuclear rule (desktop only) */
@media only screen and (min-width: 993px) {
    .sidenav-overlay,
    .drag-target {
        pointer-events: none !important;
    }
}

/*
 * Consistent visual feedback on every clickable element. The user reported
 * that some chips/buttons showed the hand cursor + pink hover highlight while
 * others didn't — that inconsistency was because cursor:pointer was only set
 * inline on a few elements. Apply it broadly so every clickable element
 * behaves the same way.
 */
.card button,
.card-panel button,
.card a:not(.disabled),
.card-panel a:not(.disabled),
.card .btn,
.card-panel .btn,
.card .btn-flat,
.card .btn-small,
.card .btn-floating,
.card [role="button"],
.card .remove-chip,
.card-panel .remove-chip,
.card .chip-item,
.card .add-btn,
.card .pagination li,
.card input[type="checkbox"],
.card input[type="radio"],
.card .select-wrapper input.select-dropdown,
.card .dropdown-content li {
    cursor: pointer !important;
}

/* Pink/red hover tint — same feedback the user liked on remove-chip */
.card .remove-chip:hover,
.card-panel .remove-chip:hover {
    color: #e91e63 !important;        /* pink */
    background: rgba(233, 30, 99, 0.08);
    border-radius: 50%;
}

/* Subtle hover lift for buttons & links inside cards */
.card .btn:hover,
.card-panel .btn:hover,
.card a:not(.disabled):not(.brand-logo):hover,
.card-panel a:not(.disabled):not(.brand-logo):hover {
    filter: brightness(1.08);
}

/*
 * Profile dropdown z-index fix — REAL ROOT CAUSE.
 * The profile dropdown is a child of <nav class="navbar-fixed"> in HTML.
 * navbar-fixed creates its own stacking context (position:fixed). On desktop
 * .card has z-index:999 in the root context. The navbar's z-index in the root
 * is typically 999 too — but because the dropdown is INSIDE the navbar's
 * stacking context, even z-index:99999 on the dropdown is capped by the
 * navbar's z-index in root.
 *
 * Fix: lift the WHOLE navbar above .card (z:9999), THEN give the dropdown
 * z-index inside the navbar. Now the dropdown sits above all cards on
 * every page (not just index.html).
 */
.navbar-fixed,
header.page-topbar,
header.page-topbar .navbar-fixed {
    z-index: 9999 !important;
}
ul.dropdown-content,
ul#profile-dropdown,
ul#notif-dropdown,
ul.dropdown-content#profile-dropdown,
.dropdown-content {
    z-index: 99999 !important;
}

/*
 * Checkbox style — match user-login.html's "Remember Me" checkbox.
 * The .filled-in class on dashboard checkboxes was removed in the HTML so
 * Materialize's default style (the same one user-login.html uses) is now
 * applied automatically — empty box outline, checkmark on tick. No CSS
 * override needed; default Materialize is correct.
 */

/*
 * Ensure Materialize select-dropdown popups are NEVER clipped by parent
 * overflow:hidden, and always sit above all page content. Diagnostic
 * proved the popup opens (display:block) but if its parent .card has
 * overflow:hidden the user can't see it — appears as "click does nothing".
 */
.card,
.card-content,
.card-panel,
.input-field,
.input-field .select-wrapper {
    overflow: visible !important;
}
.dropdown-content.select-dropdown,
.select-wrapper .dropdown-content {
    z-index: 100000 !important;
    position: absolute !important;
}

/* Filter card on search.html (and any card with class "filter-card") must
   stack ABOVE the records/results card below it, otherwise select dropdown
   popups opening downward get cut off where the records card starts. */
#main .card.filter-card,
.card.filter-card {
    z-index: 5000 !important;
    position: relative !important;
}
#main .card.filter-card .input-field,
.card.filter-card .input-field {
    overflow: visible !important;
}

/*
 * GLOBAL: kill any z-index on form-control wrappers that would create a
 * stacking context inside cards and trap click events. Sales.html has none
 * of these by accident — that's why it works. Force every form-control
 * container to NOT create a stacking context.
 */
.input-field,
.input-field .select-wrapper,
.input-field input,
.input-field select,
.input-field textarea,
.card .input-field,
.card-content .input-field {
    z-index: auto !important;
}

/*
 * Sidenav visibility GUARANTEE on desktop (≥ 993 px).
 * The sidenav was sometimes invisible (only brand logo showing) because
 * `#slide-out { opacity: 0 !important }` from menu-permissions.js v7
 * outranked the inline opacity:1 restore. Even after fixing that script,
 * we belt-and-suspenders the CSS so the sidenav can NEVER be hidden on
 * desktop, regardless of JS state or stale cached scripts.
 */
@media only screen and (min-width: 993px) {
    aside.sidenav-main,
    aside.sidenav-main .brand-sidebar,
    aside.sidenav-main #slide-out,
    aside.sidenav-main ul.sidenav {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    aside.sidenav-main #slide-out {
        display: block !important;
    }
    /* DO NOT force display on individual <li> items — that overrides our JS
       that hides Admin Management items for non-super_admin users.
       Just ensure they're visible by default; our JS handles selective hiding. */
    aside.sidenav-main #slide-out > li {
        opacity: 1;
        visibility: visible;
    }
}

/* Notification bell icon style */
.nav-wrapper .navbar-list.right .notification-link .material-icons {
    color: #fff;
    font-size: 1.5rem;
    line-height: 64px;
    padding: 0 6px;
}
.nav-wrapper .navbar-list.right .notification-badge {
    position: absolute;
    top: 14px;
    right: 0;
    background: #f44336;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    text-align: center;
}

/* ── Global form spacing fix ────────────────────────────────────────────────
 *
 * Materialize default: .input-field { margin-top:1rem; margin-bottom:1rem }
 * and .row { margin-bottom:20px }. Stacked together this creates ~52px of
 * dead vertical space between every pair of form rows. Tighten both so forms
 * look compact and professional across ALL pages.
 *
 * .card-content scope keeps dashboard layout rows (stat cards, chart rows)
 * outside this rule — they live at section/container level, not inside cards.
 * ─────────────────────────────────────────────────────────────────────────── */
.card-content .input-field {
    margin-top: 12px;
    margin-bottom: 4px;
}

.card-content .row {
    margin-bottom: 6px;
}

/* Section/divider headers inside forms — Materialize gives them big margin */
.card-content .form-section-head,
.card-content .section-title {
    margin-top: 14px !important;
    margin-bottom: 8px !important;
}

/* =============================================================================
   FINAL OVERRIDES — placed at end of file so cascade order wins ties.
   Three fixes:
   (1) JSP brand-sidebar + logo: nuclear visibility, beats any theme rule.
   (2) Mobile brand-sidebar: relative position so it sits at top of the slide-out
       drawer without covering the Dashboard menu item.
   (3) Profile dropdown z-index above the mobile sidenav overlay so Logout is
       clickable.
   ============================================================================= */

/* (1) JSP brand-sidebar — the brand-sidebar element itself now carries all
       its layout / background styling INLINE in the HTML (style="..."
       attribute with !important).  Inline !important beats any stylesheet
       so the logo cannot be overridden by template / Materialize / cached
       old CSS.  No external rule needed here. */

/* Standalone fixed-position JSP logo at top-left of viewport.
   Inlined in every HTML file as <div id="jsp-fixed-logo">.  Hide on mobile
   so the drawer-internal logo (.jsp-drawer-logo-li) takes over.
   Note: the inline `display: flex` on #jsp-fixed-logo intentionally lacks
   !important so this rule wins on mobile. */
@media only screen and (max-width: 992px) {
    #jsp-fixed-logo { display: none !important; }
}

/* JSP logo at the top of the slide-out drawer on mobile only.  Inlined in
   every HTML file as <li class="jsp-drawer-logo-li"> at the top of the
   ul#slide-out.  Hidden on desktop (the fixed top-left #jsp-fixed-logo
   takes its place there). */
.jsp-drawer-logo-li {
    display: none;
    list-style: none !important;
    padding: 14px 8px !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: center !important;
    margin: 0 !important;
}
.jsp-drawer-logo-li img {
    display: inline-block !important;
    height: 46px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
}
@media only screen and (max-width: 992px) {
    .jsp-drawer-logo-li { display: block !important; }
}
html body aside.sidenav-main > .brand-sidebar > a.brand-logo {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
/* JSP logo image is styled inline on the <img> element itself (!important).
   No external rule needed — kept here as a fallback in case the inline
   style attribute is stripped by some browser extension. */
html body aside.sidenav-main > .brand-sidebar > a.brand-logo > img.jsp-logo-pinned,
html body img.jsp-logo-pinned {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 46px !important;
    width: auto !important;
}

/* (2) Mobile: hide the brand-sidebar entirely so it cannot overlap the
       slide-out menu (Dashboard would otherwise be covered).  The pink
       hamburger lives in the navbar on mobile (see .navbar-mobile-toggle
       block above).  Slide-out menu items render from the very top, with
       Dashboard first. */
@media only screen and (max-width: 992px) {
    html body aside.sidenav-main > .brand-sidebar,
    .brand-sidebar,
    aside.sidenav-main .brand-sidebar {
        display: none !important;
    }
    aside.sidenav-main ul.sidenav,
    aside.sidenav-main ul#slide-out {
        padding-top: 8px !important;
        margin-top: 0 !important;
    }
}

/* (3) Profile dropdown must sit above the mobile sidenav overlay (z-index ~997)
       so clicking Logout actually navigates instead of hitting the overlay.
       On mobile, Materialize's auto-position math is off because of our flex
       overrides — pin the dropdown to top-right of the viewport explicitly. */
#profile-dropdown.dropdown-content,
ul#profile-dropdown {
    z-index: 99999 !important;
}
#profile-dropdown li a[href="logout.php"],
#profile-dropdown li a#logout-btn {
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
}
@media only screen and (max-width: 992px) {
    #profile-dropdown.dropdown-content,
    ul#profile-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 8px !important;
        left: auto !important;
        max-width: 240px !important;
        width: 240px !important;
    }
}

/* ─── SweetAlert v1 stuck-overlay safety net ─────────────────────────────
   When SweetAlert dismisses, the `.sweet-overlay` div is supposed to fade out
   and end up display:none.  Sometimes the fade-out timeline gets interrupted
   (e.g. by a JS reset right after the dialog closes) and the overlay stays
   in the DOM with opacity:0 but pointer-events still enabled — at which
   point every click on the page hits the invisible overlay and does
   nothing.  These rules guarantee that once the overlay is fading out or
   hidden, it cannot block clicks. */
.sweet-overlay[style*="opacity: 0"],
.sweet-overlay[style*="display: none"],
.sweet-alert[style*="opacity: 0"],
.sweet-alert[style*="display: none"] {
    pointer-events: none !important;
}
/* When a SweetAlert isn't actively shown, also remove any body scroll lock
   it left behind. */
body:not(.stop-scrolling) {
    overflow: visible !important;
}

/* ─── Hardened SweetAlert v1 safety net (May 2026) ──────────────────────
   The opacity-based detection above isn't always enough — SweetAlert
   sometimes leaves the overlay without an inline opacity:0 style.  These
   rules make any overlay/alert that does NOT carry the .visible class
   non-blocking and invisible. */
.sweet-overlay:not(.visible) {
    pointer-events: none !important;
    opacity: 0 !important;
    display: none !important;
}
.sweet-alert:not(.visible) {
    pointer-events: none !important;
}