/* ═══════════════════════════════════════════════════════════════════
   user-pages.css — design system condiviso delle pagine utente finale
   ═══════════════════════════════════════════════════════════════════

   Riferimento visivo: il profilo issuer (Views/Companies/Profile.cshtml +
   pages/issuer-profile.css). Stesse card bianche con bordo sottile, stessi
   raggi, stesse chip pill, stessa scala tipografica.

   Differenza voluta rispetto a issuer-profile.css: qui l'accento NON e'
   hardcoded. Arriva da --iqcblue, che ogni tenant ridefinisce in
   assets/tenants/<Tenant>/css/theme.css, cosi' queste pagine seguono il
   white-label. Il fallback serve solo se il foglio viene caricato senza
   theme.css.

   Usato da: Views/Badge/BadgeImport.cshtml, Views/Users/Profile.cshtml,
   Views/ShowCase/ManageShowcase.cshtml, Areas/Identity/.../Manage/_Layout.cshtml.
   Va incluso PRIMA del CSS di pagina.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* accento del tenant */
    --up-accent: var(--iqcblue, #354F9A);

    /* superfici e bordi */
    --up-surface: #ffffff;
    --up-surface-muted: #fafaf9;
    --up-surface-chip: #f4f4f2;
    --up-border: #e8e8e6;
    --up-border-strong: #e0e0de;
    --up-divider: #f0f0ee;

    /* testo */
    --up-text: #1a1a18;
    --up-text-mid: #3a3a38;
    --up-text-soft: #6b6b68;
    --up-text-faint: #a8a8a4;
    --up-placeholder: #c0c0bc;

    /* semantici */
    --up-success: #16a34a;
    --up-success-bg: #f0fdf4;
    --up-success-text: #166534;
    --up-danger: #dc2626;
    --up-danger-bg: #fef2f2;
    --up-danger-text: #991b1b;

    /* raggi */
    --up-radius-lg: 20px;
    --up-radius-md: 14px;
    --up-radius-sm: 12px;
    --up-radius-xs: 10px;

    /* spaziature */
    --up-pad-card: 28px;
}

/* ═══════════════════════════════════════════════
   LAYOUT DI PAGINA
   ═══════════════════════════════════════════════ */

.up-page {
    max-width: 960px;
    margin: 56px auto 120px;
    padding: 0 16px;
    color: var(--up-text);
}

.up-page--narrow {
    max-width: 860px;
}

.up-page--wide {
    max-width: 1140px;
}

.up-page-head {
    margin-bottom: 28px;
}

.up-page-head--center {
    text-align: center;
}

.up-page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--up-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.up-page-subtitle {
    font-size: 14px;
    color: var(--up-text-soft);
    line-height: 1.7;
    margin: 8px 0 0;
    max-width: 640px;
}

.up-page-head--center .up-page-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.up-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--up-text-faint);
    margin-bottom: 16px;
}

.up-divider {
    border: none;
    border-top: 1px solid var(--up-divider);
    margin: 0 0 20px;
    opacity: 1;
}

/* ═══════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════ */

.up-card {
    background: var(--up-surface);
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
}

.up-card--flush {
    margin-bottom: 0;
}

.up-card-head {
    padding: 20px var(--up-pad-card);
    border-bottom: 1px solid var(--up-divider);
}

.up-card-head--center {
    text-align: center;
}

.up-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--up-text);
    margin: 0;
}

.up-card-subtitle {
    font-size: 13px;
    color: var(--up-text-soft);
    margin: 6px 0 0;
}

.up-card-body {
    padding: var(--up-pad-card);
}

/* riquadro secondario, dentro una card o a se stante */
.up-panel {
    background: var(--up-surface-muted);
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius-md);
    padding: 20px 24px;
}

.up-panel--accent {
    border-left: 3px solid var(--up-accent);
}

/* ═══════════════════════════════════════════════
   CHIP
   ═══════════════════════════════════════════════ */

.up-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.up-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--up-surface-chip);
    border: 1px solid var(--up-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--up-text-mid);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

    .up-chip:hover {
        background: #eaeae8;
        border-color: #d0d0ce;
        color: var(--up-text);
    }

    .up-chip i {
        font-size: 13px;
        color: var(--up-text-faint);
        flex-shrink: 0;
    }

/* ═══════════════════════════════════════════════
   BOTTONI

   Non riusano .btn di site.css di proposito: .btn e' inline-flex con
   white-space che preserva gli spazi, quindi il markup Razor indentato
   genera flex-item fatti di soli spazi che spingono il testo fuori centro.
   Qui white-space: normal chiude il problema.
   ═══════════════════════════════════════════════ */

.up-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--up-radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

    .up-btn:focus-visible {
        outline: 2px solid var(--up-accent);
        outline-offset: 2px;
    }

    .up-btn:disabled,
    .up-btn.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

