html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    overflow-y: auto;
}

body {
    /* Unisci le regole per evitare conflitti */
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* Manteniamo il font da LOGIN */
    height: 100%; /* Sostituisci 100vh con 100% per coerenza */
    /* Aggiungi lo sfondo qui */
    /*background: linear-gradient(.25turn, #E1F8FC, 30%, #818CFE);*/
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
        /*overflow-y: hidden;*/
    }
}

/* =================== ONBOARDING =================== */
.onboarding-container {
    height: calc(100vh - 50px); /* Regola l'altezza in base al logo */
    display: flex; /* La chiave per il layout a due colonne */
    /* overflow: hidden; */ /* Rimosso, potrebbe causare problemi */
    background: linear-gradient(.25turn, #E1F8FC, 30%, #818CFE); /* Spostato lo sfondo qui */
}

/* Lo stile per il div del logo */
.logo-container {
    padding: 1rem; /* Margini per il logo */
}

.welcome-content {
    flex-grow: 1;
    flex-basis: 50%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.welcome-image {
    flex-grow: 1;
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

    .welcome-image img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

.onboarding-slide {
    transition: opacity 0.5s ease-in-out;
    width: 100%; /* Importante per un layout corretto */
}

/* Stili per le schermate più piccole (mobile) */
@media (max-width: 992px) {
    .onboarding-container {
        flex-direction: column;
        height: auto;
    }

    .welcome-content {
        order: 1;
        padding: 40px 20px;
        text-align: center;
        align-items: center;
    }

    .welcome-image {
        order: 0;
        height: 350px;
        padding: 20px;
    }
}
/* ================================================== */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.text-orange {
    color: orange !important;
}

/* =================== HOME INDEX =================== */
/* Stili per il contenitore principale */
.welcome-container {
    height: 100vh;
    display: flex; /* Flexbox è la chiave */
    background: linear-gradient(135deg, #e0eafc, #cfdef3);
    overflow: hidden;
}

/* Sezione sinistra: il contenuto testuale */
.welcome-content {
    flex-grow: 1; /* Si espande per riempire lo spazio */
    flex-basis: 50%; /* Parte con il 50% dello spazio, ma è flessibile */
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Sezione destra: l'immagine */
.welcome-image {
    flex-grow: 1; /* Anche questa si espande */
    flex-basis: 50%; /* Inizia con il 50% dello spazio */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Un po' di padding per evitare che l'immagine tocchi i bordi */
}

    .welcome-image img {
        max-width: 100%; /* L'immagine non supera mai la larghezza del suo contenitore */
        height: auto; /* Mantiene le proporzioni */
        object-fit: contain; /* Garantisce che l'immagine non venga tagliata */
        /* Potrebbe servire un'altezza fissa per evitare salti di layout,
       ma in questo caso lasciamo che si ridimensioni con l'altezza del genitore.
    */
        /* Se l'immagine ha bisogno di una dimensione specifica, usa:
       width: 600px;
       max-width: 100%;
    */
    }

/* Media Queries per la responsività */
@media (max-width: 992px) {
    .welcome-container {
        flex-direction: column; /* Le colonne si impilano */
        height: auto;
    }

    .welcome-content {
        order: 1; /* Il contenuto va sotto l'immagine su mobile */
        padding: 40px 20px;
        text-align: center;
        align-items: center;
    }

    .welcome-image {
        order: 0; /* L'immagine va sopra il contenuto */
        height: 350px; /* Diamo un'altezza fissa all'immagine su mobile */
        padding: 20px;
    }

    .cta-buttons {
        flex-direction: column; /* Impila i pulsanti su schermi piccoli */
        width: 100%;
        gap: 10px;
    }
}

.onboarding-controls {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 40px;
}

.indicator-container {
    display: flex;
    justify-content: flex-start; /* Allineato a sinistra come nello screenshot */
    gap: 8px;
    margin-bottom: 30px;
}

.indicator {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #d1d9e6; /* Colore grigio chiaro */
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

    .indicator.active {
        background-color: #818CFE; /* Colore del gradiente */
    }

.navigation-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #e0eafc;
    border: none;
    cursor: pointer;
    color: #818CFE;
    transition: background-color 0.3s ease;
}

    .btn-icon:hover {
        background-color: #cfdef3;
    }

/* Nasconde i pulsanti di navigazione sulle slide non attive */
.onboarding-slide.d-none .onboarding-controls {
    display: none;
}


/* =================== PAGINATION =================== */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav.pagination-container ul {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    list-style: none;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
}

    .pagination li {
        margin: 0 5px;
    }

    .pagination a, .pagination span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        text-decoration: none;
        color: black;
        font-weight: bold;
        font-size: 16px;
        border-radius: 20%;
        transition: background 0.3s ease;
    }

        .pagination a:hover {
            background: rgba(0, 0, 0, 0.1);
            cursor: pointer !important;
        }

    .pagination .active a {
        color: white !important;
        background: black !important;
        border-color: black !important;
    }

        .pagination .active a:hover,
        .pagination .active a:focus {
            background: black !important;
            color: white !important;
        }


/* =================== LOGIN =================== */
/* Layout a due colonne */
body {
    margin: 0;
    height: 100vh;
    font-family: sans-serif;
}
/* NAVBAR */
.topbar {
    height: 60px;
    background: #fff;
    align-items: center;
}

/* CONTENUTO diviso in 2 colonne */
.content {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* Colonna sinistra: login */
/*.left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* Colonna destra: immagine */
/*.right {
    flex: 1;
    background: url('/images/smart-home-with-control-device-1.png') no-repeat;
    background-size: auto;*/ /* riempi tutta la colonna */
/*background-position: 30% center;*/ /* sposta l'immagine più verso il centro (40% dalla sinistra del contenitore) */
/*width: 689px;
    height: 652px;
    opacity: 1;
    margin-top: 123px;
}*/

/* Box login */
.login-box {
    background: transparent;
    padding: 2rem 1.5rem; /* padding top/bottom: 2rem, left/right: 1.5rem */
    width: 100%; /* usa quasi tutto lo spazio disponibile */
    max-width: 500px; /* non superare il mockup */
    min-width: 280px; /* mai troppo stretto su mobile */
    box-sizing: border-box; /* include padding nella larghezza */
    margin: auto; /* centra orizzontalmente */
}


/* =================== LAYOUT =================== */
/* Fix sidebar width and prevent shrinking/growing */
.bg-light.border-end.p-0 {
    flex: 0 0 220px;
    max-width: 220px;
    min-width: 220px;
    min-height: 0;
}

/* Main content flex fill with internal scrolling */
.d-flex.flex-column.flex-grow-1 {
    min-height: 0;
    flex-grow: 1;
    overflow: hidden;
}

main.flex-grow-1.p-3 {
    overflow-y: auto;
    min-height: 0;
}

/* =================== SIDEBAR =================== */
#sidebar {
    width: 220px;
    transition: width 0.3s ease;
    min-height: 100vh;
}

    /* Collapsed sidebar */
    #sidebar.collapsed {
        width: 70px;
    }

        /* Nascondo sempre i testi quando collapsed */
        #sidebar.collapsed .nav-text,
        #sidebar.collapsed .logo-text {
            display: none !important;
        }

        /* Icone centrate e padding ridotto */
        #sidebar.collapsed .nav-link {
            justify-content: center;
            padding: 0.75rem 0;
        }

            /* Rimuovo lo spazio riservato al testo */
            #sidebar.collapsed .nav-link i,
            #sidebar.collapsed .nav-link img {
                margin-right: 0;
            }

