/* Account menu, apps menu, light/dark toggle and View as banner for the Customer Portal.
   Copied from D:\AzureWebApps\Shared\ui.css (the portal keeps its own look, so it does not load ui.css).
   Used with shared/app-menu.js. Keep in step with ui.css when those components change. */
:root { --hdr: #101A14; --hdr-2: #1E2C23; --hdr-line: #2E3F34; --hdr-ink: #C9D6CD; --r-sm: 8px; --danger-soft: #FDECEA; --ok-soft: rgba(0,116,86,.12); }
/* light/dark toggle (shared/app-menu.js adds it before the user name) */
.theme-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--hdr-line); background: transparent; color: var(--hdr-ink); cursor: pointer; }
.theme-btn:hover { background: var(--hdr-2); color: #fff; }
.theme-btn svg { display: block; }

/* app menu (shared/app-menu.js adds the button and panel) */
.amenu-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--hdr-line); background: transparent; color: var(--hdr-ink); cursor: pointer; }
.amenu-btn:hover, .amenu-btn[aria-expanded="true"] { background: var(--hdr-2); color: #fff; }
.amenu { position: fixed; top: 50px; left: 12px; z-index: 50; width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 70px); overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.25); padding: 8px; }
.amenu.amenu-right { left: auto; right: 12px; }
.amenu-h { margin: 4px 8px 6px; font: 600 .78rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.amenu-empty { margin: 8px; color: var(--muted); font-size: .9rem; }
.amenu-app { border-radius: var(--r-sm); }
.amenu-app.cur { background: var(--surface-2); }
.amenu-link { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.amenu-link:hover { background: var(--surface-2); }
.amenu-n { font-weight: 700; }
.amenu-d { font-size: .85rem; color: var(--muted); }
.amenu-d em { font-style: normal; color: var(--danger); }
.amenu-ext { color: var(--muted); font-weight: 400; }
.amenu-tag { font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); margin-left: 4px; }
.amenu-app.soon { padding: 8px 10px; opacity: .75; }
.amenu-pages { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; }
.amenu-pages a { font-size: .85rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.amenu-pages a[aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* account panel (shared/app-menu.js: click your name) */
.acct-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--hdr-ink); font: inherit; padding: 5px 8px; cursor: pointer; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: var(--hdr-2); color: #fff; border-color: var(--hdr-line); }
.acct-moved { display: none !important; }
.acct { top: 50px; }
.acct-me { display: grid; gap: 2px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-me b { font: 700 1.05rem var(--f-display); }
.acct-me span { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.acct-list { list-style: none; margin: 0 0 8px; padding: 0 8px; display: grid; gap: 4px; font-size: .88rem; }
.acct-list li { display: flex; justify-content: space-between; gap: 12px; }
.acct-list span { color: var(--muted); }
.acct-list b { font-weight: 600; text-align: right; }
.acct-list b.yes { color: var(--brand-2); }
.acct-list b.no { color: var(--danger); }
.acct-diag { display: grid; gap: 8px; justify-items: start; padding: 0 8px; }
.acct-diag .acct-list { padding: 0; width: 100%; margin: 0; }
.acct-diag .ispin { margin-right: 6px; }
.acct-verdict { margin: 0; font-size: .88rem; }
.acct-verdict.ok { color: var(--brand-2); }
.acct-verdict.bad { color: var(--danger); }
.acct-note { margin: 0; font-size: .8rem; color: var(--muted); }
.acct-note.done { color: var(--brand-2); font-weight: 600; }
.acct { width: min(360px, calc(100vw - 24px)); }
.acct-rows { list-style: none; margin: 0 0 6px; padding: 0 8px; display: grid; gap: 6px; font-size: .88rem; }
.acct-rows li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: start; }
.acct-rows .k { color: var(--muted); }
.acct-rows .v { min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.acct-rows .v small { display: block; width: 100%; color: var(--muted); font-size: .8rem; }
.acct-rows .v em { display: block; width: 100%; font-style: normal; color: var(--danger); font-weight: 600; font-size: .8rem; }
.acct-rows .btn.link { font-size: .82rem; white-space: nowrap; }
.acct-dot { display: inline-flex; align-items: center; gap: 5px; }
.acct-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.acct-dot.ok::before { background: var(--brand-2); }
.acct-dot.bad::before { background: var(--danger); }
.acct-dot.wait::before { background: var(--line); }
.acct-dot.na { color: var(--muted); }
.acct-sec { border-top: 1px solid var(--line); }
.acct-sec summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 8px; cursor: pointer; font-weight: 600; font-size: .92rem; border-radius: var(--r-sm); }
.acct-sec summary::-webkit-details-marker { display: none; }
.acct-sec summary:hover { background: var(--surface-2); }
.acct-sec summary .sum { margin-left: auto; font-weight: 400; font-size: .82rem; color: var(--muted); text-align: right; }
.acct-sec summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.acct-sec[open] summary::after { transform: rotate(45deg); }
.acct-sec > .acct-list, .acct-sec > .acct-news, .acct-sec > .acct-diag { margin: 0 0 10px; }
.acct-locs { max-height: 180px; overflow: auto; }
.acct-news { display: grid; gap: 8px; padding: 0 8px; font-size: .88rem; }
.news-i { display: grid; grid-template-columns: 52px 1fr; gap: 8px; }
.news-i b { color: var(--muted); font-weight: 600; }
.acct-btns { display: flex; flex-wrap: wrap; gap: 6px; }
dialog.news form { gap: 14px; }
dialog.news h2 { margin: 0; font: 700 1.3rem var(--f-display); }
.news-act { display: flex; justify-content: flex-end; }
.acct-foot { border-top: 1px solid var(--line); padding: 8px 8px 2px; display: flex; justify-content: flex-end; }
@media (max-width: 720px) { .acct-btn > span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.btn.link { padding: 0; color: var(--brand-2); background: none; border: 0; cursor: pointer; }
.btn.danger { color: var(--danger); }
.ispin { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand-2); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* View as (testing) */
.acct-va { display: flex; gap: 8px; margin: 0 0 8px; }
.acct-va input { flex: 1; min-width: 0; }
.va-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 12px; background: var(--accent-soft); color: var(--text); font-size: .88rem; border-bottom: 1px solid var(--line); }
.va-banner .btn.link { font-size: .88rem; }
.acct-va input { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.acct-btn #whoName { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Customer Portal header is centered (max 1080px); line the panels up with it and drop them below the 64px header. */
.amenu { top: 60px; left: max(12px, calc((100vw - 1080px) / 2 + 8px)); }
.amenu.amenu-right, .acct { left: auto; right: max(12px, calc((100vw - 1080px) / 2 + 8px)); }
body:has(.va-banner) .amenu { top: 92px; }
.acct-sec summary .sum { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .hdr-in { gap: 8px; }
  .brand .wm { height: 18px; }
  .theme-btn, .amenu-btn { width: 30px; height: 30px; }
  .acct-btn #whoName { max-width: 64px; }
  .va-banner { flex-wrap: wrap; gap: 4px 10px; font-size: .8rem; padding: 4px 10px; }
  .va-banner b { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}