/* =====================================================================
   CENSEA CLARITY — pagina di accesso comune ai tre portali
   ---------------------------------------------------------------------
   Split-screen: pannello brand navy a sinistra, form a destra (sotto i
   900px resta solo il form). Markup in common/views/layouts/_login-shell.php,
   form in common/views/site/_login-form.php. Il colore di accento lo
   definisce ogni layout con --lg-accent (staff: colore del portale,
   clienti blu, dipendenti verde).
   ===================================================================== */

:root{
    --lg-navy:   #121a2e;
    --lg-navy2:  #0e1424;
    --lg-ink:    #10182b;
    --lg-muted:  #71798c;
    --lg-border: #e5e9f0;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body.cc-login-body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    background:#f5f7fa;
    color:var(--lg-ink);
    -webkit-font-smoothing:antialiased;
}

.cc-login{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    min-height:100vh;
}

/* ── Pannello brand (sinistra) ── */
.cc-brandside{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(1100px 500px at 12% -10%, rgba(0,123,255,.22), transparent 60%),
        radial-gradient(800px 500px at 110% 110%, rgba(122,90,248,.18), transparent 55%),
        linear-gradient(160deg, var(--lg-navy) 0%, var(--lg-navy2) 100%);
    color:#fff;
    padding:48px 56px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
/* Trama decorativa a griglia sottile */
.cc-brandside::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:38px 38px;
    mask-image:radial-gradient(700px 500px at 30% 30%, #000, transparent 80%);
    pointer-events:none;
}
.cc-brandside > *{ position:relative; z-index:1; }

.cc-brand-logo{ text-align:center; }
.cc-brand-logo img{ height:90px; width:auto; }

.cc-brand-hero h1{
    font-size:2.35rem;
    line-height:1.15;
    font-weight:700;
    letter-spacing:-.02em;
    margin:0 0 14px;
}
.cc-brand-hero p{
    font-size:1.02rem;
    line-height:1.6;
    color:rgba(255,255,255,.72);
    max-width:420px;
    margin:0 0 30px;
}
.cc-feats{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.cc-feats li{ display:flex; align-items:center; gap:12px; font-size:.98rem; color:rgba(255,255,255,.9); }
.cc-feats .fc{
    flex:0 0 auto; width:30px; height:30px; border-radius:9px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
}
.cc-feats .fc svg{ width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.cc-brand-foot{ font-size:.82rem; color:rgba(255,255,255,.5); }

/* ── Pannello form (destra) ── */
.cc-formside{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 24px;
}
.cc-card{ width:100%; max-width:392px; }

.cc-mobilelogo{ display:none; text-align:center; margin-bottom:26px; }
.cc-mobilelogo img{ max-width:180px; height:auto; }

.cc-env{
    display:inline-flex; align-items:center; gap:7px;
    font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:#b45309; background:#fef3c7; border:1px solid #fde68a;
    padding:5px 11px; border-radius:999px; margin-bottom:18px;
}
.cc-env::before{ content:""; width:7px; height:7px; border-radius:50%; background:#f59e0b; }

.cc-head h2{
    font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; color:var(--lg-ink);
}
.cc-head p{ font-size:.96rem; color:var(--lg-muted); margin:0 0 26px; }
.cc-portalname{ font-weight:600; color:var(--lg-accent); }

/* Alert */
.cc-formside .alert{ border-radius:12px; border:1px solid transparent; font-size:.9rem; padding:12px 14px; margin-bottom:18px; }
.cc-formside .alert-danger{ background:#fef2f2; border-color:#fecaca; color:#b42318; }
.cc-formside .alert-success{ background:#ecfdf3; border-color:#bbf7d0; color:#067647; }
.cc-formside .alert-warning{ background:#fffbeb; border-color:#fde68a; color:#b45309; }

/* Form controls */
.cc-formside .form-group,
.cc-formside .mb-3{ margin-bottom:18px; }
.cc-formside label{
    display:block; font-size:.72rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.4px; color:var(--lg-muted); margin-bottom:7px;
}
.cc-formside .form-control{
    height:50px; width:100%;
    border-radius:12px; border:1.5px solid var(--lg-border);
    padding:12px 15px; font-size:15px; background:#fff; color:var(--lg-ink);
    transition:border-color .15s, box-shadow .15s;
}
.cc-formside .form-control::placeholder{ color:#aab2c0; }
.cc-formside .form-control:focus{
    outline:none; border-color:var(--lg-accent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--lg-accent) 16%, transparent);
}
.cc-formside .invalid-feedback,
.cc-formside .help-block{ color:#b42318; font-size:.8rem; margin-top:5px; }
.cc-formside .has-error .form-control{ border-color:#f04438; }

/* Password wrapper + toggle */
.cc-pass-wrap{ position:relative; }
.cc-pass-wrap .form-control{ padding-right:46px; }
.cc-pass-toggle{
    position:absolute; top:0; right:0; height:50px; width:46px;
    display:flex; align-items:center; justify-content:center;
    border:none; background:none; color:var(--lg-muted); cursor:pointer; padding:0;
}
.cc-pass-toggle:hover{ color:var(--lg-ink); }
.cc-pass-toggle svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* Remember me */
.cc-formside .form-check{ display:flex; flex-wrap:nowrap; align-items:center; gap:9px; margin:2px 0 22px; padding-left:0; }
.cc-formside .form-check-input{
    position:static; flex:0 0 auto; width:18px; height:18px; margin:0; border-radius:5px; border:1.5px solid #cbd3e0; cursor:pointer;
    appearance:auto; accent-color:var(--lg-accent);
}
.cc-formside .form-check-input:checked{ background-color:var(--lg-accent); border-color:var(--lg-accent); }
.cc-formside .form-check label{
    margin:0; text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:600; color:#2b3140; cursor:pointer;
}

/* Submit */
.cc-formside .btn-primary{
    height:50px; width:100%;
    border-radius:12px; border:none;
    background:var(--lg-accent) !important;
    color:#fff !important; font-size:15px; font-weight:600; letter-spacing:.2px;
    box-shadow:0 10px 22px -10px var(--lg-accent);
    transition:filter .15s, transform .1s, box-shadow .15s;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.cc-formside .btn-primary:hover{ filter:brightness(.94); transform:translateY(-1px); }
.cc-formside .btn-primary:active{ transform:translateY(0); }

.cc-foot{ margin-top:26px; text-align:center; font-size:.82rem; color:var(--lg-muted); line-height:1.6; }

/* ── Responsive ── */
@media (max-width:900px){
    .cc-login{ grid-template-columns:1fr; }
    .cc-brandside{ display:none; }
    .cc-mobilelogo{ display:block; }
    .cc-formside{ min-height:100vh; }
}
@media (max-width:420px){
    .cc-formside{ padding:24px 18px; }
}

/* Mostra/nascondi password (bottone .cc-pass-toggle di _login-form.php) */
.cc-pass-toggle .ic-eyeoff{ display:none; }
.cc-pass-toggle.on .ic-eye{ display:none; }
.cc-pass-toggle.on .ic-eyeoff{ display:block; }