/* =================== CONTENT =================== */
#content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

main {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

/* =================== TIPOGRAFIA =================== */
.sizeAccedi {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 72px;
    line-height: 100%;
    letter-spacing: 0.36px;
}

.font-12px {
    font-size: 12px;
}

/* =================== NAVIGATION BAR =================== */
.nav-pills .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: background-color 0.2s ease-in-out;
}

    /* Hover e attivo */
    .nav-pills .nav-link:hover,
    .nav-pills .nav-link.active {
        background-color: #1E3A8A !important;
        color: white !important;
    }

    .nav-pills .nav-link i,
    .nav-pills .nav-link img {
        margin-right: 0.5rem;
    }

/* Style for the hamburger button icon */
#toggle-btn .bi-list {
    color: #1E3A8A !important;
}

.basic-color {
    color: #1E3A8A !important;
}

/*  ================= Header ===================================*/

.app-header {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px; /* 24px padding on left and right */
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0; /* Matches Figma's border color */
    flex-shrink: 0; /* Prevents the header from shrinking */
}

.header-logo img {
    height: 40px; /* Adjust as needed */
    width: auto;
}

.user-profile-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* =================== BACKGROUND IMAGE PLACE DETAILS ============== */

.details-view-container {
    position: relative; /* Establishes a positioning context */
    overflow: hidden; /* Ensures the pseudo-element stays within the bounds */
}

