@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 */
    --bs-nav-link-color: var(--ttn-primary);
    --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');

    /* --- LAYOUT --- */
    --nav-height: 72px;
    --sidebar-width: 275px;
    --footer-height: 4rem;
    --z-fixed: 100;
    --scrollbar-width: 8px;

    /* --- TYPOGRAPHY --- */
    --body-font: "Open Sans", sans-serif;
    --numeric-font: 'Roboto', sans-serif;
    --normal-font-size: 0.938rem;

    --btn-border-color: #444c56;
}

[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: var(--body-font);
    font-size: var(--normal-font-size);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar */
nav.navbar {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-fixed);
    height: var(--nav-height);
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
    background-color:var(--ttn-bg-surface);
}

nav.navbar a.btn{
    border: var(--bs-border-width) var(--bs-border-style) var(--btn-border-color) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-menu {
    background-color: var(--ttn-bg-surface);
    padding: 1rem;
    border-radius: 0.25rem;
    color: var(--ttn-text-main);
}

.btn.active{
    color: var(--bs-link-color);
    border-color: var(--bs-link-color) !important;
}

@media screen and (min-width: 992px) {
    .autenticato .navbar {
        width: calc(100vw - var(--sidebar-width));
        margin-left: var(--sidebar-width);
    }

    .autenticato .main-wrapper {
        margin-left: var(--sidebar-width);
        width: calc(100vw - var(--sidebar-width));
    }

}

/* footer */
.footer {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--footer-height);
    background-color:var(--ttn-bg-surface);
    z-index: 100;
}


/* Sidebar */
.sidebar {
    height: 100dvh;
    width: var(--sidebar-width);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    overflow-y: auto;
    background-color:var(--ttn-bg-surface);
}

.offcanvas-start {
    width: var(--sidebar-width)!important;
}

.nav-link {
    color: var(--font-color);
}

.navbar-nav .nav-item:not(:last-child) {
    margin-right: 1.5em;
}

.navbar-nav .nav-link {
    transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
    transform: scale(1.25);
}

.sidebar .nav-link.active {
    font-weight: 500;
}

.sidebar .nav .nav-link.active {
    color: var(--bs-nav-link-color);
    position: relative;
    padding-bottom: 0.50rem;
}

.sidebar .nav .nav-link i.ph {
    font-size: 20px;
}

.sidebar .nav .nav-link span {
    position: relative;
}

.sidebar .nav .nav-link.active span::before {
    width: 70%;
    border-bottom: 1px solid var(--bs-nav-link-color);
}

.sidebar .nav .nav-link>span::before {
    content: "";
    position: absolute;
    bottom: -0.15rem;
    left: 0;
    width: 0;
    border-bottom: 1px solid var(--bs-nav-link-color);
    transition: width 0.3s;
}

.rotate-90 {
    transform: rotate(-90deg);
    transition: transform 1s ease;
}
.rotate-0 {
    transform: rotate(0deg);
    transition: transform 1s ease;
}

.logo_sidebar {
    background-image: var(--ttn-logo-sidebar);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: var(--sidebar-width);
    padding-top: 50%;
}

.sidebar .nav .nav-link:hover span::before {
    width: 70%;
}

/* Main */
.main-wrapper {
    width: 100vw;
    margin-top: var(--nav-height);
}

.page-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.page-wrapper .page-content {
    padding: 2rem 0.75rem;
    width: 90%;
    margin: 0 auto;
    min-height: calc(100dvh - var(--nav-height) - var(--footer-height));
}

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

.widget-dashboard {
    cursor:pointer;
    min-height: 110px;
    justify-content:center;
}

.widget-dashboard i.ph {
    font-size: 3rem !important;
}

/* Forms */
form {
    margin-bottom: 0px;
}

.form-control {
    background-color: var(--ttn-bg-body);
}

/* Buttons */
a.disabled {
    pointer-events: none;
    color: #ccc;
    background-color: #f9f9f9;
}

.btn {
    border-color: var(--ttn-border);
}

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

.btn-outline-danger {
    border-color: var(--bs-btn-color)
}

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

.btn-outline-primary {
    color: var(--ttn-primary);
    border-color: var(--ttn-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--ttn-primary);
    color: #ffffff;
    border-color: var(--ttn-primary);
}

/* 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: var(--numeric-font);
}

/* 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);
}

/* Select2 — coerenza con il tema */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--ttn-bg-input) !important;
    border-color: var(--ttn-border) !important;
    color: var(--ttn-text-main) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--ttn-text-main) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--ttn-bg-input) !important;
    border-color: var(--ttn-border) !important;
}
.select2-container--bootstrap-5 .select2-results__option {
    color: var(--ttn-text-main) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--ttn-bg-surface) !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--ttn-bg-input) !important;
    border-color: var(--ttn-border) !important;
    color: var(--ttn-text-main) !important;
}

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


/* Tabelle */
.table {
    --bs-table-color: var(--ttn-text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ttn-border);
    --bs-table-striped-bg: rgba(33, 43, 54, 0.03);
    --bs-table-active-bg: rgba(33, 43, 54, 0.05);
    --bs-table-hover-bg: rgba(33, 43, 54, 0.04);
}

[data-bs-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-active-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

/* List Group */
.list-group-item {
    background-color: transparent;
    color: var(--ttn-text-main);
    border-color: var(--ttn-border);
}

/* Filtri e ricerche */
.search-bar input[type="text"] {
    width: 100%;
    padding: 8px;
    border-radius: 5px!important;
}

.search-bar button[type="submit"] {
    position: absolute;
    font-size: 1.25rem;
    top: 2px;
    right: 0;
    background: transparent;
    border: none;
    padding: 8px;
    z-index: 10;
    color: var(--font-color);
}

/* Titoli pagine */
.page-header {
    margin-bottom: -0.25rem;
    color: var(--bs-secondary-color)!important;
    align-items: center;
}

.page-title{
    display: flex !important;
    align-items: center;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 2rem;
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 576px) {
    .page-title {
        align-items: flex-start !important;
    }

}

@media screen and (max-width: 576px) {
    .page-title i.ph {
        display: none;
    }
}

.page-subtitle {
    margin-top: -1.25rem;
    margin-bottom: 1.25rem;
}

/* --- 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;
}

.cursor-pointer {
    cursor: pointer;
}