/* ============================================================
   AREA RISERVATA — IL MIO PROFILO (+ finestre)
   Palette e superfici del resto dell'area: Porcelain + Signal
   Blue, neumorfismo morbido. Tutto scoped sotto .prof-page /
   .prof-modal.

   La Sicurezza non e' piu' una pagina a se': vive nella finestra
   #securityModal di questa pagina.

   MOBILE: due colonne diventano una, ogni riga informativa si
   impila con l'etichetta sopra, e le finestre sono fogli che
   salgono dal basso con testata e piede fissi e solo il corpo
   che scorre (con la tastiera aperta i bottoni restano
   raggiungibili, cosa che il full-screen non garantiva).
   ============================================================ */

.prof-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.prof-page * { box-sizing: border-box; }

/* ============================================================
   1. INTESTAZIONE
   ============================================================ */
.prof-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--hg-porcelain);
    box-shadow: var(--ars-up);
}

.prof-avatar {
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 87, 255, .10);
    color: var(--hg-blue);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
    /* Rete di sicurezza: qualunque cosa finisca qui dentro resta nel
       cerchio. Un valore inatteso non deve poter sfondare la pagina. */
    overflow: hidden;
    white-space: nowrap;
}

.prof-hero-b { min-width: 0; flex: 1; }

.prof-hero-b h1 {
    margin: 0;
    font-size: clamp(1.3rem, 3.2vw, 1.7rem);
    font-weight: 640;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--hg-ink);
    overflow-wrap: anywhere;
}

.prof-cf {
    margin: 3px 0 0;
    font-family: var(--ars-mono);
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--hg-mute);
}

.prof-role {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--ars-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--hg-mist);
    color: var(--hg-slate);
}

.prof-role.is-admin { background: rgba(0, 87, 255, .12); color: var(--hg-blue); }

/* ============================================================
   2. GRIGLIA E CARD
   ============================================================ */
.prof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.prof-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.prof-card {
    border-radius: 16px;
    background: var(--hg-porcelain);
    box-shadow: var(--ars-up);
    overflow: hidden;
}

.prof-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 15px 18px;
    border-bottom: 1px solid var(--hg-rule);
}

.prof-card-head h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: .98rem;
    font-weight: 640;
    letter-spacing: -.01em;
    color: var(--hg-ink);
    display: flex;
    align-items: center;
    gap: 9px;
}

.prof-card-head h2 i { color: var(--hg-blue); font-size: 15px; }
.prof-card-body { padding: 6px 18px 16px; }

/* ============================================================
   3. RIGHE INFORMATIVE
   ============================================================ */
.prof-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--hg-mist);
}

.prof-row:last-child { border-bottom: 0; }

.prof-row .prof-k {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--hg-mute);
}

.prof-row .prof-k i { color: var(--hg-rule); font-size: 13px; }

.prof-row .prof-v {
    min-width: 0;
    text-align: right;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--hg-ink);
    overflow-wrap: anywhere;
}

.prof-row .prof-v.is-empty { color: var(--hg-mute); font-weight: 400; font-style: italic; }

/* riga con azione a destra (Password, 2FA, Ticket, Abbonamento) */
.prof-act {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--hg-mist);
}

.prof-act:last-child { border-bottom: 0; }

.prof-act-ico {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hg-mist);
    color: var(--hg-slate);
    font-size: 15px;
}

.prof-act-b { flex: 1; min-width: 0; }
.prof-act-b strong { display: block; font-size: 14px; font-weight: 640; color: var(--hg-ink); line-height: 1.3; }
.prof-act-b small { display: block; font-size: 12.5px; color: var(--hg-mute); line-height: 1.4; margin-top: 1px; }

/* ============================================================
   4. BOTTONI
   ============================================================ */
.prof-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--hg-rule);
    border-radius: 10px;
    background: var(--hg-paper);
    color: var(--hg-slate);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 640;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.prof-btn:hover { border-color: var(--hg-blue); color: var(--hg-blue); }
