@import 'layout_custom_color.css';

/* Menu principale responsive */
.menubarra {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: var(--sfondo-barra);
}

/* Sottomenu responsive */
.submenubarra {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  background-color: var(--subbarra-sfondo);
  border-top: 8px solid var(--subbarra-button-over);
  

}

/* Media query per dispositivi mobili */
@media screen and (max-width: 768px) {
  .responsive-menu {
    flex-direction: column;
  }
  
  .responsive-submenu {
    flex-direction: column;
    padding: 5px;
  }
}

.menubarra .sx {
  float: left;
  margin: 0px;
}

.menubarra .dx:first-of-type {
  margin-left: auto;
}

.menubarra .dx {
  margin-right: 0px;
}

/* label.pulsante serve per chi ha elimina nella barra */
.menubarra a,
.menubarra label.pulsante,
.menubarra input.pulsante,
.menubarra button.pulsante {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

.menubarra input.pulsante {
  border: none;
  background-color: var(--sfondo-barra);
}

.menubarra select.login {
  color: white;
  height: 43px;
  background-color: var(--sfondo-barra);
  padding: 0px 0px 0px 1px;
  border: 0px;
  text-align: left;
}


.menubarra a.attivo,
.menubarra a:hover,
.menubarra .pulsante:hover {
  background-color: var(--button-over);
}


.menubarra input[type=search] {
  border: 1px solid var(--button-over);
  border-radius: 6px;
  background-color: white;
  background-image: url('images/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  margin: 0px 5px;
  padding: 12px 20px 12px 40px;
}

.menubarra input[type=date] {
  border: 2px solid var(--button-over);
  border-radius: 6px;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  margin: 0px 5px;
  padding: 12px 20px 12px 40px;
  height: 15px;
}

/* barra di ricerca per gli esempi */
.menubarra datalist { display: none; }

/* Seleziona Colonne */
.menubarra  .dropbtn {
    cursor: pointer;
    background-color: var(--sfondo-barra);
    border: none;
    color: white;
    padding: 14px 16px;
    
  }

.menubarra  .dropbtn:hover {
  background-color: var(--button-over);
}

/* Sblocca il contenitore */
.vertical-menu {
  height: auto !important;
  overflow: visible !important;
  display: block !important;
  
  border-radius: 5px;
}

/* Stile verticale per i link */
.vertical-menu a {
  display: block !important;
  text-align: center;
  text-decoration: none;

  border-radius: 4px;
  font-weight: bold;
}




/* pulsanti dei comandi */
.menupulsante {  text-align: center;}

.menupulsante input.pulsante,
.menupulsante button.pulsante,
.menupulsante label.pulsante {
  color: white;
  border: none;
  background: var(--sfondo-barra);
  font-size: 14px;
  padding: 14px 16px;
  margin: 0px 20px 0px 20px;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
  width: auto;
}

.menupulsante .pulsante:hover {
  background-color: var(--button-over);
}

.menupulsante .disable:hover {
  background-color: var(--sfondo-barra);
}

.submenubarra2 {
  
  background-color: var(--subbarra-sfondo);
  border-top: 8px solid var(--subbarra-button-over);
  overflow: hidden;
}

/* label.pulsante serve per chi ha elimina nella barra */
.submenubarra a,
.submenubarra label.pulsante {
  display: inline-block;
  color: var(--subbarra-text-color);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


.submenubarra .sx {
  float: left;
  margin: 0px;
}


.submenubarra a.attivo,
.submenubarra a:hover,
.submenubarra .pulsante:hover {
  background-color: var(--subbarra-button-over);
  font-weight: bold;
  
}

.sx.home, .sx.left-arrow {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 22px 22px 22px 22px;
      /* Padding iniziale */
    background-color: transparent; /* Sfondo iniziale */
    box-sizing: border-box; /* Assicura che padding e bordo siano inclusi nelle dimensioni */
    width: 64px;
}


.sx.home::before  {
    content: ''; 
    display: inline-block;
    position: absolute; /* Rimuove dal flusso del layout, evita di spingere il submenu */
    width: 20px; /* Larghezza dell'icona */
    height: 20px; /* Altezza dell'icona */
    background: url('/static/img/icon_home.svg') no-repeat center;
}

.left-arrow::before {
    content: ''; 
    display: inline-block;
    position: absolute; /* Rimuove dal flusso del layout, evita di spingere il submenu */
    width: 20px; /* Larghezza dell'icona */
    height: 20px; /* Altezza dell'icona */

    background: url('/static/img/icon_left-arrow.svg') no-repeat center;

    
}


/* Popup azione: regole per il popup (variante senza la classe `menubarra`) */

/* Variante senza la classe `menubarra`: quando il popup non eredita la classe principale */
.action-popup.vertical-menu {
  width: auto !important;
  min-width: 140px;
  max-width: 360px;
  display: inline-block !important;
  padding: 6px !important;
}

.action-popup.vertical-menu {
  height: auto !important;
  overflow: visible !important;
}

.action-popup.vertical-menu a {
  display: block !important;
  text-align: left;
  padding: 8px 12px;
  background-color: var(--sfondo-barra);
  font-weight: 600;
  /* stesso colore dei link nella menubarra */
  color: white !important;
  border-radius: 4px;
  white-space: nowrap;
}

.action-popup.vertical-menu a:hover {
  background: var(--button-over, #eee);
}

@media screen and (max-width: 600px) {
  .action-popup.vertical-menu {
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 12px !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    border-radius: 8px;
  }

  .action-popup.vertical-menu a {
    text-align: center;
    padding: 12px 8px;
  }
}