/*
 * Shared MPA shell layout (#193, M5b). Loaded before any page-specific
 * stylesheet, and scoped entirely under axera-shell-* class names / the
 * #axera-shell-root and #axera-page-content ids - none of which collide with
 * the generic .header / .sidebar / .nav-item / .container names real feature
 * pages already use for their own markup (see app/settings/index.html and
 * app/admin_dashboard/index.html). A feature page's own `* { margin: 0 }`
 * or `body { ... }` reset still applies to the whole document - that is
 * inherent to sharing one DOM without an iframe or shadow root - so every
 * rule below sets its own box model and spacing explicitly rather than
 * relying on browser or feature defaults.
 */

:root {
    /* Published so a page that sizes itself to the viewport (a full-height
     * dashboard) can subtract the fixed header - it falls back to 0px when
     * the page is not inside this layout. */
    --axera-shell-header-height: 71px;
}

#axera-shell-root,
#axera-shell-root * {
    box-sizing: border-box;
}

.axera-shell-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: #0a84ff;
    color: #fff;
    padding: 10px 16px;
    margin: 0;
    border-radius: 0 0 6px 0;
    font: 500 14px/1.4 'Manrope', system-ui, sans-serif;
    text-decoration: none;
}

.axera-shell-skip-link:focus {
    left: 0;
}

.axera-shell-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--axera-shell-header-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0 30px;
    background: #1e1e1e;
    border-bottom: 1px solid #333;
    color: #fff;
    font-family: 'Manrope', system-ui, sans-serif;
}

.axera-shell-hamburger {
    width: 28px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.axera-shell-hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    margin: 0;
    background: #fff;
    border-radius: 2px;
}

.axera-shell-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.axera-shell-logo-text {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    margin: 0;
}

.axera-shell-env-badge {
    margin: 0 0 0 12px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.axera-shell-env-badge[data-level="local"] {
    background: #3a4a5a;
    border-color: #6b9bd1;
    color: #9cc4ec;
}

.axera-shell-env-badge[data-level="demo"] {
    background: #4a3a1e;
    border-color: #d1a06b;
    color: #ecc49c;
}

.axera-shell-env-badge[data-level="mixed"] {
    background: #4a1e1e;
    border-color: #d16b6b;
    color: #ec9c9c;
}

.axera-shell-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;
}

.axera-shell-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d9ff;
    margin: 0;
}

.axera-shell-sidebar {
    position: fixed;
    top: var(--axera-shell-header-height);
    left: -280px;
    width: 280px;
    height: calc(100vh - var(--axera-shell-header-height));
    overflow-y: auto;
    margin: 0;
    padding: 20px 0;
    background: #252525;
    border-right: 1px solid #333;
    z-index: 900;
    transition: left 0.2s ease;
    display: flex;
    flex-direction: column;
}

.axera-shell-sidebar.is-open {
    left: 0;
}

/* Suppresses the slide transition only while a persisted open state is
 * being restored on load (#197) - a genuine hamburger toggle removes this
 * before it ever applies. See the restore scripts in templates/layout.html.
 * #axera-page-content has no transition of its own today, but carries
 * the same class in case that ever changes. */
.axera-shell-sidebar.no-transition,
#axera-page-content.no-transition {
    transition: none;
}

.axera-shell-nav-section {
    margin: 0 0 16px;
    padding: 0;
}

.axera-shell-nav-section-title {
    padding: 10px 25px;
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.axera-shell-nav-item {
    display: flex;
    align-items: center;
    padding: 9px 25px;
    margin: 0;
    color: #999;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    border-left: 3px solid transparent;
}

/* Sign Out (#197) shares every other nav-item's look, but is a <button> -
 * an action, not a destination, so it has no href and no manifest entry -
 * and needs the UA button resets an <a> never carried. */
.axera-shell-signout {
    width: 100%;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    /* Only reset the button's UA font family; the font-size (13px) and weight
     * come from .axera-shell-nav-item. Using the `font` shorthand here wiped
     * those and left Sign Out larger than every other item. */
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.axera-shell-nav-item:hover,
.axera-shell-nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
}

.axera-shell-nav-item.is-active,
.axera-shell-nav-item[aria-current="page"] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-left-color: #aaa;
}

.axera-shell-nav-item[hidden] {
    display: none;
}

/* An always-empty spacer (#197), never populated with an actual icon today,
 * but its width is what pins every label to one left edge. */
.axera-shell-nav-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.axera-shell-nav-label {
    margin: 0;
}

