* {
  box-sizing: border-box; 
}

#background-overlay {
  position: fixed; /* imposta il metodo di posizionamento dell'elemento */
  top: 0; /* distanza dal bordo superiore del contenitore */
  left: 0; /* distanza dal bordo sinistro del contenitore */
  width: 100%; /* larghezza dell'elemento */
  height: 100%; /* altezza dell'elemento */
  z-index: -1; /* livello di sovrapposizione rispetto ad altri elementi */
  background-size: cover; /* modalità di ridimensionamento dello sfondo */
  background-position: center; /* posizione dell'immagine di sfondo */
  background-repeat: no-repeat; /* se e come ripetere lo sfondo */
  transition: opacity 0.8s ease-in-out; /* animazione fluida tra stati */
  pointer-events: none; /* gestione dell'interazione con il mouse */
  opacity: 1; /* livello di trasparenza */
  background-image: url('../background.jpg'); /* immagine chiara di default */ 
}

body.dark-theme #background-overlay {
  background-image: url('../background-dark.jpg'); /* immagine scura */ 
}


body.light-theme  {
  background-image: url('../background.jpg'); 
  background-size: cover; /* modalità di ridimensionamento dello sfondo */
  background-position: center; /* posizione dell'immagine di sfondo */
  background-repeat: no-repeat; /* se e come ripetere lo sfondo */
}

body.dark-theme {
  background-image: url('../background-dark.jpg'); 
  background-size: cover; /* modalità di ridimensionamento dello sfondo */
  background-position: center; /* posizione dell'immagine di sfondo */
  background-repeat: no-repeat; /* se e come ripetere lo sfondo */
  color: white; /* o il colore che preferisci */ /* colore del testo */
}

#preloader {
  position: fixed; /* imposta il metodo di posizionamento dell'elemento */
  top: 0; /* distanza dal bordo superiore del contenitore */
  left: 0; /* distanza dal bordo sinistro del contenitore */
  width: 100%; /* larghezza dell'elemento */
  height: 100%; /* altezza dell'elemento */
  background: black; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  justify-content: center; /* allineamento orizzontale degli elementi flessibili */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  z-index: 9999; /* livello di sovrapposizione rispetto ad altri elementi */
  flex-direction: column; /* direzione di disposizione degli elementi flessibili */
  transition: opacity 0.3s ease; /* animazione fluida tra stati */
}

.preloader-content {
  display: flex; /* tipo di visualizzazione dell'elemento */
  flex-direction: column; /* direzione di disposizione degli elementi flessibili */
  align-items: center; /* allineamento verticale degli elementi flessibili */
}

.preloader-logo {
  width: 200px; /* larghezza dell'elemento */
  height: auto; /* altezza dell'elemento */
  margin-bottom: 5px; 
  filter: brightness(1.1); 
}

.loading-bar {
  width: 250px; /* larghezza dell'elemento */
  height: 7px; /* altezza dell'elemento */
  background: #444; 
  border-radius: 10px; /* arrotondamento degli angoli */
  overflow: hidden; /* gestione del contenuto eccedente */
}

.loading-fill {
  width: 0; /* larghezza dell'elemento */
  height: 100%; /* altezza dell'elemento */
  background: white; 
  animation: fillBar 4s ease forwards; 
}

@keyframes fillBar {
  to {
    width: 100%; /* larghezza dell'elemento */
  }
}

.creator-text {
  color: white; /* colore del testo */
  margin-top: 20px; 
  font-size: 16px; /* dimensione del testo */
  font-family: sans-serif; /* tipo di carattere */
  opacity: 0; /* livello di trasparenza */
  animation: fadeIn 1s ease-in forwards; 
  animation-delay: 0.5s; 
}

@keyframes fadeIn {
  to {
    opacity: 1; /* livello di trasparenza */
  }
}


body {
  margin: 0; /* spazio esterno all'elemento */
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background-image: url('../background.jpg'); 
  background-size: cover; /* modalità di ridimensionamento dello sfondo */
  color: black; /* colore del testo */
  user-select: none; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  flex-direction: column; /* direzione di disposizione degli elementi flessibili */
  height: 100vh; /* altezza dell'elemento */
}