.up-btn--primary {
    background: var(--up-accent);
    border-color: var(--up-accent);
    color: #fff;
}

    .up-btn--primary:hover {
        color: #fff;
        box-shadow: inset 0 0 0 999px rgba(0,0,0,0.10);
    }

.up-btn--outline {
    background: var(--up-surface);
    border-color: var(--up-accent);
    color: var(--up-accent);
}

    .up-btn--outline:hover {
        background: var(--up-accent);
        border-color: var(--up-accent);
        color: #fff;
    }

.up-btn--ghost {
    background: var(--up-surface-muted);
    border-color: var(--up-border);
    color: var(--up-text-mid);
}

    .up-btn--ghost:hover {
        background: #eaeae8;
        border-color: #d0d0ce;
        color: var(--up-text);
    }

.up-btn--danger {
    background: var(--up-surface);
    border-color: var(--up-danger);
    color: var(--up-danger);
}

    .up-btn--danger:hover {
        background: var(--up-danger);
        color: #fff;
    }

.up-btn--sm {
    padding: 8px 14px;
    font-size: 13px;
}

.up-btn--lg {
    padding: 14px 32px;
    font-size: 15px;
}

.up-btn--block {
    width: 100%;
}

/* bottone icona: stessa misura delle social del profilo issuer */
.up-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 36px;
    height: 36px;
    border-radius: var(--up-radius-xs);
    border: 1px solid var(--up-border);
    background: var(--up-surface-muted);
    color: var(--up-text-mid);
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

    .up-icon-btn:hover {
        background: var(--up-text);
        border-color: var(--up-text);
        color: #fff;
    }

    .up-icon-btn:focus-visible {
        outline: 2px solid var(--up-accent);
        outline-offset: 2px;
    }

/* variante con etichetta accanto all'icona */
.up-icon-btn--labelled {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════
   FORM
   ═══════════════════════════════════════════════ */

.up-field {
    margin-bottom: 20px;
}

.up-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--up-text-mid);
    margin-bottom: 8px;
}

.up-input,
.up-textarea,
.up-select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--up-border-strong);
    border-radius: var(--up-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--up-text);
    background: var(--up-surface-muted);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .up-input:focus,
    .up-textarea:focus,
    .up-select:focus {
        border-color: var(--up-accent);
        box-shadow: 0 0 0 3px rgba(53, 79, 154, 0.12);
        background: var(--up-surface);
    }

    .up-input::placeholder,
    .up-textarea::placeholder {
        color: var(--up-placeholder);
    }

    .up-input:disabled,
    .up-textarea:disabled,
    .up-select:disabled {
        background: var(--up-surface-chip);
        color: var(--up-text-soft);
        cursor: not-allowed;
    }

    .up-input.is-invalid,
    .up-textarea.is-invalid {
        border-color: var(--up-danger);
    }

.up-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

/* input con prefisso (icona o testo) */
.up-input-group {
    display: flex;
    align-items: stretch;
}

    .up-input-group .up-input-prefix {
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        border: 1px solid var(--up-border-strong);
        border-right: none;
        border-radius: var(--up-radius-sm) 0 0 var(--up-radius-sm);
        background: var(--up-surface-chip);
        color: var(--up-text-soft);
        font-size: 14px;
        white-space: nowrap;
    }

    .up-input-group .up-input {
        border-radius: 0 var(--up-radius-sm) var(--up-radius-sm) 0;
    }

.up-hint {
    display: block;
    font-size: 12px;
    color: var(--up-text-soft);
    margin-top: 8px;
}

.up-field-error {
    display: none;
    font-size: 13px;
    color: var(--up-danger);
    margin-top: 8px;
}

    .up-field-error.is-visible {
        display: block;
    }

/* ═══════════════════════════════════════════════
   ALERT
   ═══════════════════════════════════════════════ */

.up-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius-sm);
    background: var(--up-surface-muted);
    color: var(--up-text-mid);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.up-alert--success {
    background: var(--up-success-bg);
    border-color: var(--up-success);
    color: var(--up-success-text);
}

.up-alert--danger {
    background: var(--up-danger-bg);
    border-color: var(--up-danger);
    color: var(--up-danger-text);
}

.up-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.up-alert__close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
}

    .up-alert__close:hover {
        opacity: 1;
    }

/* ═══════════════════════════════════════════════
   PONTE SULLE CLASSI STORICHE

   Le pagine costruite sui tag helper di Identity e sulle classi di site.css
   (.form-input, .input-label, .btn dark/light/form-button) non si possono
   riscrivere senza toccare il binding dei form. Qui quelle classi vengono
   riportate alla forma dei componenti .up-*, dentro il perimetro .up-legacy.

   Chi la usa: Areas/Identity/.../Manage/_Layout.cshtml, Views/ShowCase/Edit.cshtml.
   Solo l'aspetto comune: la geometria specifica di ogni pagina (da che lato si
   attacca un adorno, quanto e' largo un bottone) resta nel CSS di pagina, che
   viene caricato dopo e vince a parita' di specificita'.
   ═══════════════════════════════════════════════ */

