/*
    Variables
*/
:root {
    /* Colors*/
    --mj-col-charcoal: #3A3834;
    --mj-col-charcoal-contrast: #484642;
    --mj-col-gray: #F4F4F4;
    --mj-col-raspberry: #993566;
    --mj-col-teal: #298EA5;
    --mj-col-lime: #C8CF67;
    --mj-col-coral: #D34C41;
    --mj-col-soft-teal: #D3E7EC;
    --global-white-bg: #f5f5f5;
    /* Big Images*/
    --mj-img-dark-plus-signs: url(../images/Plus-Sign-Pattern-Seamless.png);
}

html {
    font-size: clamp(14px, 1.2vw, 18px);
}

body {
    font-family: 'Century Gothic', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent page scroll unless manually re-enabled in child */
}

#app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.navbar {
    background-color: var(--mj-col-charcoal);
    border: none;
    padding: 0;
    margin-bottom: 0;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start !important;
    align-items: center;
    width: 100%;
}

a, .btn-link {
    color: var(--mj-col-teal);
}

.btn-primary {
    color: #fff;
    background-color: var(--mj-col-teal);
    border-color: var(--mj-col-teal);
}

.nav-link {
    background-color: transparent;
    color: var(--mj-col-charcoal);
    text-decoration: none;
    padding: 0.75rem 1rem;
}

    .nav-link:hover, .nav-link:focus {
        background-color: transparent;
        font-weight: bold;
        color: var(--mj-col-teal);
        text-decoration: none;
    }

.container-fluid, .row {
    margin: 0;
    padding: 0;
}

.offcanvas-header {
    border-bottom: 1px solid #dee2e6;
}


#blazor-error-ui {
    background-color: #b32121;
    padding: 1rem;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 1030;
}

.side-nav {
    width: 250px;
    min-height: 100%;
    overflow-y: auto;
}

