/**
 * TABLE OF CONTENTS
 *
 * =Web Fonts
 * =Reset & Variabili
 * =Layout Principale
 * =Header
 * =Colonne (sinistra/destra)
 * =Responsive
 */


/*------------------------------------*\
    =Web Fonts
\*------------------------------------*/

@font-face {
    font-family: 'Roboto Flex';
    src: url('fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-style: normal;
}

body {
    font-family: 'Roboto Flex', Arial, sans-serif;
}


/*------------------------------------*\
    =Reset & Variabili
\*------------------------------------*/

:root {
    /* Palette */
    --color-main: #7c1118; /* rosso Controlnet */
    --color-accent: #65191e; /* più scuro */
    --color-bg-light: #f7f7f7;
    --color-text: #333;
    --color-white: #fff;
    /* Font size scale */
    --fs-h1: 2.5rem;
    --fs-h2: 1.75rem;
    --fs-base: 1rem;
    /* Font weights Roboto Flex */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    /* Spacing */
    --space-s: 0.75rem;
    --space-m: 1.25rem;
    --space-l: 2rem;
}

/* Reset globale */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, form {
    height: 100%;
}


/*------------------------------------*\
    =Header
\*------------------------------------*/

.headerTop {
    background-color: var(--color-main);
    color: var(--color-white);
    padding: var(--space-s) var(--space-l);
}

.templateTitle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-login-page {
    width: 90px;
}


/*------------------------------------*\
    =Layout Principale
\*------------------------------------*/

form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#ASPxSplitter1_1_CC {
    display: flex;
    flex-direction: row;
    height: 100vh; /* piena altezza viewport */
}


/*------------------------------------*\
    =Colonna sinistra
\*------------------------------------*/

.left-column {
    flex: 1;
    background: url("/Immagini/photo-alpha.jpeg") center center / cover no-repeat;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-m);
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .left-column::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55); /* overlay scuro */
        z-index: 1;
    }

.left-column-content {
    position: relative;
    z-index: 2;
    max-width: 480px;
}

    .left-column-content h1 {
        font-size: var(--fs-h1);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--space-m);
        text-align: left;
    }

    .left-column-content p {
        font-size: var(--fs-base);
        font-weight: var(--font-weight-regular);
        text-align: left;
    }


/*------------------------------------*\
    =Colonna destra
\*------------------------------------*/

.rcontent {
    flex: 1;
    background: var(--color-bg-light);
    display: flex;
    flex-direction: column;
    justify-content: center; /* centrato verticalmente */
    padding: var(--space-l);
}

.accountHeader h2 {
    font-size: var(--fs-h2);
    color: var(--color-main);
    margin-bottom: var(--space-s);
}

.accountHeader p {
    margin-bottom: var(--space-m);
    color: var(--color-text);
}

input[type="text"],
input[type="password"] {
    width: 100%;
    max-width: 300px;
    padding: var(--space-s);
    margin-bottom: var(--space-m);
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: var(--fs-base);
}

.checkbox {
    margin-bottom: var(--space-m);
    font-size: 0.9rem;
}

#ASPxSplitter1_Content_MainContent_btnLogin_I {
    background: var(--color-main);
    border: none;
    color: var(--color-white);
    padding: var(--space-s) var(--space-l);
    font-size: var(--fs-base);
    font-weight: var(--font-weight-semibold);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    #ASPxSplitter1_Content_MainContent_btnLogin_I:hover {
        background: var(--color-accent);
    }


/*------------------------------------*\
    =Responsive
\*------------------------------------*/

@media (max-width: 768px) {

    #ASPxSplitter1_1_CC {
        flex-direction: column;
    }

    .left-column,
    .rcontent {
        flex: none;
        width: 100% !important;
        height: auto !important;
        padding: var(--space-l);
    }

    .left-column-content {
        max-width: 100%;
        padding: var(--space-l);
        text-align: center;
    }

        .left-column-content h1,
        .left-column-content p {
            text-align: center;
        }
}