/* ============================================================================
   profile-refresh.css
   On-brand cleanup for the account dropdown + the profile page (/profile).
   Loaded site-wide via DefaultStyle.ascx, so everything here is namespaced to
   avoid bleeding onto other pages:
     - Account dropdown  -> #Ni_UserInfo (the header flyout, present everywhere)
     - Profile card      -> the .pfCard class (only exists on the redesigned
                            #Act_User markup in PrimaryInfo.ascx)
     - Profile edit form -> the .viewProfile body class (only on Profile.aspx)
   No rule uses a bare generic class (.account/.command/.step/.module/etc.).

   Palette (from default.css):
     primary  #2263BD   primary-dark #1b4f9c   primary-darker #285D8F
     fill     #e8f0f6   ink #3b3434   muted #6f6b6b   line #e3e6ed
     line-strong #d3dadf   surface #ffffff   focus #4a81c8
   ============================================================================ */

/* ========================================================================== */
/* 1. ACCOUNT DROPDOWN  (controls/ui/ContactNavigation.ascx) — site-wide       */
/*    Contained to the #Ni_UserInfo flyout, which is absolutely positioned and  */
/*    hidden until hover, so it never affects page layout elsewhere.            */
/* ========================================================================== */
#Ni_UserInfo ul.container a:focus-visible {
    outline: 2px solid #4a81c8;
    outline-offset: 2px;
    border-radius: 4px;
}
#Ni_UserInfo ul.container {
    padding: 8px;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #e3e6ed;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(20, 28, 40, 0.16);
}
#Ni_UserInfo ul.container > li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#Ni_UserInfo ul.container .userName {
    font-weight: 700;
    font-size: 15px;
    color: #3b3434;
    padding: 6px 10px 0;
}
#Ni_UserInfo ul.container .userEmail {
    color: #6f6b6b;
    font-size: 12px;
    padding: 0 10px 8px;
    border-bottom: 1px solid #e3e6ed;
    margin-bottom: 6px;
}
#Ni_UserInfo ul.container .userStation {
    padding: 8px 10px;
}
#Ni_UserInfo ul.container .userStation select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d3dadf;
    border-radius: 6px;
    background: #fff;
    color: #3b3434;
    font-size: 13px;
    cursor: pointer;
}
#Ni_UserInfo ul.container > li > a {
    display: block;
    padding: 9px 10px;
    color: #2263bd;
    font-size: 13px;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#Ni_UserInfo ul.container > li > a:hover {
    background: #e8f0f6;
    color: #1b4f9c;
    text-decoration: none;
}
#Ni_UserInfo ul.container #Lnk_SignOut {
    margin-top: 6px;
    border-top: 1px solid #e3e6ed;
    color: #595656;
}

/* ========================================================================== */
/* 2. PROFILE ACCOUNT CARD  (redesigned #Act_User in PrimaryInfo.ascx)          */
/*    Every selector requires the .pfCard class, which ONLY exists on the       */
/*    redesigned card markup — so these rules cannot match anything else.       */
/* ========================================================================== */
/* Redundant section title above the single card (profile page only). */
.viewProfile #Mpv_AccountInfo > .subtitle { display: none; }

#Mpv_AccountInfo #Act_User.pfCard {
    max-width: 720px;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e6ed;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 28, 40, 0.06);
}
/* Editing state: default.css sets .selected { height:178px } which would clip
   the card. Match its specificity (2 IDs + 2 classes) and win by source order,
   but only for the redesigned card (.pfCard). */
#Mpv_AccountInfo #Act_User.pfCard.selected {
    height: auto;
    min-height: 0;
    background: #ffffff;
}
#Act_User.pfCard .pfCard-top {
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #2263bd, #4a86c5);
}
#Act_User.pfCard .pfCard-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
}
#Act_User.pfCard .pfCard-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2263bd, #285d8f);
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#Act_User.pfCard .pfCard-identity { flex: 1; min-width: 0; }
#Act_User.pfCard .pfCard-name { font-size: 19px; font-weight: 700; color: #2b2b2b; line-height: 1.2; padding: 0; }
#Act_User.pfCard .pfCard-role { font-size: 12.5px; color: #7a7f88; margin-top: 3px; }

/* primary action moved into the header (reset legacy sprite/absolute command) */
#Mpv_AccountInfo #Act_User.pfCard .pfCard-primary {
    position: static;
    float: none;
    flex: 0 0 auto;
    margin: 0;
    width: auto;
    height: auto;
    background: none;
    text-indent: 0;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-primary a {
    display: inline-block;
    text-indent: 0;
    padding: 11px 20px;
    background: #2263bd;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-primary a:hover { background: #1b4f9c; }

#Act_User.pfCard .pfCard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #eef1f5;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-field {
    position: static;
    float: none;
    width: auto;
    height: auto;
    background: #ffffff;
    padding: 16px 24px;
}
#Act_User.pfCard .pfCard-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #9aa0a8;
    margin-bottom: 5px;
}
#Act_User.pfCard .pfCard-value { display: block; font-size: 14px; color: #33383e; word-break: break-word; }