.mainPageTitle {
    color: var(--mj-col-raspberry) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

/* BEGIN 
    override Blazor NavLink elements styles that do not work with razor.css rules. 
*/

.topNavBar-profile-btns {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: var(--mj-col-teal);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    .topNavBar-profile-btns:hover {
        background-color: var(--mj-col-teal) !important;
        border-color: var(--mj-col-teal) !important;
        text-align: left;
        color: var(--global-white-bg);
        text-decoration: none;
    }

    .topNavBar-profile-btns:active {
        background-color: var(--mj-col-teal) !important;
        border-color: var(--mj-col-teal);
        text-align: left;
        color: #ffffff;
    }

    .topNavBar-profile-btns:focus {
        outline: none;
        text-align: left;
        box-shadow: 0 0 0 0.25rem rgba(41, 142, 165, 0.3);
    }

    .topNavBar-profile-btns:disabled,
    .topNavBar-profile-btns[disabled],
    .topNavBar-profile-btns.disabled {
        background-color: #ccc;
        border-color: #ccc;
        color: #666;
        pointer-events: none;
        opacity: 0.65;
        text-align: left;
    }

    .topNavBar-profile-btns[aria-current="page"] {
        background-color: rgba(41, 142, 165, 0.1) !important;
        color: var(--mj-col-teal) !important;
        font-weight: bold;
        text-align: left;
    }


.nav-link.admin-navbar-link.active,
.nav-link.admin-navbar-link[aria-current="page"] {
    background-color: var(--mj-col-teal) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-align: left;
}

/* BEGIN TOP NAVBAR */
.top-menu-nav {
    color: var(--mj-col-charcoal) !important;
    font-weight: 600;
    font-size: clamp(0.78rem, 1vw + 0.15rem, 0.9rem) !important;
    font-family: 'Century Gothic', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 0.04em;
    border-radius: 0;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

    .top-menu-nav:hover,
    .top-menu-nav:focus {
        background-color: rgba(41, 142, 165, 0.06);
        color: var(--mj-col-teal) !important;
    }

    .top-menu-nav[aria-current="page"] {
        background-color: rgba(41, 142, 165, 0.08) !important;
        color: var(--mj-col-teal) !important;
        font-weight: 700 !important;
    }

    .top-menu-nav.responsive-font {
        font-size: clamp(0.78rem, 1vw + 0.15rem, 0.9rem) !important;
    }
/* END TOP NAVBAR */


.admin-type-radioBtn:checked {
    background-color: var(--mj-col-teal);
    border-color: var(--mj-col-teal);
}

/* ─── Admin Center breadcrumbs ──────────────────────────────────────────── */

nav[aria-label="breadcrumb"] {
    --bs-breadcrumb-divider: '›';
}

.breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 0;
    padding: 0.1rem 0;
    background: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '›';
    color: #c0c4cc;
    font-size: 0.9rem;
    line-height: 1;
    vertical-align: middle;
}

.breadcrumb-item a {
    color: var(--mj-col-teal);
    text-decoration: none;
    transition: color 0.15s ease;
}

    .breadcrumb-item a:hover {
        color: #1e6d82;
        text-decoration: underline;
    }

.breadcrumb-item.active {
    color: var(--mj-col-charcoal);
    font-weight: 500;
}

/* ─── Admin Center page title — shared style for all admin pages ─────────── */

.adminCentralPageTitle {
    font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 1;
    color: var(--mj-col-raspberry) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cardFooterBtn {
    color: var(--mj-col-lime);
    background-color: var(--mj-col-charcoal-contrast);
}

    .cardFooterBtn:hover {
        color: var(--mj-col-teal);
    }

    .cardFooterBtn:active {
        color: var(--global-white-bg);
        border: 0.25em solid var(--global-white-bg);
    }

    .cardFooterBtn:focus,
    .cardFooterBtn:active,
    .cardFooterBtn:focus:active {
        outline: none;
        box-shadow: none;
    }


/* AdmincCenter/EditUser */
.admin-user-edit-btn {
    display: inline-block;
    max-width: 10em;
    padding: 0.5rem 1rem;
    background-color: var(--global-white-bg);
    color: var(--mj-col-teal);
    border: 1px solid var(--mj-col-teal);
    border-radius: 0.375rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    .admin-user-edit-btn:hover {
        background-color: var(--mj-col-teal);
        border-color: var(--mj-col-teal);
        color: var(--global-white-bg);
        text-decoration: none;
    }

    .admin-user-edit-btn:active {
        background-color: var(--mj-col-teal);
        border-color: var(--mj-col-teal);
        color: var(--global-white-bg);
    }

    .admin-user-edit-btn:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem var(--mj-col-teal);
    }

    .admin-user-edit-btn:disabled,
    .admin-user-edit-btn[disabled],
    .admin-user-edit-btn.disabled {
        background-color: #ccc;
        border-color: #ccc;
        color: #666;
        pointer-events: none;
        opacity: 0.65;
    }


/* AdminCenter/AddRole */

#addRole-roleName:focus {
    box-shadow: 0.1em 0.1em 0.1em 0.20rem var(--mj-col-teal);
}

/* AdmincCenter/AddUser */
.admin-add-user-form:focus {
    box-shadow: 0.1em 0.1em 0.1em 0.20rem var(--mj-col-teal);
}

/* END override Blazor NavLink elements styles that do not work with razor.css rules. */



/* BEGIN Admin Central Buttons*/
.btn.adminSaveBtn,
.adminSaveBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 0.5rem 1.4rem !important;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 0 !important;
    background-color: var(--mj-col-teal) !important;
    color: #ffffff !important;
    border: 1.5px solid var(--mj-col-teal) !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .btn.adminSaveBtn:hover,
    .adminSaveBtn:hover {
        background-color: #217a8e !important;
        border-color: #217a8e !important;
        color: #ffffff !important;
    }

    .btn.adminSaveBtn:focus,
    .btn.adminSaveBtn:focus-visible,
    .adminSaveBtn:focus,
    .adminSaveBtn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(41, 142, 165, 0.3) !important;
        color: #ffffff !important;
    }

    .btn.adminSaveBtn:disabled,
    .adminSaveBtn:disabled,
    .adminSaveBtn[disabled] {
        opacity: 0.55;
        pointer-events: none;
    }

.btn.adminCancelBtn,
.btn-secondary.adminCancelBtn,
.adminCancelBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 0.5rem 1.4rem !important;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--mj-col-charcoal) !important;
    border: 1.5px solid rgba(58, 56, 52, 0.28) !important;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

    .btn.adminCancelBtn:hover,
    .btn-secondary.adminCancelBtn:hover,
    .adminCancelBtn:hover {
        background-color: rgba(58, 56, 52, 0.07) !important;
        border-color: rgba(58, 56, 52, 0.5) !important;
        color: var(--mj-col-charcoal) !important;
    }

    .btn.adminCancelBtn:focus,
    .btn.adminCancelBtn:focus-visible,
    .adminCancelBtn:focus,
    .adminCancelBtn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(58, 56, 52, 0.15) !important;
        background-color: transparent !important;
        color: var(--mj-col-charcoal) !important;
    }