.details-view-container::after {
    content: ''; /* Required for pseudo-elements to show up */
    position: absolute;
    bottom: 20px; /* Position from the bottom */
    right: 20px; /* Position from the right */
    width: 600px; /* Set a width for the image */
    height: 600px; /* Set a height for the image */
    background-image: url('/images/smart-home-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    opacity: 0.2; /* Makes the image faded */
    z-index: 0; /* Places it behind the main content */
    pointer-events: none; /* Prevents the image from being interactive */
}

/* =================== IMMAGINE SFONDO VIEWS =================== */
.background-page-image {
    position: fixed; /* sempre rispetto alla finestra */
    bottom: 0;
    right: 0;
    opacity: 0.2; /* regola a piacere */
    max-width: 600px; /* dimensioni fluide */
    max-height: 600px; /* dimensioni fluide */
    pointer-events: none; /* non blocca i click */
    z-index: 0; /* sta sotto al contenuto */
}

.text-blue {
    color: #1E40AF;
}

/* =================== DETAILS LUOGO =================== */
/* Container principale della view */
.luogo-container {
    min-height: 80vh;
    background-color: #fff;
    position: relative; /* per eventuali elementi assoluti interni */
}

/* Header */
.luogo-header {
    margin-bottom: 1rem;
}

/* Div alert "Nessun dispositivo" */
.luogo-alert {
    background-color: #DBEAFE;
    border-color: #BFDBFE;
    position: relative;
    z-index: 1; /* garantisce che stia sopra eventuale immagine decorativa */
}

/* Card Ambienti / Dispositivi */
.luogo-card {
    position: relative; /* nuovo contesto di stacking */
    z-index: 1;
}

/* Stile base per le card degli ambienti */
/*.ambiente-card {
    min-width: 150px;*/ /* larghezza minima orizzontale */
    /*border: 2px solid transparent;*/ /* bordo trasparente di default */
    /*transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}*/

/*.ambiente-card {
    width: 200px;*/ /* Keep */
    /*height: 120px;*/ /* Keep */
    /*border: 2px solid transparent;*/ /* Keep */
    /*transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;*/ /* Keep */
    /*cursor: pointer;*/ /* Keep */
/*}

.ambiente-card-body {
    display: flex;*/ /* Keep - This makes the body a horizontal flex container */
    /*align-items: center;*/ /* Keep - This vertically centers the icon, text block, and dropdown */
    /*padding: 0.5rem;*/ /* Keep */
/*}

.ambiente-card-icon {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    background-color: white;
    border-radius: 50%;
}*/

    /* Icona immagine dentro la card */
    /*.ambiente-card img {
        height: 24px;
        width: auto;
    }*/

    /* Stato attivo: bordo blu + ombra */
    /*.ambiente-card.active-ambiente {
        border-color: #0d6efd;*/ /* blu Bootstrap */
        /*box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
    }*/

        /* Eventuale icona SVG/Bootstrap dentro la card attiva */
        /*.ambiente-card.active-ambiente .ambiente-icon {
            color: #0d6efd;
        }*/

/* Stile per lucina attivo/disattivo */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

    .status-indicator.bg-success {
        background-color: #28a745; /* verde */
    }

    .status-indicator.bg-danger {
        background-color: #dc3545; /* rosso */
    }

.border-color-blue {
    border-color: #2563EB !important;
}

.bg-primary-custom {
    background-color: #2563EB !important;
}

.bg-elements {
    background-color: #EFF6FF !important;
}

/* =================== IMMAGINE SFONDO - DETAILS LUOGO =================== */
/* Container principale con altezza minima */
.luogo-container {
    min-height: 80vh;
    position: relative; /* per posizionare l'immagine assoluta */
}

/* Immagine decorativa */
.luogo-decorazione {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 900px;
    opacity: 0.2;
    z-index: 0;
}

.main-container {
    display: flex;
    min-height: 100vh;
}

#sidebar {
    width: 240px; /* Width of the expanded sidebar */
    transition: width 0.3s ease-in-out;
    background-color: #f8f9fa; /* Standard light background */
    border-right: 1px solid #dee2e6;
}

    #sidebar.collapsed {
        width: 80px; /* Width when collapsed */
    }

        /* Hide text and adjust alignment when collapsed */
        #sidebar.collapsed .nav-text {
            display: none;
        }

        #sidebar.collapsed .nav-link {
            justify-content: center;
        }