.axera-shell-user-greeting {
    padding: 10px 25px;
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.axera-shell-more-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 25px;
    margin: 0;
    background: transparent;
    border: none;
    font: 300 12px/1 'Manrope', system-ui, sans-serif;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.axera-shell-more-toggle[aria-expanded="true"] .axera-shell-more-chevron {
    transform: rotate(90deg);
}

.axera-shell-more-list[hidden] {
    display: none;
}

.axera-shell-overlay {
    position: fixed;
    top: var(--axera-shell-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 850;
}

.axera-shell-overlay[hidden] {
    display: none;
}

/*
 * Confirm modal (#197), used by shell-runtime.js's showConfirm() for Sign Out.
 */
.axera-shell-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.axera-shell-confirm-overlay.is-open {
    display: flex;
}

.axera-shell-confirm-box {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 24px;
    width: 340px;
    margin: 0;
    font-family: 'Manrope', system-ui, sans-serif;
}

.axera-shell-confirm-box p {
    font-size: 14px;
    color: #e0e0e0;
    margin: 0 0 20px;
    font-weight: 300;
}

.axera-shell-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.axera-shell-confirm-actions button {
    padding: 6px 14px;
    margin: 0;
    border-radius: 5px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.axera-shell-confirm-cancel {
    background: none;
    border: 1px solid #555;
    color: #999;
}

.axera-shell-confirm-cancel:hover {
    color: #fff;
    border-color: #888;
}

.axera-shell-confirm-ok {
    background: #3b4654;
    border: 1px solid #505d6e;
    color: #fff;
}

.axera-shell-confirm-ok:hover {
    background: #4a5768;
}

#axera-page-content {
    margin: 0;
    padding-top: var(--axera-shell-header-height);
    min-height: 100vh;
}

/*
 * Sidebar open, wide viewport (#197): the content shifts out from under
 * the sidebar (margin-left, not a fixed width, so the content area's own
 * width shrinks to fit rather than overflowing horizontally) and stays
 * fully interactive - no click-capturing overlay. Below 768px there is no
 * room to shift, so the sidebar overlays content and the overlay is the
 * tap-outside-to-close target, exactly as it already is - neither rule
 * here touches that. shell-runtime.js's setOpen() toggles
 * --shifted on #axera-page-content; the overlay's own hidden attribute is
 * irrelevant at this width because it is forced off here regardless.
 */
@media (min-width: 768px) {
    .axera-shell-overlay {
        display: none;
    }

    /* #-qualified to outrank #axera-page-content's own `margin: 0` above -
     * a class selector alone loses that specificity fight and silently
     * no-ops. */
    #axera-page-content.axera-shell-main--shifted {
        margin-left: 280px;
    }
}

/*
 * Light mode for the shared chrome only (#197) - theme.js's own light-mode
 * override targets feature-page content, never this stylesheet, so without
 * these the header/sidebar stayed dark regardless of the page's own theme.
 * body.light-mode is applied by shell-runtime.js's applyShellTheme().
 */
body.light-mode .axera-shell-header {
    background: #fff;
    border-bottom-color: #ddd;
}

body.light-mode .axera-shell-logo-text {
    color: #111;
}

body.light-mode .axera-shell-status {
    color: #555;
}

body.light-mode .axera-shell-hamburger span {
    background-color: #333;
}

body.light-mode .axera-shell-sidebar {
    background: #fff;
    border-right: none;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.06);
}

body.light-mode .axera-shell-nav-section-title,
body.light-mode .axera-shell-user-greeting {
    color: #999;
}

body.light-mode .axera-shell-nav-item {
    color: #555;
}

body.light-mode .axera-shell-nav-item:hover,
body.light-mode .axera-shell-nav-item:focus-visible {
    background: #f0f2f5;
    color: #111;
}

body.light-mode .axera-shell-nav-item.is-active,
body.light-mode .axera-shell-nav-item[aria-current="page"] {
    background: #e8edf3;
    color: #2979b8;
    border-left-color: #2979b8;
}

body.light-mode .axera-shell-more-toggle {
    color: #999;
}

body.light-mode .axera-shell-more-toggle:hover {
    color: #555;
}

/*
 * Protected-page bootstrap (#194). `--pending` ships baked into the static
 * build output of every protected page (templates/layout.html) and is
 * removed by shell-runtime.js once the session check resolves - kept as
 * `visibility: hidden` rather than `display: none` so page-specific scripts
 * that measure layout before the reveal (chart sizing, etc.) still see real
 * dimensions rather than a collapsed 0x0 box.
 */
.axera-shell-main--pending {
    visibility: hidden;
}

/* The login/recovery entry point (templates/auth-layout.html) has no header
 * or sidebar, so its content area is centered on the viewport instead of
 * offset for a fixed header. */
