/* ============================================================
   EnforceGuard · Fluent 2 — APP SHELL (top header, no sidebar)
   One header for everything; account menu; theme toggle.
   ============================================================ */

.app-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--f-canvas); }

/* ── Top header ─────────────────────────────────────────── */
.app-hdr {
    position: sticky; top: 0; z-index: 50;
    background: var(--f-glass); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--f-stroke-2);
}
.app-hdr-inner { display: flex; align-items: center; gap: 0.85rem; height: 60px; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

.app-hdr-brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--f-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--f-fg-1); text-decoration: none; flex: none; }
.app-hdr-brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.app-hdr-brand b { color: var(--f-brand-fg); }

.app-hdr-nav { display: flex; align-items: center; gap: 0.15rem; margin-left: 0.5rem; }
.app-hdr-link { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: var(--f-fg-2); padding: 0.5rem 0.78rem; border-radius: var(--f-radius-m); text-decoration: none; transition: background var(--f-dur-fast) var(--f-ease), color var(--f-dur-fast) var(--f-ease); white-space: nowrap; }
.app-hdr-link svg { width: 18px; height: 18px; opacity: 0.85; }
.app-hdr-link:hover { background: var(--f-subtle-hover); color: var(--f-fg-1); }
.app-hdr-link.active { background: var(--f-brand-tint-bg); color: var(--f-brand-tint-fg); }

.app-hdr-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.app-iconbtn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--f-radius-m); border: 1px solid transparent; background: transparent; color: var(--f-fg-2); cursor: pointer; text-decoration: none; transition: background var(--f-dur-fast) var(--f-ease), color var(--f-dur-fast) var(--f-ease); }
.app-iconbtn:hover { background: var(--f-subtle-hover); color: var(--f-fg-1); }
.app-iconbtn svg { width: 20px; height: 20px; }
.app-theme-toggle .ico-sun { display: none; }
.app-theme-toggle .ico-moon { display: block; }
[data-theme="dark"] .app-theme-toggle .ico-sun { display: block; }
[data-theme="dark"] .app-theme-toggle .ico-moon { display: none; }

/* Account dropdown (native <details>) */
.app-acct { position: relative; }
.app-acct-trigger { list-style: none; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem 0.55rem 0.25rem 0.3rem; border-radius: var(--f-radius-circle); user-select: none; }
.app-acct-trigger::-webkit-details-marker { display: none; }
.app-acct-trigger:hover { background: var(--f-subtle-hover); }
.app-acct-trigger .name { font-size: 0.85rem; font-weight: 600; color: var(--f-fg-1); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-acct-trigger .chev { width: 16px; height: 16px; color: var(--f-fg-3); transition: transform var(--f-dur-fast) var(--f-ease); }
.app-acct[open] .app-acct-trigger .chev { transform: rotate(180deg); }
.app-acct-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 224px; background: var(--f-surface); border: 1px solid var(--f-stroke-card); border-radius: var(--f-radius-xl); box-shadow: var(--f-shadow-16); padding: 6px; z-index: 60; animation: app-pop 0.14s ease both; }
@keyframes app-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.app-acct-head { padding: 0.5rem 0.65rem 0.6rem; border-bottom: 1px solid var(--f-stroke-2); margin-bottom: 4px; }
.app-acct-head .n { font-size: 0.88rem; font-weight: 600; color: var(--f-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-acct-head .s { font-size: 0.74rem; color: var(--f-fg-3); }
.app-acct-menu a, .app-acct-menu button { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; background: transparent; border: 0; font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--f-fg-1); padding: 0.5rem 0.65rem; border-radius: var(--f-radius-m); text-decoration: none; cursor: pointer; }
.app-acct-menu a:hover, .app-acct-menu button:hover { background: var(--f-subtle-hover); }
.app-acct-menu svg { width: 17px; height: 17px; color: var(--f-fg-3); flex: none; }
.app-acct-menu form { margin: 0; }
.app-acct-menu .sep { height: 1px; background: var(--f-stroke-2); margin: 4px 0; }
.app-acct-menu .danger, .app-acct-menu .danger svg { color: var(--f-danger-fg); }

.app-hdr-burger { display: none; }

/* ── Content ────────────────────────────────────────────── */
.app-main { flex: 1; }
.app-content { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }

/* ── Mobile menu ────────────────────────────────────────── */
.app-hdr-mobile { display: none; }
@media (max-width: 880px) {
    .app-hdr-nav, .app-acct { display: none; }
    .app-hdr-burger { display: grid; }
    .app-hdr-mobile {
        display: none; flex-direction: column; gap: 2px;
        padding: 0.5rem 1.5rem 1rem; border-bottom: 1px solid var(--f-stroke-2);
        background: var(--f-surface);
    }
    .app-hdr-mobile.open { display: flex; }
    .app-hdr-mobile a, .app-hdr-mobile button { display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: left; background: transparent; border: 0; font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--f-fg-1); padding: 0.7rem 0.6rem; border-radius: var(--f-radius-m); text-decoration: none; cursor: pointer; }
    .app-hdr-mobile a:hover, .app-hdr-mobile button:hover { background: var(--f-subtle-hover); }
    .app-hdr-mobile a.active { background: var(--f-brand-tint-bg); color: var(--f-brand-tint-fg); }
    .app-hdr-mobile svg { width: 19px; height: 19px; color: var(--f-fg-3); }
    .app-hdr-mobile .sep { height: 1px; background: var(--f-stroke-2); margin: 5px 0; }
    .app-hdr-mobile .danger, .app-hdr-mobile .danger svg { color: var(--f-danger-fg); }
    .app-hdr-mobile form { margin: 0; width: 100%; }
    .app-content { padding: 1.25rem 1.1rem 2.5rem; }
}