/* Load AFTER app-header.css and the header's existing inline styles. */
#header-area.pd-mega-active { z-index:1060; }
.pd-mega-backdrop {
    position:fixed; inset:0; z-index:1050;
    background:rgba(12,23,39,.30);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 180ms ease,visibility 180ms ease;
}
.pd-mega-backdrop.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
#header-area .pd-mega-menu {
    --pd-ink:#253449; --pd-muted:#607087; --pd-line:#dde5ee;
    --pd-surface:#f0f4f9; --pd-soft:#f8fafc;
    max-height:var(--pd-mega-available-height,calc(100dvh - 125px));
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:#adbccc transparent;
    box-shadow:0 24px 65px rgba(10,25,45,.22);
}
#header-area .pd-mega-menu::-webkit-scrollbar { width:7px; }
#header-area .pd-mega-menu::-webkit-scrollbar-track { background:transparent; margin-block:12px; }
#header-area .pd-mega-menu::-webkit-scrollbar-thumb { background:#adbccc; border:2px solid var(--pd-surface); border-radius:8px; }
#header-area .pd-mega-menu.show { animation:pd-mega-enter 200ms cubic-bezier(.2,.7,.25,1) both; }
@keyframes pd-mega-enter {
    from { opacity:0; translate:0 -9px; }
    to { opacity:1; translate:0 0; }
}
#header-area .pd-tool-card { background:#fff; }
#header-area .pd-tool-card:hover { background:#fff; border-color:#8eb9eb; box-shadow:0 5px 18px rgba(30,70,120,.08); }
#header-area .pd-tools-top { padding:22px 26px 0; }
#header-area .pd-tools-grid { padding:18px 26px 24px; gap:12px; }
#header-area .pd-tool-card { padding:14px; gap:12px; }
#header-area .pd-tool-visual { width:56px; height:56px; }
#header-area .pd-tool-visual .material-symbols-outlined { font-size:29px; }
/* Three columns at desktop sizes: five tools plus the note occupy two rows. */
@media(min-width:1200px) {
    #header-area .pd-tools-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Keep the desktop menu usable on short windows; scroll only when needed. */
@media(max-height:650px) and (min-width:1200px) {
    #header-area .pd-tools-top { padding-top:16px; }
    #header-area .pd-tools-grid { padding-top:14px; padding-bottom:16px; }
    #header-area .pd-tool-card { padding:12px; }
    #header-area .pd-mega-section, #header-area .pd-mega-intro { padding-top:20px; padding-bottom:20px; }
}
[data-bs-theme=dark] #header-area .pd-mega-menu,
[data-theme=dark] #header-area .pd-mega-menu,
body.dark-theme #header-area .pd-mega-menu,
body.dark-mode #header-area .pd-mega-menu {
    --pd-surface:#182330; --pd-ink:#edf2fa; --pd-muted:#b4c1d2;
    --pd-line:#3b4b60; --pd-soft:#233245;
}
[data-bs-theme=dark] #header-area .pd-tool-card,
[data-theme=dark] #header-area .pd-tool-card,
body.dark-theme #header-area .pd-tool-card,
body.dark-mode #header-area .pd-tool-card { background:#243447; }
@media(prefers-reduced-motion:reduce) {
    #header-area .pd-mega-menu.show { animation:none; }
    .pd-mega-backdrop { transition:none; }
}

@media (min-width: 1200px) {
    /* Give the left side the space remaining beside the account controls. */
    #header-area > .d-flex > .d-flex:first-child {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 16px;
    }

    #header-area .app-header-right {
        flex: 0 0 auto;
    }

    /* Carry that space through to the search field. */
    #header-area .app-header-nav,
    #header-area .app-header-nav > li:has(> .app-header-search) {
        flex: 1 1 0;
        min-width: 0;
    }

    #header-area .app-header-nav .app-header-search,
    #header-area .app-header-nav .app-header-search-input {
        width: 100%;
    }
}