.header {
  flex-shrink: 0; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  justify-content: space-between; /* allineamento orizzontale degli elementi flessibili */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  padding: 10px 20px; /* spazio interno all'elemento */
  background: #bfcad450; 
  font-weight: bold; 
  font-size: 20px; /* dimensione del testo */
}

.main {
  flex: 1; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  overflow: hidden; /* gestione del contenuto eccedente */
  padding-top: 50px; /* spazio sotto la topbar */ 
}

.sidebar {
  position: fixed; /* imposta il metodo di posizionamento dell'elemento */
  top: calc(30px + ((100vh - 30px - 70px) / 2)); /* 30px topbar, 70px footer */ /* distanza dal bordo superiore del contenitore */
  left: 5px; /* distanza dal bordo sinistro del contenitore */
  transform: translateY(-50%); /* centra il blocco rispetto al punto calcolato */ 
  display: flex; /* tipo di visualizzazione dell'elemento */
  flex-direction: column; /* direzione di disposizione degli elementi flessibili */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  gap: 20px; /* spazio tra gli elementi */
  padding: 15px 10px; /* spazio interno all'elemento */
  background: rgba(255, 255, 255, 0.15); 
  border-radius: 15px; /* arrotondamento degli angoli */
  backdrop-filter: blur(12px); /* effetto grafico di sfocatura dello sfondo */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* ombra dell'elemento */
  z-index: 10; /* livello di sovrapposizione rispetto ad altri elementi */
}


.sidebar button {
  width: 50px; /* larghezza dell'elemento */
  height: 50px; /* altezza dell'elemento */
  border-radius: 15px; /* arrotondamento degli angoli */
  border: none; 
  background: #ffffffd0; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  justify-content: center; /* allineamento orizzontale degli elementi flessibili */
  transition: all 0.2s ease; /* animazione fluida tra stati */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* ombra dell'elemento */
  padding: 0; /* spazio interno all'elemento */
  cursor: pointer; /* tipo di cursore del mouse */
}

.sidebar button i {
  font-size: 18px; /* dimensione del testo */
}

.sidebar button[data-id="ALL"] {
  font-size: 12px; /* dimensione del testo */
}

.sidebar button:hover i { 
  transform: scale(1.2); 
}

.sidebar .active {
  box-shadow: 0 0 0 4px #00d34c inset; /* ombra dell'elemento */
  background: #00d34c; 
}

@keyframes blink {
  0%, 100% { background-color: #00d34c; } 
  50% { background-color: #ffffff; } 
}

.sidebar button.blinking {
  animation: blink 1s infinite; 
}

.content {  
  flex: 1; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  flex-wrap: nowrap; 
  justify-items: center; 
  align-items: center; /* allineamento verticale degli elementi flessibili */
  padding: 20px; /* spazio interno all'elemento */
  padding-left: 100px; 
  overflow-y: hidden; /* gestione dell'overflow verticale */
  scrollbar-width: none; /* larghezza della scrollbar (Firefox) */
  transition: all 0.5s ease; /* animazione fluida tra stati */
}

.content.hidden {
  flex: 0 0 0; 
  max-width: 0; 
  overflow: hidden; /* gestione del contenuto eccedente */
  opacity: 0; /* livello di trasparenza */
  pointer-events: none; /* gestione dell'interazione con il mouse */
}


.mainPanel {
  flex: 1; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  flex-direction: row; /* direzione di disposizione degli elementi flessibili */
  max-width: 100%; 
  max-height: 100%; 
  height: 100%; /* altezza dell'elemento */
  background: rgba(255, 255, 255, 0.3); 
  border-radius: 10px; /* arrotondamento degli angoli */
  backdrop-filter: blur(5px); /* effetto grafico di sfocatura dello sfondo */
  transition: opacity 0.4s ease, transform 0.4s ease; /* animazione fluida tra stati */
}

.content.hide .mainPanel {
  opacity: 0; /* livello di trasparenza */
  transform: scale(0.95); 
}

.panel {
  flex: 1; 
  padding: 10px;      /* padding interno normale */ /* spazio interno all'elemento */
  min-width: 250px; 
  max-width: 100%; 
  overflow-y: auto; /* gestione dell'overflow verticale */
  scrollbar-width: none; /* larghezza della scrollbar (Firefox) */
}

.yDivider {
  background-color: #35353585; 
  height: 90%; /* altezza dell'elemento */
  width: 3px; /* larghezza dell'elemento */
  margin: 10px; /* spazio esterno all'elemento */
  align-self: center; 
}

.setting-button {
  display: flex; /* tipo di visualizzazione dell'elemento */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  gap: 12px; /* spazio tra gli elementi */
  margin: 10px; /* spazio esterno all'elemento */
  background: rgba(255, 255, 255, 0.2); /* semitrasparente */ 
  padding: 10px 15px; /* spazio interno all'elemento */
  border-radius: 12px; /* arrotondamento degli angoli */
  cursor: pointer; /* tipo di cursore del mouse */
}

.setting-button .setting-icon {
  width: 28px; /* larghezza dell'elemento */
  height: 28px; /* altezza dell'elemento */
  fill: white; 
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.3)); 
}

