/* Client account dropdown. Colours fall back to the Laxity navy/gold used on the login page. */
.acct-menu{ position:relative; display:inline-block; }
.acct-toggle,
.acct-sub-toggle{
    font:inherit; color:inherit; background:none; border:0; cursor:pointer;
    display:flex; align-items:center; gap:6px; padding:8px 4px;
}
.acct-toggle:hover, .acct-sub-toggle:hover{ color:var(--pn-gold,#c9a24b); }
.acct-toggle:focus-visible, .acct-sub-toggle:focus-visible, .acct-panel a:focus-visible{
    outline:2px solid var(--pn-gold,#c9a24b); outline-offset:2px;
}
.acct-caret{ font-size:.8em; }

.acct-panel{
    position:absolute; right:0; top:calc(100% + 8px); z-index:100;
    min-width:220px; padding:8px;
    background:#fff; color:var(--pn-text,#1f2430);
    border:1px solid var(--pn-border,#e3e6ec); border-radius:12px;
    box-shadow:0 20px 40px -16px rgba(16,26,43,.35);
}
.acct-panel[hidden], .acct-sub-panel[hidden]{ display:none; }

.acct-panel a, .acct-sub-toggle{
    width:100%; box-sizing:border-box; text-align:left; justify-content:space-between;
    padding:10px 12px; border-radius:8px; text-decoration:none; color:inherit; font-size:14.5px;
}
.acct-panel a{ display:block; }
.acct-panel a:hover, .acct-sub-toggle:hover{ background:#f4f5f8; color:var(--pn-navy,#101a2b); }

/* Reports list opens inline under its parent, indented, so it works the same on touch and desktop */
.acct-sub-panel{ margin:2px 0 4px 12px; padding-left:8px; border-left:2px solid var(--pn-gold,#c9a24b); }
.acct-sub-toggle[aria-expanded="true"] .acct-caret{ transform:rotate(90deg); }

.acct-logout{ margin-top:6px; border-top:1px solid var(--pn-border,#e3e6ec); border-radius:0 0 8px 8px !important; }

/* Inside the mobile menu, show the panel in flow rather than floating */
@media (max-width: 820px){
    .acct-menu{ display:block; width:100%; }
    .acct-panel{ position:static; box-shadow:none; margin-top:6px; }
}