#Act_User.pfCard .pfCard-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 24px 0;
    padding: 11px 14px;
    background: #fff8ec;
    border: 1px solid #f4dfb5;
    border-radius: 8px;
    font-size: 12.5px;
    color: #8a6417;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-notice .command {
    position: static;
    float: none;
    display: inline;
    margin: 0;
    width: auto;
    height: auto;
    background: none;
    text-indent: 0;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-notice a {
    color: #2263bd;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
#Act_User.pfCard .pfCard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 22px;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-foot .command {
    position: static;
    float: none;
    margin: 0;
    width: auto;
    height: auto;
    background: none;
    text-indent: 0;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-foot .command a {
    color: #2263bd;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
#Mpv_AccountInfo #Act_User.pfCard .pfCard-foot .command a:hover { text-decoration: underline; }
#Act_User.pfCard .pfCard-foot .status { color: #c8303d; font-size: 12px; }
#Act_User.pfCard .pfCard-hidden { display: none; }

@media (max-width: 640px) {
    #Mpv_AccountInfo #Act_User.pfCard { max-width: none; }
    #Act_User.pfCard .pfCard-grid { grid-template-columns: 1fr; }
    #Act_User.pfCard .pfCard-head { flex-wrap: wrap; }
}

/* ========================================================================== */
/* 3. PROFILE EDIT FORM (INLINE)  (account/Account.ascx)                        */
/*    Every selector is prefixed with .viewProfile (only on Profile.aspx) so it */
/*    never touches the same control on /my-pratt or checkout.                  */
/* ========================================================================== */
.viewProfile #Mod_AccountOptions #Dv_ContactInfo input:focus-visible,
.viewProfile #Mod_AccountOptions #Dv_ContactInfo select:focus-visible,
.viewProfile #Mod_AccountOptions #Dv_ContactInfo a:focus-visible {
    outline: 2px solid #4a81c8;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Container is display:none until #Mod_Manage gets .active (client state).
   Neutralize its legacy 930px width / -4px offset / background so the form flows
   as a normal card in the stack. */
.viewProfile #Mod_Manage #Mod_AccountOptions,
.viewProfile #Mod_Manage.active #Mod_AccountOptions {
    position: static;
    top: auto;
    width: auto;
    background: none;
    clear: both;
}
.viewProfile #Mod_AccountOptions .module { background: none; }

.viewProfile #Mod_AccountOptions #Dv_ContactInfo.module {
    position: relative;
    float: none;
    box-sizing: border-box;
    width: auto;
    max-width: 560px;
    margin: 0 0 16px;
    background: #ffffff;
    border: 1px solid #e3e6ed;
    border-radius: 10px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 2px rgba(20, 28, 40, 0.05);
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .subcaption {
    position: static;
    float: none;
    left: auto;
    width: auto;
    text-indent: 0;
    background: none;
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #3b3434;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .requiredTip {
    display: block;
    color: #6f6b6b;
    font-size: 12px;
    margin: 0 0 16px;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .required { color: #c8303d; }

/* close (x) link in the corner */
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_CloseAccountInfo {
    position: absolute;
    top: 18px;
    right: 20px;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_CloseAccountInfo a {
    color: #6f6b6b;
    font-size: 13px;
    text-decoration: none;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_CloseAccountInfo a:hover { color: #3b3434; }

/* field rows: stacked label + control */
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group {
    display: block;
    margin: 0 0 14px;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .caption {
    display: block;
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 600;
    color: #3b3434;
    text-align: left;
    width: auto;
    float: none;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data {
    display: block;
    width: 100%;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data input[type="text"],
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data input[type="password"],
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data input:not([type]),
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data select {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    color: #3b3434;
    background: #ffffff;
    border: 1px solid #d3dadf;
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data input:focus,
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data select:focus {
    border-color: #4a81c8;
    box-shadow: 0 0 0 3px rgba(74, 129, 200, 0.2);
    outline: none;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data.checkbox input { min-height: 0; width: auto; }

/* actions row */
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .commands {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e3e6ed;
    flex-wrap: wrap;
}
/* Save button — neutralize the legacy sprite (which hides the real input) and
   show the input styled as a flat button. Clicking it still bubbles to
   #Cmd_SaveAccountInfo, whose behavior handler fires the AJAX save. */
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_SaveAccountInfo {
    position: static;
    width: auto;
    height: auto;
    background: none;
    text-indent: 0;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_SaveAccountInfo input {
    display: inline-block;
    padding: 11px 22px;
    min-height: 44px;
    background: #2263bd;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_SaveAccountInfo input:hover { background: #1b4f9c; }
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_CancelAccountInfo a {
    color: #6f6b6b;
    font-size: 14px;
    text-decoration: none;
}
.viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_CancelAccountInfo a:hover { color: #3b3434; text-decoration: underline; }
.viewProfile #Mod_AccountOptions #Dv_ContactInfo .hud.status {
    flex-basis: 100%;
    color: #c8303d;
    font-size: 13px;
}

@media (max-width: 640px) {
    .viewProfile #Mod_AccountOptions #Dv_ContactInfo.module { padding: 18px 16px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #Ni_UserInfo ul.container > li > a,
    #Mpv_AccountInfo #Act_User.pfCard .pfCard-primary a,
    .viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data input,
    .viewProfile #Mod_AccountOptions #Dv_ContactInfo .group .data select,
    .viewProfile #Mod_AccountOptions #Dv_ContactInfo #Cmd_SaveAccountInfo input { transition: none; }
}