/* Stato selezionato */
.setting-button.active {
  background: rgba(0, 211, 76, 0.3); 
  box-shadow: 0 0 6px #00d34c80 inset; /* ombra dell'elemento */
}


.option {
  margin: 10px; /* spazio esterno all'elemento */
  border-radius: 12px; /* arrotondamento degli angoli */
  display: flex; /* tipo di visualizzazione dell'elemento */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  justify-content: space-between; /* allineamento orizzontale degli elementi flessibili */
  background: #fff4; 
  padding: 10px; /* spazio interno all'elemento */
}

.option i {
  margin-right: 10px; 
}

.option button {
  background: #888; 
  color: white; /* colore del testo */
  border: none; 
  padding: 5px 10px; /* spazio interno all'elemento */
  border-radius: 5px; /* arrotondamento degli angoli */
  cursor: pointer; /* tipo di cursore del mouse */
}

.footer {
  flex-shrink: 0; 
  display: flex; /* tipo di visualizzazione dell'elemento */
  justify-content: center; /* allineamento orizzontale degli elementi flessibili */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  background: #bfcad450; 
  padding: 10px; /* spazio interno all'elemento */
  gap: 10px; /* spazio tra gli elementi */
  flex-wrap: wrap; 
}

.footer button {
  width: 50px; /* larghezza dell'elemento */
  height: 50px; /* altezza dell'elemento */
  border-radius: 10px; /* arrotondamento degli angoli */
  border: none; 
  background: #e1e5e9; 
  font-size: 16px; /* dimensione del testo */
  display: flex; /* tipo di visualizzazione dell'elemento */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  justify-content: center; /* allineamento orizzontale degli elementi flessibili */
  gap: 5px; /* spazio tra gli elementi */
  cursor: pointer; /* tipo di cursore del mouse */
}

.footer button i {
  font-size: 18px; /* dimensione del testo */
}

.footer .active {
  background: #00d34c; 
}

.topbar {
  position: fixed; /* imposta il metodo di posizionamento dell'elemento */
  top: 0; /* distanza dal bordo superiore del contenitore */
  left: 0; /* distanza dal bordo sinistro del contenitore */
  width: 100%; /* larghezza dell'elemento */
  height: 30px; /* altezza dell'elemento */
  display: flex; /* tipo di visualizzazione dell'elemento */
  justify-content: space-between; /* allineamento orizzontale degli elementi flessibili */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  padding: 0 20px; /* spazio interno all'elemento */
  background: rgba(255, 255, 255, 0.15); 
  backdrop-filter: blur(10px); /* effetto grafico di sfocatura dello sfondo */
  font-weight: bold; 
  font-size: 16px; /* dimensione del testo */
  color: white; /* colore del testo */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* ombra dell'elemento */
  z-index: 100; /* livello di sovrapposizione rispetto ad altri elementi */
}