.prof-btn--primary { background: var(--hg-blue); border-color: var(--hg-blue); color: #fff; }
.prof-btn--primary:hover { background: var(--hg-blue-d); border-color: var(--hg-blue-d); color: #fff; }
.prof-btn--danger { color: var(--danger); }
.prof-btn--danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(192,40,28,.06); }
.prof-btn--block { width: 100%; }
.prof-btn:focus-visible { outline: 2px solid var(--hg-blue); outline-offset: 2px; }

/* ============================================================
   5. STATO VUOTO
   ============================================================ */
.prof-empty { padding: 20px 4px; text-align: center; color: var(--hg-mute); }
.prof-empty i { font-size: 26px; color: var(--hg-rule); display: block; margin-bottom: 8px; }
.prof-empty p { margin: 0 0 12px; font-size: 13.5px; }

/* ============================================================
   6. NOTE
   ============================================================ */
.prof-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--hg-rule);
    border-left: 3px solid var(--c, var(--hg-blue));
    background: var(--hg-mist);
    color: var(--hg-slate);
    font-size: 13px;
    line-height: 1.5;
}

.prof-note--warn { --c: #B07400; }
.prof-note--danger { --c: var(--danger); }
.prof-note--ok { --c: var(--success); }
.prof-note i { flex: none; color: var(--c, var(--hg-blue)); margin-top: 2px; }
.prof-note strong { color: var(--hg-ink); }

/* ============================================================
   7. PANNELLO SICUREZZA (dentro la finestra)
   ============================================================ */
.sec-panel { display: flex; flex-direction: column; gap: 14px; }

.sec-state {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 12px;
    border: 1px solid var(--hg-rule);
    background: var(--hg-paper);
}

.sec-state.is-on { border-left: 3px solid var(--success); }
.sec-state.is-off { border-left: 3px solid var(--hg-rule); }

.sec-state-ico {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hg-mist);
    color: var(--hg-mute);
    font-size: 19px;
}

.sec-state.is-on .sec-state-ico { background: rgba(26,127,85,.14); color: var(--success); }
.sec-state-b { flex: 1; min-width: 0; }

.sec-state-b .sec-t {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 14.5px;
    font-weight: 640;
    color: var(--hg-ink);
}

.sec-state-b small { display: block; font-size: 12.5px; color: var(--hg-mute); line-height: 1.45; margin-top: 2px; }

.sec-pill {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--hg-mist);
    color: var(--hg-mute);
    font-family: var(--ars-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.5;
}

.sec-pill.is-on { background: rgba(26,127,85,.14); color: var(--success); }
.sec-pill.is-low { background: rgba(192,40,28,.12); color: var(--danger); }

.sec-block { padding: 15px 16px; border-radius: 12px; border: 1px solid var(--hg-rule); background: var(--hg-paper); }

.sec-block h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 640;
    color: var(--hg-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sec-block h3 i { color: var(--hg-blue); font-size: 14px; }
.sec-block p { margin: 0 0 12px; font-size: 12.5px; color: var(--hg-mute); line-height: 1.5; }
.sec-block form { margin: 0; }

.sec-tips { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--hg-slate); line-height: 1.6; }
.sec-tips li { margin-bottom: 2px; }

/* ============================================================
   7b. ABBONAMENTO
   Stessa pagina-famiglia del profilo (ci si arriva da li'),
   quindi riusa .prof-card / .prof-row / .prof-note e aggiunge
   solo cio' che serve al piano: prezzo, avanzamento, stato.
   ============================================================ */
.prof-hero .prof-hero-ico {
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 87, 255, .10);
    color: var(--hg-blue);
    font-size: 25px;
}

.sub-state {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--ars-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--hg-mist);
    color: var(--hg-slate);
}

.sub-state.is-success { background: rgba(26,127,85,.14); color: var(--success); }
.sub-state.is-warning { background: rgba(176,116,0,.14); color: #8F5E00; }
.sub-state.is-danger { background: rgba(192,40,28,.12); color: var(--danger); }

/* --- piano e prezzo --- */
.sub-plan {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--hg-mist);
    margin-bottom: 13px;
}

.sub-plan-n { min-width: 0; }

.sub-plan-n strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 640;
    letter-spacing: -.02em;
    color: var(--hg-ink);
    line-height: 1.15;
}

