:root {
    --ars-blue: #254783;
    --ars-blue-dark: #17386c;
    --ars-cyan: #29a9e0;
    --ars-text: #52647e;
    --ars-muted: #77849a;
    --ars-border: #d5e6f0;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--ars-text);
    background:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,.78), transparent 30%),
        linear-gradient(135deg, #edf8fd 0%, #d9edf9 58%, #b9dff2 100%);
}


/* =========================================================
   PAGINA
   ========================================================= */

.login-page {
    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4vh 5vw;
}


/* =========================================================
   CARD
   ========================================================= */

.login-card {
    position: relative;

    width: min(1040px, 88vw);
    height: min(650px, 82vh);

    min-height: 560px;

    display: grid;
    grid-template-columns: 1fr 1px 1.05fr;

    padding: 42px 50px 45px;

    background: rgba(255,255,255,.95);

    border: 1px solid rgba(255,255,255,.96);
    border-radius: 17px;

    box-shadow:
        0 24px 60px rgba(29,79,127,.16);

    overflow: hidden;
}


/* =========================================================
   FILIGRANA
   ========================================================= */

.watermark-symbol {
    position: absolute;

    right: -120px;
    top: -62px;

    width: 390px;
    height: 390px;

    opacity: .04;

    overflow: hidden;

    pointer-events: none;
}

.watermark-symbol img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: left center;
}


/* =========================================================
   SINISTRA
   ========================================================= */

.credentials-panel {
    position: relative;
    z-index: 3;

    padding: 0 47px 0 4px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* LOGO */

.login-logo {
    width: 270px;
    height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;
}

.login-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* TESTATA */

.login-heading {
    text-align: center;

    margin-bottom: 26px;
}

.login-heading h1 {
    margin: 0 0 5px;

    color: var(--ars-blue);

    font-size: 23px;
    font-weight: 700;
}

.login-heading p {
    margin: 0;

    color: var(--ars-muted);

    font-size: 13px;
}


/* =========================================================
   FORM
   ========================================================= */

.login-form {
    width: 100%;
    max-width: 350px;
}

.input-box {
    width: 100%;
    height: 54px;

    display: flex;
    align-items: center;

    margin-bottom: 15px;
    padding: 0 14px;

    background: white;

    border: 1px solid #cddfea;
    border-radius: 8px;

    box-shadow:
        0 3px 11px rgba(40,77,121,.04);
}

.input-box:focus-within {
    border-color: #77c5e8;

    box-shadow:
        0 0 0 3px rgba(41,169,224,.10);
}


/* ICONA CAMPO */

.field-icon {
    width: 19px;
    height: 19px;

    margin-right: 12px;

    fill: none;

    stroke: #6684a6;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* INPUT */

.input-box input {
    width: 100%;
    height: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--ars-blue-dark);

    font-size: 14.5px;
}

.input-box input::placeholder {
    color: #8a98aa;
}


/* OCCHIO */

.show-password {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 0;

    background: transparent;

    cursor: pointer;

    padding: 0;
}

.show-password svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: #6684a6;
    stroke-width: 1.5;
}


/* LOGIN */

.login-submit {
    width: 100%;
    height: 53px;

    margin-top: 2px;

    border: 0;
    border-radius: 8px;

    color: white;

    background:
        linear-gradient(135deg, #1b73ba, #078bd0);

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 9px 22px rgba(14,108,177,.15);
}

.login-submit:hover {
    filter: brightness(1.04);
}

.forgot-password {
    display: block;

    margin-top: 15px;

    text-align: center;

    color: #1683c4;

    font-size: 12.5px;
}


/* =========================================================
   DIVISORE
   ========================================================= */

.central-divider {
    width: 1px;
    height: 74%;

    align-self: center;

    background:
        linear-gradient(
            180deg,
            transparent,
            #ccdfeb 15%,
            #ccdfeb 85%,
            transparent
        );
}


/* =========================================================
   DESTRA
   ========================================================= */

.roles-panel {
    position: relative;
    z-index: 3;

    padding: 77px 6px 0 49px;
}

.roles-panel h2 {
    margin: 0 0 24px;

    color: var(--ars-blue);

    font-size: 21px;
    font-weight: 700;
}


/* =========================================================
   RUOLI
   ========================================================= */

.role-list {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.role-card {
    width: 100%;
    min-height: 97px;

    display: grid;
    grid-template-columns: 58px 1fr 24px;

    align-items: center;

    padding: 13px 15px;

    text-align: left;

    border: 1px solid #d4e4ee;
    border-radius: 10px;

    background: rgba(255,255,255,.96);

    box-shadow:
        0 6px 17px rgba(37,75,119,.06);

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.role-card:hover {
    transform: translateY(-2px);

    border-color: #8fccec;

    box-shadow:
        0 10px 24px rgba(37,75,119,.10);
}

.role-card.selected {
    border: 2px solid #2aa7df;

    background: #eef9fe;
}


/* ICONA RUOLO */

.role-icon {
    width: 49px;
    height: 49px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf7fc;
}

.role-icon svg {
    width: 28px;
    height: 28px;

    fill: none;

    stroke: var(--ars-blue);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* TESTO */

.role-content {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.role-content strong {
    color: var(--ars-blue);

    font-size: 16px;
}

.role-content span {
    color: var(--ars-muted);

    font-size: 12px;
    line-height: 1.35;
}

.role-arrow {
    color: #258ecb;

    font-size: 26px;

    text-align: right;
}


/* =========================================================
   CLAIM
   ========================================================= */

.login-claim {
    position: absolute;

    right: 42px;
    bottom: 23px;

    z-index: 4;

    color: #187fc0;

    font-family: "Segoe Script", "Comic Sans MS", cursive;

    font-size: 18px;
    line-height: 1.12;

    transform: rotate(-5deg);
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-height: 780px) {

    .login-card {
        height: 86vh;

        padding-top: 30px;
        padding-bottom: 30px;
    }

    .login-logo {
        height: 90px;
    }

    .roles-panel {
        padding-top: 58px;
    }

    .role-card {
        min-height: 88px;
    }
}

.login-error {
    width: 100%;
    max-width: 350px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #efb8b8;
    border-radius: 10px;
    background: #fff1f1;
    color: #9b2f2f;
    font-size: 14px;
    line-height: 1.4;
}

.secure-access-note {
    display: block;
    margin-top: 15px;
    color: #66809d;
    font-size: 12px;
    text-align: center;
}

.role-card.role-disabled {
    opacity: .52;
    cursor: not-allowed;
    filter: grayscale(.25);
}

.role-card.role-disabled:hover {
    transform: none;
    box-shadow: none;
}