.topbar-left {
  font-size: 16px; /* dimensione del testo */
}

#contentArea {
  opacity: 1; /* livello di trasparenza */
  transform: scale(1); 
  transition: opacity 0.4s ease, transform 0.4s ease; /* animazione fluida tra stati */
  will-change: opacity, transform; 
}

#contentArea.hiding {
  opacity: 0; /* livello di trasparenza */
  transform: scale(0.95); 
  pointer-events: none; /* gestione dell'interazione con il mouse */
}

#contentArea.hidden {
  display: none; /* tipo di visualizzazione dell'elemento */
}

.main-flex-container {
  display: flex; /* tipo di visualizzazione dell'elemento */
  width: 100%; /* larghezza dell'elemento */
  height: 100%; /* altezza dell'elemento */
}

#scheduleContent {
  overflow-y: auto; /* gestione dell'overflow verticale */
  max-height: 100%; 
  padding-right: 8px; 
  -ms-overflow-style: none;  /* IE/Edge */ 
  scrollbar-width: none;     /* Firefox */ /* larghezza della scrollbar (Firefox) */
}


.scheduleWindow {
  width: 300px; /* o meno se preferisci */ /* larghezza dell'elemento */
  max-width: 30%; 
  min-width: 200px; 
  background: var(--bg-secondary); 
  border-left: 1px solid var(--border-color); 
  overflow-y: auto; /* gestione dell'overflow verticale */
  transition: all 0.3s ease; /* animazione fluida tra stati */
  margin-left: 40px; 
}


.schedule-window {
  position: fixed; /* imposta il metodo di posizionamento dell'elemento */
  top: 60px; /* distanza dal bordo superiore del contenitore */
  left: 50%; /* distanza dal bordo sinistro del contenitore */
  transform: translateX(-50%) scale(0.95); 
  opacity: 0; /* livello di trasparenza */
  pointer-events: none; /* gestione dell'interazione con il mouse */
  z-index: 100; /* livello di sovrapposizione rispetto ad altri elementi */
  background: rgba(255, 255, 255, 0.2); 
  border-radius: 15px; /* arrotondamento degli angoli */
  backdrop-filter: blur(10px); /* effetto grafico di sfocatura dello sfondo */
  padding: 20px; /* spazio interno all'elemento */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* ombra dell'elemento */
  max-width: 500px; 
  width: 80%; /* larghezza dell'elemento */
  transition: opacity 0.4s ease, transform 0.4s ease; /* animazione fluida tra stati */
}

.schedule-window.show {
  opacity: 1; /* livello di trasparenza */
  transform: translateX(-50%) scale(1); 
  pointer-events: auto; /* gestione dell'interazione con il mouse */
}

.schedule-event {
  padding: 8px 12px; /* spazio interno all'elemento */
  margin: 6px 0; /* spazio esterno all'elemento */
  border-radius: 8px; /* arrotondamento degli angoli */
  font-weight: bold; 
  transition: background-color 0.4s ease; /* animazione fluida tra stati */
}

.schedule-event.past {
  background-color: #837f7881; /* grigio chiaro */ 
  color: #ffffff; /* colore del testo */
}

.schedule-event.now {
  background-color: #66c483; /* verde evidenziato */ 
  color: #ffffff; /* colore del testo */
}

.schedule-event.future {
  background-color: #6392ae; /* semitrasparente */ 
  color: #ffffff; /* colore del testo */
}

body.dark-theme .schedule-event.past {
  background-color: #837f7881; 
  color: #ffffff; /* colore del testo */
}

body.dark-theme .schedule-event.now {
  background-color: #66c483; 
  color: #ffffff; /* colore del testo */
}

body.dark-theme .schedule-event.future {
  background-color: #6392ae; 
  color: #ffffff; /* colore del testo */
}

.main-flex-container {
  display: flex; /* tipo di visualizzazione dell'elemento */
  flex-direction: row-reverse; /* direzione di disposizione degli elementi flessibili */
  flex: 1; 
  width: 100%; /* larghezza dell'elemento */
  height: 100%; /* altezza dell'elemento */
  transition: all 0.3s ease; /* animazione fluida tra stati */
}