/* ── etichette ── */
.up-legacy .input-label,
.up-legacy .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--up-text-mid);
    margin-bottom: 8px;
}

    .up-legacy .input-label span {
        font-size: 12px;
        font-weight: 400;
        color: var(--up-text-soft);
    }

/* ── campi ── */
.up-legacy .form-input,
.up-legacy .form-control,
.up-legacy .form-select {
    padding: 11px 14px;
    border: 1px solid var(--up-border-strong);
    border-radius: var(--up-radius-sm);
    background: var(--up-surface-muted);
    color: var(--up-text);
    font-size: 14px;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .up-legacy .form-input:focus,
    .up-legacy .form-control:focus,
    .up-legacy .form-select:focus {
        border: 1px solid var(--up-accent);
        box-shadow: 0 0 0 3px rgba(53, 79, 154, 0.12);
        background: var(--up-surface);
        outline: none;
    }

    .up-legacy .form-input::placeholder,
    .up-legacy .form-control::placeholder {
        color: var(--up-placeholder);
    }

    .up-legacy .form-input:disabled,
    .up-legacy .form-control:disabled {
        background-color: var(--up-surface-chip);
        color: var(--up-text-soft);
    }

/* adorno dell'input: qui solo il colore, i raggi e il lato del bordo
   dipendono da dove sta l'adorno e li decide il CSS di pagina */
.up-legacy .input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background-color: var(--up-surface-chip);
    border: 1px solid var(--up-border-strong);
    color: var(--up-text-soft);
    font-size: 14px;
}

/* ── testi di servizio ── */
.up-legacy .text-info {
    font-size: 12px;
    color: var(--up-text-soft) !important;
    line-height: 1.6;
}

.up-legacy .text-danger,
.up-legacy .field-validation-error {
    font-size: 13px;
    font-weight: 500;
    color: var(--up-danger) !important;
}

/* ── bottoni ──
   L'elenco e' esplicito e non un .btn secco: cosi' restano fuori i bottoni
   che non sono pulsanti d'azione (.btn-close, .btn-close-custom, le immagini
   selezionabili degli stili showcase). */
.up-legacy .btn.dark,
.up-legacy .btn.light,
.up-legacy .btn.form-button,
.up-legacy .btn.btn-primary,
.up-legacy .btn.btn-secondary,
.up-legacy .btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px !important;
    border: 1px solid transparent;
    border-radius: var(--up-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow: visible;
}

    /* l'overlay animato di site.css non serve piu' */
    .up-legacy .btn.dark::before,
    .up-legacy .btn.light::before,
    .up-legacy .btn.form-button::before,
    .up-legacy .btn.btn-primary::before {
        display: none;
    }

.up-legacy .btn.dark,
.up-legacy .btn.form-button,
.up-legacy .btn.btn-primary {
    background-color: var(--up-accent);
    border-color: var(--up-accent);
    color: #fff;
}

    .up-legacy .btn.dark:hover,
    .up-legacy .btn.form-button:hover,
    .up-legacy .btn.btn-primary:hover {
        background-color: var(--up-accent);
        color: #fff;
        box-shadow: inset 0 0 0 999px rgba(0,0,0,0.10);
    }

.up-legacy .btn.light {
    background-color: var(--up-surface);
    border-color: var(--up-accent);
    color: var(--up-accent);
}

    .up-legacy .btn.light:hover:not(:disabled) {
        background-color: var(--up-accent);
        border-color: var(--up-accent);
        color: #fff;
    }

.up-legacy .btn:disabled,
.up-legacy .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.up-legacy .btn:focus {
    box-shadow: 0 0 0 3px rgba(53, 79, 154, 0.25) !important;
}

.up-legacy .link-btn {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--up-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════
   STATO VUOTO
   ═══════════════════════════════════════════════ */

.up-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--up-text-faint);
    font-size: 13px;
    border: 1px dashed var(--up-border-strong);
    border-radius: var(--up-radius-md);
}

    .up-empty i {
        font-size: 32px;
        margin-bottom: 12px;
        display: block;
        opacity: 0.4;
    }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 600px) {
    :root {
        --up-pad-card: 20px;
    }

    .up-page {
        margin: 32px auto 80px;
    }

    .up-page-title {
        font-size: 22px;
    }

    .up-chips {
        gap: 6px;
    }

    .up-chip {
        font-size: 11px;
    }
}