.sub-plan-n small { display: block; font-size: 13px; color: var(--hg-mute); margin-top: 2px; }
.sub-price { text-align: right; }

.sub-price b {
    display: block;
    font-size: 1.6rem;
    font-weight: 680;
    letter-spacing: -.025em;
    color: var(--hg-blue);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sub-price span {
    display: block;
    margin-top: 3px;
    font-family: var(--ars-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hg-mute);
}

/* --- riga rinnovo --- */
.sub-renew {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--hg-slate);
}

.sub-renew i { font-size: 15px; }
.sub-renew.is-on { color: var(--success); }
.sub-renew.is-off { color: #8F5E00; }

/* --- avanzamento del periodo --- */
.sub-progress { margin-top: 15px; }

.sub-progress-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 12.5px;
    color: var(--hg-mute);
}

.sub-progress-h b { font-family: var(--ars-mono); font-size: 12px; color: var(--hg-slate); }

.sub-bar {
    height: 8px;
    border-radius: 5px;
    background: var(--hg-mist);
    box-shadow: var(--ars-in-sm);
    overflow: hidden;
}

.sub-bar > span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--hg-blue);
    transition: width .4s var(--ars-ease);
}

.sub-bar.is-warning > span { background: #B07400; }
.sub-bar.is-danger > span { background: var(--danger); }

/* --- valore in evidenza dentro una riga --- */
.prof-v.is-ok { color: var(--success); font-weight: 640; }
.prof-v.is-warn { color: #8F5E00; font-weight: 640; }
.prof-v.is-danger { color: var(--danger); font-weight: 640; }

@media (max-width: 575.98px) {
    .sub-plan { align-items: flex-start; gap: 10px; }
    .sub-price { text-align: left; }
    .sub-price b { font-size: 1.45rem; }
    .prof-hero .prof-hero-ico { width: 52px; height: 52px; font-size: 21px; border-radius: 14px; }
}

/* ============================================================
   8. FINESTRE
   ============================================================ */
.prof-modal .modal-content {
    border: 1px solid var(--hg-rule);
    border-radius: 16px;
    background: var(--hg-porcelain);
    overflow: hidden;
}

.prof-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--hg-rule);
    background: var(--hg-porcelain);
}

.prof-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 640;
    letter-spacing: -.01em;
    color: var(--hg-ink);
}

.prof-modal .modal-title i { color: var(--hg-blue); }
.prof-modal .btn-close { opacity: .5; }
.prof-modal .btn-close:hover { opacity: 1; }
.prof-modal .modal-body { padding: 20px; background: var(--hg-porcelain); }

.prof-modal .modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--hg-rule);
    background: var(--hg-porcelain);
    gap: 9px;
}

.prof-modal label,
.prof-modal .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 640;
    color: var(--hg-ink);
}

/* campo di testo: unico stile, mai sotto i 16px */
.prof-modal .soft-input,
.prof-modal input[type="text"],
.prof-modal input[type="email"],
.prof-modal input[type="password"],
.prof-modal input[type="number"],
.prof-modal select,
.prof-modal textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--hg-rule);
    border-radius: 10px;
    background: var(--hg-paper);
    color: var(--hg-ink);
    font-family: inherit;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

.prof-modal .soft-input:focus,
.prof-modal input:focus,
.prof-modal select:focus,
.prof-modal textarea:focus {
    outline: none;
    border-color: var(--hg-blue);
    box-shadow: 0 0 0 3px rgba(0,87,255,.14);
}

.prof-modal .soft-input:disabled,
.prof-modal input:disabled { background: var(--hg-mist); color: var(--hg-mute); }
.prof-modal .soft-input::placeholder { color: #98A1AC; }

/* Campo password con l'occhio.
   ATTENZIONE: mirato SOLO ai gruppi che contengono il bottone occhio.
   Questo foglio e' caricato dal layout su tutta l'area, e un
   `display:block` su .input-group in generale spezzava i normali
   input-group di Bootstrap dentro le altre finestre (es. il campo
   Lotto con il bottone fotocamera in Modifica prodotto). */
.prof-modal .input-group:has(> .btn-toggle-password) { position: relative; display: block; }
.prof-modal .input-group > .btn-toggle-password ~ .soft-input,
.prof-modal .input-group:has(> .btn-toggle-password) .soft-input { padding-right: 52px; }

.prof-modal .btn-toggle-password {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--hg-mute);
    cursor: pointer;
    touch-action: manipulation;
}