.adminPreviewDashboardBtn {
    font-weight: bold;
    display: inline-block;
    min-width: 8vw;
    background-color: var(--mj-col-charcoal);
    color: var(--global-white-bg);
    border: 1px solid var(--mj-col-charcoal);
    border-radius: 0.375rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease-in-out;
}


    .adminPreviewDashboardBtn:hover {
        background-color: var(--global-white-bg);
        border-color: var(--mj-col-charcoal);
        color: var(--mj-col-charcoal);
        text-decoration: none;
    }

    .adminPreviewDashboardBtn:active {
        background-color: var(--mj-col-charcoal);
        border-color: var(--mj-col-charcoal);
        color: var(--global-white-bg);
    }

    .adminPreviewDashboardBtn:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem var(--mj-col-charcoal);
    }
/* ************************************* */

/* Client Hub */
.ap-clienthub a.ap-tile-link,
.ap-clienthub a.ap-tile-link:link,
.ap-clienthub a.ap-tile-link:visited,
.ap-clienthub a.ap-tile-link:hover,
.ap-clienthub a.ap-tile-link:focus,
.ap-clienthub a.ap-tile-link:active {
    text-decoration: none !important;
}

.tile-description {
    color: var(--mj-col-charcoal);
}


.ap-btn-glass {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.65);
    color: var(--mj-col-charcoal);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

    .ap-btn-glass:hover {
        background: rgba(255,255,255,0.75);
        border-color: rgba(255,255,255,0.9);
        color: var(--mj-col-charcoal);
    }

/* Primary glass action */
.ap-btn-glass-strong {
    background: rgba(41,142,165,0.18);
    border: 1px solid rgba(41,142,165,0.35);
    color: var(--mj-col-charcoal);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

    .ap-btn-glass-strong:hover {
        background: rgba(41,142,165,0.30);
        border-color: rgba(41,142,165,0.55);
        color: var(--mj-col-charcoal);
    }

.ap-btn-glass,
.ap-btn-glass-strong {
    transition: all 160ms ease;
}

.ap-btn-glass,
.ap-btn-glass-strong {
    transition: all 160ms ease;
}

/* Admin Main Page Cards */
.mainAdmin-card {
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer !important;
    border-radius: 0.5rem;
}

    .mainAdmin-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 25px var(--mj-col-teal);
    }

    .mainAdmin-card:focus {
        outline: 3px solid var(--mj-col-teal);
        outline-offset: 2px;
    }

    .mainAdmin-card:active {
        transform: scale(0.98);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .mainAdmin-card.disabled {
        pointer-events: none;
        opacity: 0.6;
        filter: grayscale(80%);
    }
/* ************************************* */

/* Power BI Report Presentation mode layout */
.presentation-layout {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--global-white-bg, #f5f5f5);
}

.presentation-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.presentation-topbar {
    flex: 0 0 auto;
    padding-left: 8px;
    padding-right: 8px;
}

.presentation-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px;
}

.pbi-host-present {
    height: 100%;
}

.pbi-report-present {
    height: 100%;
    min-height: 0 !important;
}

/* Analytics top row spacing */
.analytics-toprow {
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
}

.analytics-toprow-right {
    flex: 0 0 auto;
}
/* ************************************* */


/* ─── Sidebar expand: overlay mode (no content shift on hover) ──────────────── */