.axera-shell-main--auth {
    padding-top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Animated orb logo (restored in the header, matches the old shell) ── */
.axera-shell-logo .animated-logo { flex: 0 0 auto; }
        .animated-logo {
            width: 40px;
            height: 40px;
            position: relative;
            /* --logo-size drives the scan line's travel; it moves by transform
               rather than top, so it cannot trigger layout. */
            --logo-size: 40px;
        }

        .animated-logo.large {
            width: 180px;
            height: 180px;
            --logo-size: 180px;
        }

        .logo-blob {
            position: absolute;
            background: linear-gradient(135deg, rgba(0, 180, 255, 0.22) 0%, rgba(100, 30, 180, 0.22) 100%);
            border: 1.5px solid;
            box-shadow: 0 0 20px rgba(0, 180, 255, 0.28), inset 0 0 16px rgba(0, 180, 255, 0.18);
            overflow: hidden;
            will-change: transform;
        }

        /* 7-layer blobs - scaled for 40px */
        .logo-blob-1 { width: 36.7px; height: 32.7px; top: 1.7px; left: 1.7px; border-radius: 41% 59% 56% 44% / 49% 51% 52% 48%; border-color: rgba(0, 200, 255, 0.82); animation: logo-morph-1 2.4s ease-in-out infinite; }
        .logo-blob-2 { width: 32px; height: 35px; top: 1px; left: 4px; border-radius: 59% 41% 47% 53% / 41% 59% 42% 58%; border-color: rgba(220, 0, 140, 0.72); animation: logo-morph-2 2.7s ease-in-out infinite; opacity: 0.88; }
        .logo-blob-3 { width: 34px; height: 30px; top: 3px; left: 3px; border-radius: 47% 53% 62% 38% / 54% 39% 61% 46%; border-color: rgba(100, 30, 200, 0.65); animation: logo-morph-3 3s ease-in-out infinite; opacity: 0.8; }
        .logo-blob-4 { width: 29.3px; height: 33.3px; top: 2.3px; left: 5.3px; border-radius: 53% 47% 45% 55% / 47% 53% 45% 55%; border-color: rgba(0, 150, 220, 0.58); animation: logo-morph-4 3.3s ease-in-out infinite; opacity: 0.72; }
        .logo-blob-5 { width: 32.7px; height: 31.3px; top: 3.7px; left: 3.7px; border-radius: 45% 55% 59% 41% / 52% 44% 56% 48%; border-color: rgba(180, 40, 220, 0.52); animation: logo-morph-5 3.6s ease-in-out infinite; opacity: 0.64; }
        .logo-blob-6 { width: 27.3px; height: 32px; top: 3px; left: 6.7px; border-radius: 55% 45% 43% 57% / 56% 42% 58% 44%; border-color: rgba(255, 50, 180, 0.46); animation: logo-morph-6 3.9s ease-in-out infinite; opacity: 0.56; }
        .logo-blob-7 { width: 25px; height: 29.3px; top: 4.7px; left: 7.7px; border-radius: 50% 50% 55% 45% / 48% 52% 50% 50%; border-color: rgba(140, 0, 255, 0.4); animation: logo-morph-7 4.2s ease-in-out infinite; opacity: 0.48; }

        /* 7-layer blobs - full size for 180px */
        .large .logo-blob-1 { width: 165px; height: 147px; top: 7.5px; left: 7.5px; }
        .large .logo-blob-2 { width: 144px; height: 157.5px; top: 4.5px; left: 18px; }
        .large .logo-blob-3 { width: 153px; height: 135px; top: 13.5px; left: 13.5px; }
        .large .logo-blob-4 { width: 132px; height: 150px; top: 10.5px; left: 24px; }
        .large .logo-blob-5 { width: 147px; height: 141px; top: 16.5px; left: 16.5px; }
        .large .logo-blob-6 { width: 123px; height: 144px; top: 13.5px; left: 30px; }
        .large .logo-blob-7 { width: 112.5px; height: 132px; top: 21px; left: 34.5px; }

        @keyframes logo-morph-1 {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(180deg); }
        }
        @keyframes logo-morph-2 {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(-180deg) scale(1.1); }
        }
        @keyframes logo-morph-3 {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(150deg); }
        }
        @keyframes logo-morph-4 {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(-150deg); }
        }
        @keyframes logo-morph-5 {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(120deg) scale(1.08); }
        }
        @keyframes logo-morph-6 {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(-120deg); }
        }
        @keyframes logo-morph-7 {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(90deg); }
        }

        /* Respect a stated preference for less motion: the logo is decorative,
           so it simply stops rather than degrading. */
        @media (prefers-reduced-motion: reduce) {
            .logo-blob,
            .logo-scan-line {
                animation: none;
            }
        }

        .logo-scan-line {
            position: absolute;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00d9ff, transparent);
            box-shadow: 0 0 10px #00d9ff;
            animation: logo-scan-move 3s ease-in-out infinite;
            z-index: 10;
        }

        @keyframes logo-scan-move {
            0% { transform: translateY(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(var(--logo-size, 40px)); opacity: 0; }
        }

        /* ── Chat assistant (ported from the pre-MPA shell) ── */
        .home-container { position: relative; }
        .home-container::before {
            content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
            background: radial-gradient(56% 40% at 50% 20%, rgba(0, 150, 235, 0.12), transparent 70%);
            transition: background .5s ease;
        }
        .home-container > * { position: relative; z-index: 1; }