/* Drop-down navigation, shared by the public header ("Free tools", PublicLayout.razor) and the signed-in Portal bar and phone menu
   (NavGroup.razor). One pattern, one script (/js/pub-dd.js), one stylesheet: a disclosure link with role="button" and aria-expanded over a
   panel that the `hidden` attribute closes. The first block is the public header's rules, moved here unchanged from PublicLayout's inline
   <style>; the second is the Portal's adaptation of them. */

/* "Free tools" drop-down (desktop) and its phone-menu twin. Both are disclosure buttons that /js/pub-dd.js toggles; [hidden] is the closed state. */
.pub-dd { position: relative; }
.pub-dd-btn { cursor: pointer; display: inline-flex; align-items: center; }
.pub-dd-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pub-dd-btn[data-pub-current="true"] { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 -2px 0 rgba(255,255,255,.7); }
.pub-dd-chev { font-size: 10px; margin-left: 5px; opacity: .8; transition: transform .12s; }
[aria-expanded="true"] > .pub-dd-chev { transform: rotate(180deg); }
.pub-dd-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 230px; padding: 6px 0;
    background: var(--sidebar-bg, #1b3d2a); border: 1px solid rgba(255,255,255,.12); border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.pub-dd-menu[hidden], .pub-menu-sub[hidden] { display: none; }
.pub-dd-item {
    display: flex; align-items: center; min-height: 44px; padding: 0 1rem; font-size: 14px; white-space: nowrap;
    color: rgba(255,255,255,.85); text-decoration: none;
}
.pub-dd-item:hover, .pub-dd-item:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.pub-dd-item[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 rgba(255,255,255,.7); }
.pub-menu-group { cursor: pointer; }
.pub-menu-group .pub-dd-chev { margin-left: auto; }
.pub-menu-group[data-pub-current="true"] { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 rgba(255,255,255,.7); }
.pub-menu-sublink { padding-left: 2.5rem; }

/* ── Portal top bar (NavGroup, bar mode) ───────────────────────────────────────────────────────────────
   The wrapper is as tall as the 58px bar, so the panel hangs from the bar's bottom edge. The trigger keeps the bar's own item look
   (.cc-tn-item in NavMenu.razor.css, which also draws the amber underline when its group holds the current page); only what the public
   button had and the bar item lacks is added here: a visible focus ring and the pointer. */
.cc-topnav .cc-dd { align-self: stretch; display: flex; align-items: stretch; position: relative; }
.cc-topnav .cc-topnav-right .cc-dd { align-items: center; }
.cc-topnav .cc-dd > [data-pub-dd-toggle] { cursor: pointer; }
.cc-topnav .cc-dd > [data-pub-dd-toggle]:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cc-topnav .cc-dd-menu { top: 100%; min-width: 240px; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; }
.cc-topnav .cc-dd-start > .cc-dd-menu { left: 0; right: auto; }
.cc-topnav .cc-dd-end > .cc-dd-menu { right: 0; left: auto; }
.cc-dd-menu .pub-dd-item { gap: 12px; }
.cc-dd-menu .pub-dd-item > i { font-size: 15px; width: 16px; flex-shrink: 0; text-align: center; }
.cc-dd-menu .pub-dd-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cc-dd-head { padding: 10px 1rem 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cc-dd-sep { height: 1px; margin: 6px 0; background: rgba(255,255,255,.12); }
.cc-dd-note { margin-left: auto; padding-left: 1.25rem; font-size: 11.5px; color: rgba(255,255,255,.6); }
/* A row with a task subtitle (nav v2): the label on one line, the subtitle under it, the icon centred beside both. Bar and phone menu alike. */
.pub-dd-item.cc-dd-has-sub, .cc-mobile-drawer .cc-drawer-sublink.cc-dd-has-sub {
    display: grid; grid-template-columns: 16px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center; align-items: center;
    padding-top: 6px; padding-bottom: 6px; white-space: normal;
}
.cc-dd-has-sub > i { grid-row: 1 / span 2; }
.cc-dd-subtitle { grid-column: 2; font-size: 11.5px; line-height: 1.3; color: rgba(255,255,255,.6); }
/* Below 1024px the phone menu is the whole navigation and the gear is hidden with it (NavMenu.razor.css). */
@media (max-width: 1023px) { .cc-topnav .cc-topnav-right .cc-dd { display: none; } }
/* A global admin gets the phone menu below 1280 (NavMenu.razor.css, .cc-topnav-ga), so the gear and the avatar menu hide with it there. */
@media (max-width: 1279px) { .cc-topnav-ga .cc-topnav-right .cc-dd { display: none; } }

/* ── Portal phone menu (NavGroup, drawer mode): the public phone menu's twin ─────────────────────────────── */
.cc-mobile-drawer .cc-drawer-group { cursor: pointer; }
.cc-mobile-drawer .cc-drawer-group .pub-dd-chev { margin-left: auto; font-size: 11px; }
.cc-mobile-drawer .cc-drawer-group[data-pub-current="true"] { color: #fff; font-weight: 600; }
.cc-mobile-drawer .cc-drawer-sublink { padding: 11px 20px 11px 46px; font-size: 13.5px; }
.cc-mobile-drawer .cc-drawer-sublink[aria-current="page"] { color: #fff; font-weight: 600; border-left-color: var(--sidebar-active-bar); background: rgba(255,255,255,.1); }
.cc-ddm-head { padding: 8px 20px 2px 46px; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); }