@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /* --- LIGHT MODE PALETTE --- */
    --ttn-bg-body: #F0F2F5;        /* Concrete Grey Light */
    --ttn-bg-surface: #FFFFFF;     /* White */
    --ttn-text-main: #212B36;      /* Dark Lead */
    --ttn-text-secondary: #637381; /* Mechanic Grey */
    --ttn-border: #DFE3E8;         /* Subtle Grey */
    --ttn-primary: #0084CE;        /* Technical Blue */
    --ttn-error: #DE350B;          /* Alert Red */
    --ttn-bg-input: #F9FAFB;
    --ttn-logo-full: url('../img/logo-full-light.png');
    --ttn-logo-icon: url('../img/logo-icon-light.png');
}

[data-bs-theme="dark"] {
    /* --- DARK MODE PALETTE --- */
    --ttn-bg-body: #111927;        /* Deep Night Blue */
    --ttn-bg-surface: #1D2939;     /* Dark Panel */
    --ttn-text-main: #F9FAFB;      /* Off-White */
    --ttn-text-secondary: #9DAFBD; /* Muted Grey */
    --ttn-border: #2D3748;         /* Dark Line */
    --ttn-primary: #33A9FF;        /* Technical Blue Light */
    --ttn-error: #FF5630;          /* Alert Red (Schiarito leggermente per dark) */
    --ttn-bg-input: #111927;
    --ttn-logo-full: url('../img/logo-full-dark.png');
    --ttn-logo-icon: url('../img/logo-icon-dark.png');
}

/* --- APPLICAZIONE GENERALE --- */
body {
    background-color: var(--ttn-bg-body);
    color: var(--ttn-text-main);
    font-family: "Open Sans", sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap Cards/Surfaces */
.card, .bg-surface {
    background-color: var(--ttn-bg-surface);
    border: 1px solid var(--ttn-border);
    color: var(--ttn-text-main);
}

/* Testi */
h1, h2, h3, h4, h5, h6 {
    color: var(--ttn-text-main);
    font-weight: 600;
}

.text-muted, .text-secondary {
    color: var(--ttn-text-secondary) !important;
}

.text-numeric {
    font-family: 'Roboto', sans-serif;
}

/* Form Controls Customization */
.form-control {
    background-color: var(--ttn-bg-input); /* Qui avviene la magia */
    border-color: var(--ttn-border);
    color: var(--ttn-text-main);
    /* padding: 0.6rem 0.8rem; */
}

.form-control:focus {
    background-color: var(--ttn-bg-surface);
    color: var(--ttn-text-main);
    border-color: var(--ttn-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 132, 206, 0.15);
}

/* Bottoni */
.btn-primary {
    background-color: var(--ttn-primary);
    border-color: var(--ttn-primary);
    color: #ffffff; /* Testo sempre bianco sul blu */
}

.btn-primary:hover {
    filter: brightness(0.9); /* Effetto hover generico */
}

/* Link */
a {
    color: var(--ttn-primary);
    text-decoration: none;
}

/* --- GESTIONE LOGHI DINAMICI --- */

.logo-login {
    /* Impostiamo l'immagine via variabile */
    background-image: var(--ttn-logo-full);

    /* Gestione dimensioni e posizione */
    background-size: contain;      /* Adatta l'immagine senza tagliarla */
    background-repeat: no-repeat;
    background-position: center;

    /* DEVI dare dimensioni esplicite perché il div è vuoto */
    width: 100%;
    height: 80px; /* Regola questo in base all'altezza del tuo logo */

    /* Transizione morbida quando cambi tema */
    transition: background-image 0.3s ease;
}

.logo-navbar {
    background-image: var(--ttn-logo-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 30px;  /* Larghezza icona */
    height: 30px; /* Altezza icona */
    display: inline-block; /* Fondamentale per farlo stare nel flusso del testo */
    vertical-align: middle;

    transition: background-image 0.3s ease;
}