/* ============================================================================
   site.css — Portale di Migrazione Account
   Identità visiva conforme a BRAND.md (palette confermata dal committente).
   ========================================================================== */

:root {
    /* Brand primari (rosso istituzionale MBA, monocromatico) */
    --brand-primary:        #A70000;
    --brand-primary-dark:   #7A0000;
    --brand-primary-darker: #5C0000;
    --brand-primary-light:  #FBEAEA;

    /* Neutri */
    --neutral-900: #1A1A1A;
    --neutral-800: #333333;
    --neutral-700: #4A4A4A;
    --neutral-500: #7A7A7A;
    --neutral-300: #D4D4D4;
    --neutral-100: #F5F5F5;
    --neutral-000: #FFFFFF;

    /* Semantici */
    --semantic-success: #2E7D32;
    --semantic-warning: #ED6C02;
    --semantic-error:   #A70000;
    --semantic-info:    #0277BD;

    /* Tipografia */
    --font-stack: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --radius-md: 8px;
    --radius-sm: 4px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-stack);
    font-size: 16px;
    line-height: 1.5;
    color: var(--neutral-900);
    background: var(--neutral-000);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 { color: var(--neutral-900); margin-top: 0; }
h1 { font-size: 2rem; font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }

a {
    color: var(--brand-primary);
    text-decoration: underline;
}
a:hover { color: var(--brand-primary-dark); }

/* ---------- header pubblico ---------- */
.brand-header {
    background: var(--neutral-000);
    border-bottom: 1px solid var(--neutral-300);
    padding: 16px 0;
}

.brand-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    max-width: 1140px;
    margin: 0 auto;
    gap: 24px;
    flex-wrap: wrap;
}

.brand-header__logo img {
    height: 56px;
    width: auto;
    display: block;
}

.brand-header__contacts {
    display: flex;
    gap: 24px;
    font-size: 0.875rem;
    color: var(--neutral-700);
    align-items: center;
}

.brand-header__contacts a {
    color: var(--neutral-700);
    text-decoration: none;
}
.brand-header__contacts a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* ---------- footer pubblico ---------- */
.brand-footer {
    background: var(--neutral-800);
    color: var(--neutral-000);
    padding: 48px 24px;
    margin-top: auto;
}

.brand-footer__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-footer__logo img {
    height: 48px;
    width: auto;
    display: block;
}

.brand-footer__contact, .brand-footer__links, .brand-footer__legal {
    font-size: 0.875rem;
}

.brand-footer__links a, .brand-footer__contact a {
    color: var(--neutral-000);
    text-decoration: none;
}
.brand-footer__links a:hover, .brand-footer__contact a:hover {
    text-decoration: underline;
}

.brand-footer__legal {
    color: var(--neutral-300);
    margin-top: 8px;
}

/* ---------- main / card centrale ---------- */
.main-content {
    flex: 1 0 auto;
    padding: 64px 16px;
}

.brand-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--neutral-000);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 40px;
}

@media (max-width: 576px) {
    .main-content { padding: 32px 16px; }
    .brand-card { padding: 24px; }
}

/* ---------- bottoni ---------- */
.btn-brand-primary {
    background: var(--brand-primary);
    color: var(--neutral-000);
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s;
}
.btn-brand-primary:hover { background: var(--brand-primary-dark); color: var(--neutral-000); text-decoration: none; }
.btn-brand-primary:active { background: var(--brand-primary-darker); }
.btn-brand-primary:disabled { background: var(--neutral-500); cursor: not-allowed; }

.btn-brand-secondary {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    padding: 10px 26px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s;
}
.btn-brand-secondary:hover { background: var(--brand-primary-light); text-decoration: none; }

/* ---------- form input ---------- */
.brand-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-family: inherit;
    color: var(--neutral-900);
    background: var(--neutral-000);
    box-sizing: border-box;
}
.brand-input:focus {
    border-color: var(--brand-primary);
    border-width: 2px;
    outline: none;
    padding: 11px 15px;
    box-shadow: 0 0 0 3px rgba(167, 0, 0, 0.2);
}
.brand-input.is-invalid {
    border-color: var(--semantic-error);
}

.brand-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-900);
}

.brand-helper, .brand-error {
    display: block;
    font-size: 13px;
    margin-top: 4px;
}
.brand-helper { color: var(--neutral-500); }
.brand-error { color: var(--semantic-error); }

/* ---------- alert ---------- */
.brand-alert {
    border-left: 4px solid var(--brand-primary);
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin: 0 0 24px;
}
.brand-alert--success { border-left-color: var(--semantic-success); background: rgba(46, 125, 50, 0.08); color: var(--semantic-success); }
.brand-alert--warning { border-left-color: var(--semantic-warning); background: rgba(237, 108, 2, 0.08); color: var(--semantic-warning); }
.brand-alert--info    { border-left-color: var(--semantic-info); background: rgba(2, 119, 189, 0.08); color: var(--semantic-info); }

/* ---------- utility ---------- */
.text-center { text-align: center; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }

.mono {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: var(--neutral-100);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

/* ============================================================================
   HCNet brand override (provenienza: Health Point / Health Italia S.p.A.)
   ----------------------------------------------------------------------------
   Le pagine pubbliche che servono il flusso HCNet impostano `body.brand-hcnet`.
   Da li' la palette --brand-* viene sovrascritta con i colori Health Point
   (rosso ~ #B5202F + grigio + accent blu medicale). I componenti riutilizzano
   gli stessi selettori .brand-* della palette MBA, cambiando solo i valori.
   ========================================================================== */

body.brand-hcnet {
    /* Rosso Health Point: piu' caldo/saturato rispetto al rosso MBA */
    --brand-primary:        #B5202F;
    --brand-primary-dark:   #8A1822;
    --brand-primary-darker: #6B121A;
    --brand-primary-light:  #FBE9EB;

    /* Footer piu' freddo (blu antracite) per differenziare visivamente */
    --hcnet-footer-bg:      #1F2A36;
    /* Accent blu medicale: sottile underline nell'header, link footer */
    --hcnet-accent:         #1976D2;
    /* Grigio del logo "POINT" */
    --hcnet-secondary-text: #8E8B8C;
}

/* Override mirati per i componenti dentro il flusso HCNet */
body.brand-hcnet .brand-input:focus {
    box-shadow: 0 0 0 3px rgba(181, 32, 47, 0.2);
}

/* Header HCNet: bordo inferiore sottile in accent blu invece del grigio neutro */
body.brand-hcnet .brand-header {
    border-bottom: 1px solid var(--neutral-300);
    box-shadow: inset 0 -3px 0 0 var(--hcnet-accent);
}

body.brand-hcnet .brand-header__logo img {
    height: 44px;                /* il logo HP e' wide e basso (500x56) */
    max-width: 280px;
}

body.brand-hcnet .brand-header__tagline {
    display: block;
    font-size: 0.78rem;
    color: var(--hcnet-secondary-text);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* Footer HCNet: sfondo blu antracite invece del grigio neutro MBA */
body.brand-hcnet .brand-footer {
    background: var(--hcnet-footer-bg);
}

body.brand-hcnet .brand-footer__legal {
    color: rgba(255, 255, 255, 0.6);
}

body.brand-hcnet .brand-footer__contact a:hover,
body.brand-hcnet .brand-footer__links a:hover {
    color: var(--hcnet-accent);
    text-decoration: underline;
}

/* Lieve enfasi medicale: card con accent stripe in alto */
body.brand-hcnet .brand-card {
    position: relative;
}
body.brand-hcnet .brand-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary) 60%, var(--hcnet-accent) 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ============================================================================
   Health Italia brand (parent corporate — pagine non flusso SSO, es. home)
   ----------------------------------------------------------------------------
   Holding del gruppo che possiede Mutua MBA, Health Point, H-Digital, HiWelfare,
   Health Academy. Tone piu' istituzionale-corporate (Health Italia e' quotata
   su Euronext Growth Milan). Il logo include il tricolore italiano: il layout
   richiama questa identita' con un sottile triplo bordo verde/bianco/rosso
   nell'header invece dell'accent blu dell'ecosistema HCNet.
   ========================================================================== */

body.brand-hi {
    /* Rosso istituzionale Italia, leggermente piu' caldo del MBA */
    --brand-primary:        #C8102E;
    --brand-primary-dark:   #9E0E26;
    --brand-primary-darker: #780A1D;
    --brand-primary-light:  #FBE8EB;

    /* Footer corporate: blu navy molto scuro */
    --hi-footer-bg:         #14253E;
    --hi-tricolor-green:    #008C45;
    --hi-tricolor-white:    #F5F5F5;
    --hi-tricolor-red:      #CD212A;
    --hi-secondary-text:    #6D6E71;
}

body.brand-hi .brand-input:focus {
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2);
}

/* Header HI: tre fasce sottili in tricolore italiano lungo il bordo inferiore */
body.brand-hi .brand-header {
    border-bottom: none;
    position: relative;
}
body.brand-hi .brand-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--hi-tricolor-green) 0%, var(--hi-tricolor-green) 33.33%,
        var(--hi-tricolor-white) 33.33%, var(--hi-tricolor-white) 66.66%,
        var(--hi-tricolor-red) 66.66%, var(--hi-tricolor-red) 100%);
}

body.brand-hi .brand-header__logo img {
    height: 48px;
    max-width: 220px;
}

body.brand-hi .brand-header__tagline {
    display: block;
    font-size: 0.78rem;
    color: var(--hi-secondary-text);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* Footer HI: blu navy scuro con dati corporate completi */
body.brand-hi .brand-footer {
    background: var(--hi-footer-bg);
}

body.brand-hi .brand-footer__legal {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    line-height: 1.6;
}

/* Card su home HI: stripe tricolore in alto */
body.brand-hi .brand-card {
    position: relative;
}
body.brand-hi .brand-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--hi-tricolor-green) 0%, var(--hi-tricolor-green) 33.33%,
        var(--hi-tricolor-white) 33.33%, var(--hi-tricolor-white) 66.66%,
        var(--hi-tricolor-red) 66.66%, var(--hi-tricolor-red) 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}