/* ============================================================================
   MITR Shared Header Styles
   ----------------------------------------------------------------------------
   Extracted from public/legacy/IT_Act_Navigator/css/act-navigator.css
   (the Sections_Navigator header which works fine). Linked from every
   navigator's index.html (Act, Rules, Forms, Utilities) so all four pages
   render the header chrome (avatar button + popover + change-password
   overlay) identically from a single source.

   Local navigator CSS files (act-navigator.css, rules-navigator.css,
   forms-navigator.css, utilities.css) may still carry copies of these
   rules — that's intentional during the rollout. Once all four pages
   are confirmed working, the duplicates can be removed.
   ============================================================================ */

/* === CRITICAL: prevent .site-hdr from clipping the avatar popover ============
   Rules' and Forms' local CSS sets `overflow-x: hidden` on `.site-hdr`. Per
   CSS spec, when one overflow axis is non-visible, the OTHER axis's
   `visible` value gets computed to `auto` — turning the header into a
   scroll container with a fixed height (~136 px). The avatar popover is
   280 × ~252 px and positioned at top:calc(100% + 8px), so it extends
   ~120 px BELOW the header. Result: popover header (overlapping the page
   header) is visible, but popover body (rows + Change password / Sign out
   buttons) gets clipped. Act Navigator doesn't have this problem because
   its .site-hdr doesn't carry overflow-x: hidden.

   Override the local rules so the popover can overflow the header in BOTH
   directions. We use !important because the local Rules/Forms CSS has equal
   specificity but loads after our shared sheet — without !important the
   local value would win on specificity tie. */
.site-hdr { overflow: visible !important; }

/* === Avatar button + wrap =================================================
   The avatar button is a 34×34 circle with a navy gradient + gold border.
   When the user is anonymous it falls back to a wider gold pill with a
   Login label (handled by the .mitr-avatar-btn--anon modifier). */