.prof-modal .btn-toggle-password:hover { color: var(--hg-ink); }

/* codice OTP: cifre grandi e distanziate */
.prof-modal .otp-input {
    text-align: center;
    font-family: var(--ars-mono);
    font-size: 24px !important;
    letter-spacing: .35em;
    text-indent: .35em;
    min-height: 58px;
}

.prof-modal .modal-body hr { margin: 18px 0; border: 0; border-top: 1px solid var(--hg-rule); opacity: 1; }

/* bottoni delle finestre */
.prof-modal .btn,
.prof-modal .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 640;
    cursor: pointer;
    touch-action: manipulation;
}

.prof-modal .btn-secondary { background: var(--hg-paper); border-color: var(--hg-rule); color: var(--hg-slate); }
.prof-modal .btn-secondary:hover { border-color: var(--hg-ink); color: var(--hg-ink); }
.prof-modal .action-btn-primary,
.prof-modal .btn-primary { background: var(--hg-blue); border-color: var(--hg-blue); color: #fff; }
.prof-modal .action-btn-primary:hover,
.prof-modal .btn-primary:hover { background: var(--hg-blue-d); color: #fff; }
.prof-modal .btn-outline-danger { background: transparent; border-color: var(--hg-rule); color: var(--danger); }
.prof-modal .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.prof-modal .btn-outline-primary { background: transparent; border-color: var(--hg-rule); color: var(--hg-blue); }
.prof-modal .btn-outline-primary:hover { background: var(--hg-blue); border-color: var(--hg-blue); color: #fff; }
.prof-modal .btn-sm { min-height: 40px; padding: 8px 13px; font-size: 13px; }

/* cerchio illustrativo (passo OTP) */
.prof-otp-mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,87,255,.10);
    color: var(--hg-blue);
    font-size: 26px;
}

/* ============================================================
   9. MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .prof-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .prof-hero { padding: 16px; gap: 13px; border-radius: 14px; }
    .prof-avatar { width: 52px; height: 52px; font-size: 19px; }
    .prof-card { border-radius: 14px; }
    .prof-card-head { padding: 14px 15px; }
    .prof-card-body { padding: 4px 15px 14px; }

    /* Etichetta sopra e valore sotto: affiancati, su 360px, il valore
       finiva schiacciato in una colonna da 120px e andava a capo a meta'
       parola (indirizzi ed email erano illeggibili). */
    .prof-row {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        padding: 10px 0;
    }

    .prof-row .prof-v { text-align: left; font-size: 14px; }

    /* riga con azione: il bottone va sotto, a tutta larghezza */
    .prof-act { flex-wrap: wrap; }
    .prof-act .prof-btn { width: 100%; flex: 1 0 100%; margin-top: 4px; }

    /* --- FINESTRE: foglio dal basso con testata e piede fissi --- */
    .prof-modal .modal-dialog.prof-dialog {
        margin: 0;
        max-width: none;
        min-height: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
    }

    .prof-modal .modal-dialog.prof-dialog .modal-content {
        min-height: 0;
        max-height: 92dvh;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        display: flex;
        flex-direction: column;
        padding-bottom: var(--ars-safe-bottom);
    }

    .prof-modal .modal-header { position: relative; padding: 20px 16px 14px; flex: none; }

    /* maniglia del foglio */
    .prof-modal .modal-header::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 4px;
        background: var(--hg-rule);
    }

    /* solo il corpo scorre: i bottoni restano raggiungibili anche con
       la tastiera aperta */
    .prof-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
    .prof-modal .modal-footer { flex: none; flex-direction: column-reverse; align-items: stretch; padding: 12px 16px; }
    .prof-modal .modal-footer .btn,
    .prof-modal .modal-footer .action-btn { width: 100%; margin: 0; }

    .sec-state { padding: 13px 14px; gap: 12px; }
    .sec-block { padding: 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .prof-btn, .prof-card { transition: none !important; }
}