@charset "utf-8";

/* --- 1. VARIABILI E RESET BASE --- */
:root {
    --bg-color: #ffffff;
    --text-color: #212529;
    --card-bg: #ffffff;
    --nav-bg: #ffffff;
    --border-color: rgba(0,0,0,.125);
    --link-color: #007bff;
}

/* Attivazione colori Dark Mode */
html[data-theme='dark'] {
    --bg-color: #121212;
    --text-color: #e8e6e3;
    --card-bg: #1e1e1e;
    --nav-bg: #1c1c1c;
    --border-color: #333333;
    --link-color: #8ab4f8;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    padding-top: 5.0rem;
    /* Rimosso !important fisso per permettere il cambio */
    background-color: var(--bg-color) !important; 
    color: var(--text-color);
    transition: background-color 0.3s ease;
}

/* --- 2. NAVBAR --- */
.navbar {
    background-color: var(--nav-bg) !important;
    transition: background-color 0.3s ease;
}

html[data-theme='dark'] .navbar {
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme='dark'] .navbar-brand, 
html[data-theme='dark'] .nav-link {
    color: var(--text-color) !important;
}

#navbar-year .nav-link.active {
    background-color: transparent;
    color: inherit;
}

/* --- 3. COMPONENTI (CARD E WIDGET) --- */
.card {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.8rem !important;
}

.list-group-item {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.card-img-overlay, .rounded-xl {
    border-radius: 0.8rem !important;
}

/* --- 4. TIPOGRAFIA E LINK --- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: var(--text-color);
}

a {
    color: var(--link-color);
}

html[data-theme='dark'] .text-muted {
    color: #a8a8a8 !important;
}

.email-text {
    font-family: "Source Code Pro", monospace;
}

/* --- 5. UTILITY E IMMAGINI --- */
.invertable {
    /* Inverte i loghi neri in bianco in dark mode */
    filter: invert(0%);
}

html[data-theme='dark'] .invertable {
    filter: invert(100%);
}

/* Classi arrotondate */
.rounded-xl-bottom {
    border-bottom-right-radius: 0.8rem !important;
    border-bottom-left-radius: 0.8rem !important;
}

.rounded-xl-top {
    border-top-left-radius: 0.8rem !important;
    border-top-right-radius: 0.8rem !important;
}

/* Lazy Loading */
img.lazy, div.lazy {
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
}

/* --- Fix per i Widget (Versione Soft) --- */

html[data-theme='dark'] .card,
html[data-theme='dark'] .list-group-item,
html[data-theme='dark'] .modal-content,
html[data-theme='dark'] .bg-white,
html[data-theme='dark'] .bg-light {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

html[data-theme='dark'] .card,
html[data-theme='dark'] .border,
html[data-theme='dark'] .border-top,
html[data-theme='dark'] .border-bottom,
html[data-theme='dark'] .list-group-item {
    border-color: var(--border-color) !important;
}

html[data-theme='dark'] .card-body,
html[data-theme='dark'] .card-header,
html[data-theme='dark'] .card-footer {
    background-color: transparent !important;
    color: inherit !important;
}

html[data-theme='dark'] i,
html[data-theme='dark'] .ai {
    color: inherit; 
}

/* Colore autori in Dark Mode */
html[data-theme='dark'] .small,
html[data-theme='dark'] .small a,
html[data-theme='dark'] .small span {
    color: var(--text-color) !important;
}

/* Se il widget usa link per gli autori, rendiamoli blu chiaro per leggibilità */
html[data-theme='dark'] .small a {
    color: var(--link-color) !important;
    text-decoration: none;
}

html[data-theme='dark'] .small a:hover {
    text-decoration: underline;
}

/* Fix per l'ombra: in Dark Mode l'ombra chiara sta male */
html[data-theme='dark'] .shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.5) !important;
}

/* 1. Cambia il colore del testo "Menu" accanto all'icona */
html[data-theme='dark'] .navbar-toggler {
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 2. Sostituisce l'icona hamburger nera con una color crema/bianca */
html[data-theme='dark'] .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(232, 230, 227, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* 3. Fix per il menu a tendina che appare quando clicchi l'hamburger */
@media (max-width: 575px) {
    html[data-theme='dark'] .navbar-collapse {
        background-color: var(--nav-bg) !important;
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
        margin-top: 0.5rem;
    }
}

.img-logo-bg {
    width: 32px;             /* Leggermente più grande dell'immagine */
    height: 32px;
    padding: 2px;            /* Crea lo spazio bianco intorno */
    background-color: #ffffff !important; /* Sempre bianco, anche in Dark Mode */
    border-radius: 4px;      /* Arrotonda gli angoli del quadratino */
    object-fit: contain;     /* Assicura che il logo non si deformi */
    display: inline-block;
    vertical-align: middle;
}

.bubble-visual-hash {
    background-color: #ffffff !important; /* Forza lo sfondo bianco */
    border-radius: 0.8rem;               /* Opzionale: mantiene la coerenza con le tue card */
}

/* 1. Colore dello sfondo quando lo switch è attivo (ON) */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #595959 !important; /* Grigio scuro invece di blu */
    border-color: #575757 !important;
}

/* 2. Colore dello sfondo in Dark Mode quando attivo */
html[data-theme='dark'] .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--link-color) !important; /* Usa il tuo azzurro dark */
    border-color: var(--link-color) !important;
}

/* 3. Colore dello switch quando viene cliccato (focus) per togliere l'alone blu */
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1) !important;
}

html[data-theme='dark'] .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1) !important;
}