#scheduleWindow {
  flex: 0 0 0; 
  max-width: 0; 
  overflow: hidden; /* gestione del contenuto eccedente */
  opacity: 0; /* livello di trasparenza */
  transform: scale(0.95); 
  transition: all 0.4s ease; /* animazione fluida tra stati */
  pointer-events: none; /* gestione dell'interazione con il mouse */
}

#scheduleWindow.show {
  flex: 0 0 300px; 
  max-width: 300px; 
  opacity: 1; /* livello di trasparenza */
  transform: scale(1); 
  pointer-events: auto; /* gestione dell'interazione con il mouse */
  display: flex; /* tipo di visualizzazione dell'elemento */
  flex-direction: column; /* direzione di disposizione degli elementi flessibili */
  background: rgba(255, 255, 255, 0.3); 
  border-radius: 10px; /* arrotondamento degli angoli */
  backdrop-filter: blur(5px); /* effetto grafico di sfocatura dello sfondo */
  padding: 20px; /* spazio interno all'elemento */
  margin: 20px; /* spazio esterno all'elemento */
}

#scheduleWindow.hidden {
  flex: 0 0 0; 
  max-width: 0; 
  opacity: 0; /* livello di trasparenza */
  pointer-events: none; /* gestione dell'interazione con il mouse */
}


#autoModeToggle {
  margin-bottom: 10px; 
  background: #00d34c; 
  border: none; 
  color: white; /* colore del testo */
  padding: 8px 12px; /* spazio interno all'elemento */
  border-radius: 10px; /* arrotondamento degli angoli */
  cursor: pointer; /* tipo di cursore del mouse */
}


.topbar-right {
  display: flex; /* tipo di visualizzazione dell'elemento */
  align-items: center; /* allineamento verticale degli elementi flessibili */
  gap: 12px; /* spazio tra gli elementi */
}

.topbar-right svg {
  margin-left: 1px; 
  height: 20px; /* altezza dell'elemento */
  width: 20px; /* larghezza dell'elemento */
  fill: white; 
}

.battery-icon {
  width: 28px !important; /* larghezza dell'elemento */
  height: 28px !important; /* altezza dell'elemento */
  fill: white; 
  vertical-align: middle; 
  margin-left: 10px; 
}

.topbar-right img {
  height: 20px; /* altezza dell'elemento */
  width: auto; /* larghezza dell'elemento */
  filter: brightness(1.2); 
}

#clock {
  font-size: 14px; /* dimensione del testo */
  font-weight: normal; 
}

#background-container {
  position: fixed; /* imposta il metodo di posizionamento dell'elemento */
  top: 0; /* distanza dal bordo superiore del contenitore */
  left: 0; /* distanza dal bordo sinistro del contenitore */
  width: 100%; /* larghezza dell'elemento */
  height: 100%; /* altezza dell'elemento */
  z-index: -2; /* livello di sovrapposizione rispetto ad altri elementi */
  overflow: hidden; /* gestione del contenuto eccedente */
}

.background-layer {
  position: absolute; /* imposta il metodo di posizionamento dell'elemento */
  width: 100%; /* larghezza dell'elemento */
  height: 100%; /* altezza dell'elemento */
  background-size: cover; /* modalità di ridimensionamento dello sfondo */
  background-position: center; /* posizione dell'immagine di sfondo */
  background-repeat: no-repeat; /* se e come ripetere lo sfondo */
  transition: opacity 0.8s ease-in-out; /* animazione fluida tra stati */
  opacity: 0; /* livello di trasparenza */
  pointer-events: none; /* gestione dell'interazione con il mouse */
}

#bg1 {
  opacity: 1; /* livello di trasparenza */
}

body, .header, .topbar, .footer, .content, .mainPanel, .sidebar,
.setting-button, .option, .option button, .topbar-right svg, .battery-icon {
  transition: background-color 0.4s ease, color 0.4s ease, fill 0.4s ease; /* animazione fluida tra stati */
}