#content {
    flex-grow: 1; /* This is key: makes the content area fill the remaining space */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allows content to scroll correctly */
}

main {
    flex-grow: 1;
    overflow-y: auto; /* Allows only the main content area to scroll */
}

.device-card.focused-card {
    z-index: 10;
}

/* === AMBIENTE CARD LAYOUT === */
.ambiente-card {
    position: relative;
    height: 100%;
}

.ambiente-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    position: relative;
}

.ambiente-filter {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.ambiente-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.ambiente-card-text-wrapper {
    align-self: center;
    display: flex; /* Aggiungi questo */
    flex-direction: column; /* Aggiungi questo per impilare */
    justify-content: center; /* Aggiungi questo per centrare verticalmente */
}

.ambiente-card-text-wrapper p,
.ambiente-card-text-wrapper small {
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.ambiente-card-menu {
    /*position: absolute;
    top: 6px;
    right: 8px;*/
    flex-shrink: 0;
}

.ambiente-card-menu > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.card.luogo-card.device-card {
    overflow: visible; /* allow dropdown to escape the card */
}

.device-card .dropdown-menu {
    z-index: 1055; /* higher than card and modals */
}

/* === Device Details Button === */

.icon-button-wrapper {
    display: flex;  
    flex-direction: column;  
    align-items: center; 
    text-align: center;
}

.icon-button {
    width: 60px;  
    height: 60px;
    border-radius: 50%;   
    display: flex; 
    align-items: center;
    justify-content: center;
    border: 2px solid;   
    background-color: transparent;  
    padding: 0; 
    margin-bottom: 0.5rem;  
    transition: background-color 0.2s, color 0.2s;  
}*

.icon-button i {
    font-size: 1.5rem; /* Size of the icon */
    line-height: 1; /* Ensure icon is centered */
}

/* Specific colors (adjust as needed) */
.icon-button.btn-outline-success {
    border-color: #198754;
    color: #198754;
}

.icon-button.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}

.icon-button.btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}

.icon-button.btn-outline-warning {
    border-color: #ffc107;
    color: #ffc107;
}

.icon-button:hover {
    color: #fff; /* White icon on hover */
}

.icon-button.btn-outline-success:hover {
    background-color: #198754;
}

.icon-button.btn-outline-danger:hover {
    background-color: #dc3545;
}

.icon-button.btn-outline-primary:hover {
    background-color: #0d6efd;
}

.icon-button.btn-outline-warning:hover {
    background-color: #ffc107;
}

/* ===  SENSITIVITY BUTTONS === */

.sensitivity-button-group .btn {
    border-radius: 30px;  Fully rounded ends like Figma 
    border-color: #D1D5DB;  Light gray border 
    color: #3B82F6;  Blue text 
    background-color: #FFFFFF;  White background 
    padding: 10px 20px;  Adjust padding as needed 
    margin: 0 5px;  Add some space between buttons 
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

 Style for the ACTIVE button 
.sensitivity-button-group .btn.btn-sensitivity-active {
    background-color: #EFF6FF !important;  Light blue background like Figma 
    border-color: #2563EB !important;  Darker blue border like Figma 
    color: #1E40AF !important;  Darker blue text 
    font-weight: bold;
}

 Optional: Hover effect for inactive buttons 
.sensitivity-button-group .btn:not(.btn-sensitivity-active):hover {
    background-color: #F9FAFB;  Very light gray on hover 
    border-color: #9CA3AF;
}

.static-display {
    pointer-events: none;
}