/* SourceHub - "Il mio profilo", page-local styling only (file ownership: this sheet is
   linked as the first element of the page content by BOTH GUI/STAFF/PROFILE/profile.jsp and
   GUI/SUPPLIER/PROFILE/profile.jsp - one shared page, one shared stylesheet, same convention
   as the shared GUI/APP/PROFILE/i18n/ dictionary. Nothing here touches app.css or any shared
   component's own class.

   #shProfileBody lays out GUI/APP/components/record.js#mountTabs' own markup (mounted with
   its shared `vertical: true` option) as a left-hand list of sections next to the chosen
   section's content - identical layout to GUI/STAFF/SETTINGS/settings.css' own
   #shSettingsBody, restated here under this page's own id because that file is SETTINGS'
   own, staff-only, and not something this shared page may import or edit. */

#shProfileBody
{
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}

#shProfileBody > .sh-tabs-v
{
    flex: 0 0 232px;
    border-right: 1px solid var(--sh-line);
    padding-right: .875rem;
    margin-bottom: 0;
}

#shProfileBody > .sh-tab-panel { flex: 1 1 auto; min-width: 0; }

@media (max-width: 720px)
{
    #shProfileBody { flex-direction: column; }
    #shProfileBody > .sh-tabs-v
    {
        flex-direction: row;
        flex: none;
        width: 100%;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--sh-line);
        padding-right: 0;
        padding-bottom: .5rem;
    }
    #shProfileBody > .sh-tabs-v button { width: auto; white-space: nowrap; }
}

/* -----------------------------------------------------------------------------------------
   "I miei dati" / "Sessioni aperte" fact grid and federated-sign-in row - same visual shape
   as GUI/STAFF/USERS/users.css' own .sh-facts/.sh-fl/.sh-fed-row/.sh-session-actions
   (a different module's local sheet, about somebody else's account), restated here rather
   than imported since a page-local stylesheet is exactly what the house rule asks for.
   ----------------------------------------------------------------------------------------- */

.sh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; padding: 1rem 1.125rem; }
.sh-facts .sh-fl { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-ink-4); margin-bottom: .3rem; }

.sh-fed-row { display: flex; align-items: flex-start; gap: .625rem; padding: .8rem 1.125rem; background: var(--sh-canvas); border-top: 1px solid var(--sh-line-2); color: var(--sh-ink-3); font-size: .8125rem; }
.sh-fed-row .fa-duotone { margin-top: .15rem; color: var(--sh-ink-4); }
.sh-fed-row b { color: var(--sh-ink-2); display: block; }

.sh-session-actions { text-align: right; white-space: nowrap; }

/* -----------------------------------------------------------------------------------------
   Password field (show/hide toggle, strength word) - same shape as GUI/AUTH/auth.css' own
   .sh-pw-group/.sh-pw-toggle/.sh-strength, restated here for the same reason as the block
   above: this page is not under GUI/AUTH and does not load that sheet.
   ----------------------------------------------------------------------------------------- */

.sh-pw-group { position: relative; }
.sh-pw-group .form-control { padding-right: 2.6rem; }
.sh-pw-toggle
{
    position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--sh-ink-3); cursor: pointer;
}
.sh-pw-toggle:hover { color: var(--sh-ink-2); }
.sh-pw-toggle:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -2px; border-radius: var(--sh-radius-sm); }

.sh-strength { font-size: .75rem; margin-top: .3rem; min-height: 1.1rem; font-weight: 600; }
.sh-strength[data-level="weak"]   { color: var(--sh-red); }
.sh-strength[data-level="medium"] { color: var(--sh-amber); }
.sh-strength[data-level="strong"] { color: var(--sh-teal); }

/* -----------------------------------------------------------------------------------------
   Secondo fattore: QR placeholder, secret box, recovery-codes grid, acknowledgement line -
   same shape as GUI/AUTH/auth.css' own .sh-qr/.sh-secret/.sh-recovery-codes/.sh-ack-line,
   restated here for the same reason. .sh-mfa-panel is this section's own wrapper, so the
   inline reveal (Rigenera / Genera nuovi codici) sits visually apart from the state card
   above it without a whole extra card.
   ----------------------------------------------------------------------------------------- */

.sh-mfa-panel { border-top: 1px solid var(--sh-line-2); padding: 1.125rem; }

.sh-qr { width: 176px; height: 176px; margin: 0 auto .875rem; border: 1px solid var(--sh-line); border-radius: 8px; padding: 8px; background: #fff; }
.sh-qr svg { display: block; width: 100%; height: 100%; }

.sh-secret { display: flex; align-items: center; gap: .625rem; background: var(--sh-canvas); border: 1px solid var(--sh-line); border-radius: 8px; padding: .55rem .75rem; margin-bottom: 1rem; }
.sh-secret .sh-mono { font-size: .95rem; letter-spacing: .12em; word-break: break-all; }
.sh-secret button { margin-left: auto; flex-shrink: 0; }

.sh-recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .875rem; background: var(--sh-canvas); border: 1px solid var(--sh-line); border-radius: 8px; padding: .875rem 1rem; margin: .875rem 0; }
.sh-recovery-codes div { font-size: .9rem; }

.sh-ack-line { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; font-size: .8125rem; color: var(--sh-ink-2); margin: .875rem 0; }
.sh-ack-line input { margin-top: .2rem; cursor: pointer; }