/* Base: content always starts after the 75px collapsed sidebar */
.sidebar-vertical ~ main {
    margin-left: 75px;
    transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

/* Header is before the sidebar in DOM so use :has() */
.layout:has(.sidebar-vertical) > header {
    margin-left: 75px;
    transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

/* Backdrop: covers content when sidebar is expanded */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1034; /* just below sidebar at 1035 */
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    transition: background 0.22s ease, backdrop-filter 0.22s ease;
}

.sidebar-vertical:hover ~ .sidebar-backdrop {
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    pointer-events: auto;
}

/* ─── Pinned sidebar — stays expanded, content shifts right ──────────────── */

body.sidebar-pinned .sidebar-vertical {
    width: 280px !important;
    overflow: visible !important;
}

/* Push header and main content to the right of the expanded sidebar */
body.sidebar-pinned .sidebar-vertical ~ main {
    margin-left: 280px !important;
}

body.sidebar-pinned .layout:has(.sidebar-vertical) > header {
    margin-left: 280px !important;
}

/* Show expanded menu panel when pinned */
body.sidebar-pinned .sidebar-vertical .p-1,
body.sidebar-pinned .sidebar-vertical .p-3 {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Collapse the initials pill (same as hover) */
body.sidebar-pinned .sidebar-vertical .sidebar-collapsed-initials {
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Show full Aperture logo */
body.sidebar-pinned .sidebar-vertical::before { opacity: 0 !important; }
body.sidebar-pinned .sidebar-vertical::after  { opacity: 1 !important; }

/* Show full MJ Companies logo */
body.sidebar-pinned .sidebar-mj-logo::before { opacity: 0 !important; }
body.sidebar-pinned .sidebar-mj-logo::after  { opacity: 1 !important; }

/* Admin/BI sidebar: reveal link labels */
body.sidebar-pinned .sidebar-vertical .link-label {
    opacity: 1 !important;
    max-width: 200px !important;
}

/* Admin/BI sidebar: left-align nav links */
body.sidebar-pinned .sidebar-vertical .nav-link {
    padding: 0.65rem 0 0.65rem 1.1rem !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
}

body.sidebar-pinned .sidebar-vertical .dropdown-toggle::after {
    display: inline-block !important;
    margin-left: auto;
    margin-right: 0.75rem;
    color: var(--mj-col-charcoal);
}

/* No backdrop blur when sidebar is pinned (content already shifted away) */
body.sidebar-pinned .sidebar-vertical:hover ~ .sidebar-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

/* Mobile: pin state doesn't affect layout — sidebar is off-screen */
@media (max-width: 767.98px) {
    body.sidebar-pinned .sidebar-vertical ~ main,
    body.sidebar-pinned .layout:has(.sidebar-vertical) > header {
        margin-left: 0 !important;
    }
    body.sidebar-pinned .sidebar-vertical {
        transform: translateX(-100%) !important;
    }
    body.sidebar-pinned.sidebar-mobile-open .sidebar-vertical {
        transform: translateX(0) !important;
    }
}

/* ─── Mobile sidebar — overlay & open state ──────────────────────────────── */

/* Tap-to-close overlay, injected by apertureSidebar.open() in site.js */
.sidebar-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1034; /* just below sidebar at 1035 */
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

@media (max-width: 767.98px) {
    /* No 75 px sidebar indent on mobile — sidebar is off-screen */
    .sidebar-vertical ~ main,
    .layout:has(.sidebar-vertical) > header {
        margin-left: 0 !important;
    }

    /* Slide sidebar on-screen when body carries the open class */
    body.sidebar-mobile-open .sidebar-vertical {
        transform: translateX(0) !important;
    }

    /* ── Show expanded content inside sidebar when open ── */

    /* Fade in the inner menu panel (mirrors :hover rule in scoped CSS) */
    body.sidebar-mobile-open .sidebar-vertical .p-1 {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0.5rem 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Hide and collapse the initials pill when open (opacity alone leaves a gap) */
    body.sidebar-mobile-open .sidebar-vertical .sidebar-collapsed-initials {
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Crossfade to full Aperture logo when open */
    body.sidebar-mobile-open .sidebar-vertical::before {
        opacity: 0 !important;
    }
    body.sidebar-mobile-open .sidebar-vertical::after {
        opacity: 1 !important;
    }

    /* Crossfade to full MJ Companies logo when open */
    body.sidebar-mobile-open .sidebar-mj-logo::before {
        opacity: 0 !important;
    }
    body.sidebar-mobile-open .sidebar-mj-logo::after {
        opacity: 1 !important;
    }

    /* Admin/BI sidebar: slide link-labels into view when open */
    body.sidebar-mobile-open .sidebar-vertical .link-label {
        opacity: 1 !important;
        max-width: 200px !important;
    }

    /* Admin/BI sidebar: left-align nav links when open */
    body.sidebar-mobile-open .sidebar-vertical .nav-link {
        padding: 0.65rem 0 0.65rem 1.1rem !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
    }

    /* Admin sidebar: show dropdown caret when open */
    body.sidebar-mobile-open .sidebar-vertical .dropdown-toggle::after {
        display: inline-block !important;
        margin-left: auto;
        margin-right: 0.75rem;
        color: var(--mj-col-charcoal);
    }

    /* Disable desktop :hover expansion — open via button only */
    .sidebar-vertical:hover {
        width: 280px !important;
    }
}

/* ─── Page toolbar gutter fix ────────────────────────────────────────────── */
/* app.css resets .row { margin: 0 } which strips Bootstrap g-3 negative-margin
   compensation. Zero out the top margin that g-3 sets on each col. */
.page-toolbar > [class*="col"] {
    margin-top: 0 !important;
}