.mitr-avatar-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0;margin-left:6px}
.mitr-avatar-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0B1D3A 0%,#1B3A6B 100%);color:#FDF8EF;font:700 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;border:1.5px solid #C8A44E;cursor:pointer;box-shadow:0 1px 3px rgba(11,29,58,.18);transition:transform .12s,box-shadow .12s;user-select:none;letter-spacing:.02em;text-transform:uppercase}
.mitr-avatar-btn:hover{transform:scale(1.06);box-shadow:0 2px 6px rgba(11,29,58,.28)}
.mitr-avatar-btn:focus-visible{outline:2px solid #C8A44E;outline-offset:2px}
.mitr-avatar-btn.mitr-avatar-btn--anon{background:linear-gradient(135deg,#C8A44E 0%,#E8C76E 100%);color:#0B1D3A;border-color:#0B1D3A;font-size:10px;letter-spacing:.06em;width:auto;padding:0 12px;border-radius:17px;gap:6px}
.mitr-avatar-btn.mitr-avatar-btn--anon i{font-size:14px}

/* Header avatar: ALWAYS rendered as a 34×34 dark-navy + gold-border
   circle, regardless of session state. The wrap-scoped selector has
   higher specificity (3 classes with descendant) than
   `.mitr-avatar-btn.mitr-avatar-btn--anon` (2 classes), so it overrides
   the gold Login pill even when the button carries `--anon` for click
   behavior (anon = post MITR_OPEN_LOGIN, authed = toggle popover). */
.mitr-avatar-wrap--header .mitr-avatar-btn,
.mitr-avatar-wrap--header .mitr-avatar-btn.mitr-avatar-btn--anon,
.mitr-avatar-wrap--header .mitr-avatar-btn.mitr-avatar-btn--icononly{background:linear-gradient(135deg,#0B1D3A 0%,#1B3A6B 100%);color:#FDF8EF;border:1.5px solid #C8A44E;width:34px;height:34px;border-radius:50%;padding:0;letter-spacing:0;gap:0;text-transform:none}
.mitr-avatar-wrap--header .mitr-avatar-btn i,
.mitr-avatar-wrap--header .mitr-avatar-btn.mitr-avatar-btn--anon i,
.mitr-avatar-wrap--header .mitr-avatar-btn.mitr-avatar-btn--icononly i{font-size:18px;color:#C8A44E;margin:0}
.mitr-avatar-wrap--header{margin-left:4px}

/* === Avatar popover ========================================================
   Slides down beneath the avatar button when the user clicks it (signed-in).
   Shows email, signed-in timestamp, "Session ends" line, and action buttons
   (Change password / Sign out). */
.mitr-avatar-popover{position:absolute;top:calc(100% + 8px);right:0;min-width:280px;max-width:340px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 12px 32px rgba(11,29,58,.18);padding:0;z-index:1030;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;display:none;animation:mitrAvatarPopIn .12s ease-out;overflow:hidden}
.mitr-avatar-popover.mitr-avatar-popover--open{display:block}
@keyframes mitrAvatarPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.mitr-avatar-popover-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#0B1D3A 0%,#1B3A6B 100%);color:#FDF8EF}
.mitr-avatar-popover-avatar{width:36px;height:36px;border-radius:50%;background:#C8A44E;color:#0B1D3A;display:flex;align-items:center;justify-content:center;font:700 14px/1 inherit;flex-shrink:0;border:1.5px solid #FDF8EF}
.mitr-avatar-popover-meta{min-width:0;flex:1 1 auto}
.mitr-avatar-popover-name{font:600 14px/1.3 inherit;color:#FDF8EF;word-break:break-word}
.mitr-avatar-popover-email{font:400 12px/1.3 inherit;color:rgba(253,248,239,.75);margin-top:2px;word-break:break-word}
.mitr-avatar-popover-rows{display:flex;flex-direction:column;gap:0;padding:8px 6px}
.mitr-avatar-popover-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;font:400 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#475569;border-radius:6px;background:transparent;min-width:0}
.mitr-avatar-popover-row+.mitr-avatar-popover-row{margin-top:2px}
.mitr-avatar-popover-row>span{font:400 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#64748B;white-space:nowrap;flex-shrink:0}.mitr-avatar-popover-row>b{font:600 12px/1.3 inherit;color:#0B1D3A;text-align:right;word-break:break-word;min-width:0;flex:1 1 auto}
.mitr-avatar-popover-actions{display:flex;flex-direction:column;gap:2px;padding:8px;border-top:1px solid #F1F5F9;background:#F8FAFC}
.mitr-avatar-popover-action{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:transparent;border:0;border-radius:6px;font:500 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1E293B;cursor:pointer;text-align:left;transition:background .12s}
.mitr-avatar-popover-action:hover{background:#F1F5F9}
.mitr-avatar-popover-action i{color:#475569;font-size:16px;width:20px;flex-shrink:0}
.mitr-avatar-popover-action--danger{color:#B91C1C}
.mitr-avatar-popover-action--danger:hover{background:#FEF2F2}
.mitr-avatar-popover-action--danger i{color:#B91C1C}
@media (max-width:560px){.mitr-avatar-popover{min-width:200px;max-width:240px}}

/* === CPW (Change Password) overlay ========================================
   Modal overlay opened from the avatar popover's "Change password" button.
   Centered card with old-password / new-password / confirm fields. */
.mitr-cpw-overlay{position:fixed;inset:0;background:rgba(11,29,58,.55);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;animation:mitrAvatarPopIn .15s ease-out}
.mitr-cpw-box{background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);max-width:420px;width:100%;padding:28px 24px 22px;position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;animation:mitrAvatarPopIn .18s ease-out}
.mitr-cpw-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;background:transparent;border-radius:50%;font-size:1.2rem;color:#64748B;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.mitr-cpw-close:hover{background:#F1F5F9;color:#0B1D3A}
.mitr-cpw-brand{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#C8A44E,#E8C76E);color:#0B1D3A;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.4rem}
.mitr-cpw-title{text-align:center;margin:0 0 4px;font:600 18px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#0B1D3A}
.mitr-cpw-sub{text-align:center;margin:0 0 16px;font:400 12px/1.4 inherit;color:#64748B}
.mitr-cpw-sub b{color:#0B1D3A}
.mitr-cpw-msg{padding:8px 10px;border-radius:6px;font:500 12px/1.4 inherit;margin-bottom:10px}
.mitr-cpw-msg.is-ok{background:#DCFCE7;color:#15803D;border:1px solid #86EFAC}
.mitr-cpw-msg.is-err{background:#FEE2E2;color:#B91C1C;border:1px solid #FCA5A5}
.mitr-cpw-lbl{display:block;font:600 11px/1 inherit;color:#0B1D3A;margin:8px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.mitr-cpw-input{position:relative;display:flex;align-items:center}
.mitr-cpw-input input{flex:1 1 auto;width:100%;padding:9px 36px 9px 12px;border:1px solid #CBD5E1;border-radius:8px;font:14px/1.2 inherit;color:#0B1D3A;background:#fff;outline:0;transition:border-color .12s,box-shadow .12s}
.mitr-cpw-input input:focus{border-color:#C8A44E;box-shadow:0 0 0 3px rgba(200,164,78,.18)}
.mitr-cpw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;border-radius:50%;color:#64748B;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .12s,background .12s}
.mitr-cpw-eye:hover{color:#0B1D3A;background:#F1F5F9}
.mitr-cpw-submit{width:100%;margin-top:14px;padding:10px 14px;border:0;border-radius:8px;background:linear-gradient(135deg,#0B1D3A,#1B3A6B);color:#FDF8EF;font:600 14px/1 inherit;cursor:pointer;transition:transform .08s,box-shadow .12s}
.mitr-cpw-submit:hover{box-shadow:0 6px 18px rgba(11,29,58,.25)}
.mitr-cpw-submit:active{transform:scale(.98)}
.mitr-cpw-submit:disabled{opacity:.6;cursor:not-allowed}
.mitr-cpw-cancel{display:block;margin:8px auto 0;padding:6px 12px;border:0;background:transparent;color:#64748B;font:500 12px/1 inherit;cursor:pointer;text-decoration:underline}
.mitr-cpw-cancel:hover{color:#0B1D3A}