/* Per Chrome, Edge e Safari */
::-webkit-scrollbar {
  width: 2px;              /* larghezza barra verticale */
  height: 2px;             /* altezza barra orizzontale */
}

::-webkit-scrollbar-track {
  background: #f0f0f0;      /* colore dello sfondo della traccia */
}

::-webkit-scrollbar-thumb {
  background-color: green;  /* colore della barra */
  border-radius: 6px;       /* arrotondamento */
  border: 2px solid #f0f0f0; /* spazio attorno */
}

/* Per Firefox */
* {
  scrollbar-width: thin;          /* spessore: auto | thin | none */
  scrollbar-color: green #f0f0f0; /* barra verde su sfondo grigio chiaro */
}


  :root{
    --body-font: #333;
    --sidebar-width: 280px;
    --bg: #ffffff;
    --accent: #323555; /* Microsoft blue */
    --muted: #6b6b6b;
    --surface: #f3f6f9;
    --shadow: 0 8px 24px rgba(15,23,42,0.08);
    --radius: 10px;
  }

:root{
  --bg-main: #f3f4f6;
  --bg-nav: rgba(255,255,255,0.7);
  --bg-toolbar: rgba(255,255,255,0.75);
  --bg-status: rgba(255,255,255,0.6);
  --border-color: rgba(0,0,0,0.1);
  --hover-bg: rgba(0,0,0,0.05);
  --accent: #2563eb;
  --text-color: #1e1e1e;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --blur: blur(12px);
  --color-emec: #088a2b;
  --color-emec-over: #ff8a2b;
}



  /* Basic reset */
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg,#f5f7fb 0%, #ffffff 100%);
    min-height:100vh;
    color: var(--body-font);
    display: flex;

    background: var(--bg-main);
    color: var(--text-color);
    height:100vh;
    display:flex;
    flex-direction:column;

    /*padding-right:var(--sidebar-width);*/ /* leave space for sidebar */
  
  }


    .hamburger {
      font-size: 1.5rem;
      cursor: pointer;
      margin-right: 1rem;
      user-select: none;
    }

    .logo {
      font-weight: bold;
    }

.footer{
      position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px;
      height: 20px;
      background:#ccc;

}


    /* Contenuto principale */
    .main-content {
      flex: 1;
      margin-left: 300px;
      margin-right:0px;
      padding: 50px 5px 0px 5px;
      transition: margin-left 0.3s ease;
      width: 100%;
      overflow-x: hidden;
    }

    .main-content.expanded {
      margin-left: 0;
    }

    .search-bar {
      position: sticky;
      top:0px;
      background: white;
      padding: 1rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      display: flex;
      gap: 0.5rem;
      border-radius: 10px;
      margin-bottom: 1rem;
      overflow:hidden;
    }

    .search-bar input[type="text"] {
      flex: 1;
      padding: 0.8rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .search-bar button {
      padding: 0.8rem 1.5rem;
      font-size: 1rem;
      background: #27ae60;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .search-bar button:hover {
      background: #219150;
    }

    .cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
      gap: 1rem;
    }

    .card {
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    h2 {
      margin-top: 0;
      color: #2c3e50;
    }

    .phase {
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 0;
      border-bottom: 1px solid #eee;
    }

    .completed { color: green; font-weight: bold; }
    .in-progress { color: orange; font-weight: bold; }
    .pending { color: #aaa; }
    .fail { color: #9c1e1e; }


    table {
  border-collapse: collapse;
  width: 100%;
  font-size:0.8em;
}

th, td {
  border: 1px solid #ccc;
  padding: 4px;
  text-align: left;
}

/* Riga pari */
tbody tr:nth-child(even) {
  background-color: #f0eded;
}

/* Riga dispari (opzionale, se vuoi un altro colore diverso dal bianco) */
tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
td.centered {
  text-align: center;        /* centra in orizzontale */
  vertical-align: middle;    /* centra in verticale */
}
.icon-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMjhkNTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0xLjQxIDE0LjU5bC02LjE4LTYuMTggMS40MS0xLjQxbDQuNzcgNC43NyA4LjM0LTguMzQgMS40MSAxLjQxLTEwLjM1IDEwLjM1eiIvPjwvc3ZnPg==') no-repeat center;
  background-size: contain;
}

.icon-cross {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZDIxMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTQuNTkgMTUuNDRMMTIgMTIuODMgNy40MSAxNy40MiA2IDYuNTkgMTAuNTkgMTIgNiAxNi41OSA3LjQxIDE4IDEyIDEzLjQxIDE2LjU5IDE4IDE3LjQxIDEyIDEyLjgzIDE2LjU5IDE3LjQxeiIvPjwvc3ZnPg==') no-repeat center;
  background-size: contain;
}


#skeleton{border:0px;}

#skeleton tr{padding:5px;border:0px;}

#skeleton tr:nth-child(odd) .skeleton-cell {
  height: 15px;
  border:0px;
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
  padding:1px;
  margin:1px;
}

#skeleton tr:nth-child(even) .skeleton-cell {
  height: 15px;
  border:0px;
  padding:1px;
  margin:1px;  
}


@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}







/* NAVBAR */
.navbar {
  position: fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  backdrop-filter: var(--blur);
  background: var(--bg-nav);
  border-bottom:1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  user-select:none;
  z-index:10001;
}

.menu-bar {
  display:flex;
  gap:16px;
  padding:4px 16px;
  background:#088a2b; /*   #97c9a5;*/
  
}

.menu-bar .menu-item.logout {
    margin-left: auto;   /* spinge tutto a destra */
}


.menu-bar button{color:#dedede;}
.dropdown button{color:#495d4e;}

.menu-item { position: relative; height:26px;}
.menu-item > button {
  background:none; border:none;
  font-size:14px; padding:4px 6px;
  cursor:pointer; border-radius:6px;
  /*transition: background 0.2s;*/
}
.menu-item > button:hover { background: var(--hover-bg); }

.dropdown {
  display:none; flex-direction:column;
  position:absolute; top:28px; left:0;
  min-width:160px; background:#ffffffd8;
  border:1px solid var(--border-color); border-radius:8px;
  box-shadow: var(--shadow); backdrop-filter: var(--blur); z-index:10001;
}
.dropdown.right {left: auto; right:0px;}
.dropdown button {
  background:none; border:none; text-align:left;
  padding:8px 12px; width:100%; font-size:14px; cursor:pointer;
}
.dropdown button:hover { background: var(--hover-bg); }
.menu-item.active .dropdown { display:flex; }

.icon-bar {
  display:flex; gap:4px; padding:4px 7px;
  background: var(--bg-toolbar);
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
  backdrop-filter: var(--blur);
}
.icon-bar button {
  background:#ffffffcc; border:1px solid #fff;
  border-radius:8px; padding:8px; cursor:pointer;color:#088a2b;
  transition: all 0.2s ease;font-size: 0.9rem;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.icon-bar button:hover { border:1px solid var(--border-color);background: var(--hover-bg);color:#ff8a2b;}

.menu-bar .menu-item i { font-size:0.8rem; color:#ffffff; }
.menu-bar .menu-item i:hover{color:var(--color-emec-over)}

.icon-bar i{color:var(--color-emec)}
.icon-bar i:hover{color:var(--color-emec-over)}

.dropdown button i { font-size:0.8rem; color:#009900 !important; }
.menu-bar button i:hover{color:var(--color-emec-over)}

/* SIDEBAR */




.sidebar {
  position: fixed;
  top:95px; /* sotto navbar */
  left:0;
  height: calc(100% - 85px - 42px); /* meno navbar e status bar */
  width:300px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: var(--blur);
  border-right:1px solid var(--border-color);
  box-shadow:2px 0 8px rgba(0,0,0,0.1);
  overflow-y:auto;
  transition: width 0.3s ease;
  z-index:90;
}
.sidebar.compact { width:60px; }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar li { position:relative; }
.sidebar button {
  width:100%; display:flex; align-items:center; gap:12px;
  border:none; background:none; cursor:pointer;
  padding:12px 20px; font-size:15px; color: var(--text-color);
  transition: background 0.2s;
}
.sidebar ul li span{font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:0.8rem;color:#14500c;}
.sidebar ul li div button{font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:0.8rem;color:#14500c;padding:6px 10px;}
.sidebar button:hover { background: var(--hover-bg);}
.sidebar i { width:20px; text-align:center; }

.submenu {
  display:none; flex-direction:column; padding-left:40px;
  background: rgba(255,255,255,0.6);
  transition: max-height .28s cubic-bezier(.2,.9,.3,1), opacity .18s;
}
.sidebar li.open .submenu { display:flex; }
.sidebar.compact li span { display:none; }
.sidebar.compact li:hover .submenu {
  display:flex; position:absolute; top:0; left:70px;
  background: rgba(255,255,255,0.9); border:1px solid var(--border-color);
  border-radius:6px; box-shadow: var(--shadow); padding-left:0;
  z-index:100;
}

/* OVERLAY MOBILE */
.overlay {
  position:fixed; inset:0; background: rgba(0,0,0,0.3);
  backdrop-filter: blur(3px); opacity:0; pointer-events:none;
  transition: opacity 0.3s; z-index:80;
}
.overlay.show { opacity:1; pointer-events:all; }



button svg{color:var(--color-emec)}
button svg:hover{color:var(--color-emec-over)}

button i.fa-solid{color:var(--color-emec)}
button i.fa-solid:hover{color:var(--color-emec-over)}

/* MAIN */
main {
  flex:1;
  padding:4px;
  margin-top:95px; /* sotto navbar */
  margin-left:300px;
  margin-bottom:32px; /* spazio per status bar */
  overflow:auto;
  transition: margin-left 0.3s;
}
main.compact { margin-left:70px; }

/* STATUS BAR */
.status-bar {
  position: fixed;
  bottom:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 14px;
  background: var(--bg-status);
  border-top:1px solid var(--border-color);
  backdrop-filter:var(--blur);
  z-index:100;
}
.status-left, .status-right { display:flex; align-items:center; gap:10px; }
.status-bar button { background:#ffffffcc; border:1px solid var(--border-color);
  border-radius:8px; padding:6px 8px; cursor:pointer; transition: all 0.2s ease;}
.status-bar button:hover { background: var(--hover-bg); transform: scale(1.05); }
.status-text { color:#555; font-size:13px; margin-left:10px; }


/* MOBILE */
@media (max-width:768px){
  .sidebar { 
    width:100%; 
    left:-100%; 
    top:80;        /* in mobile copre tutta la pagina */
    height:100%;  /* tutta l'altezza */
	z-index:10000;
  }



.sidebar ul { list-style:none; padding:10; margin:10; }
.sidebar li { position:relative; }
.sidebar.open li:hover .submenu button {
  margin:1px;padding-left:50px;
  background: rgba(255,255,255,0.9); border:1px solid var(--border-color);
  border-radius:6px; box-shadow: var(--shadow);

}



  .sidebar.open { left:0; }
  .sidebar.compact { width:100%; }
  /* in mobile vogliamo che il testo sia sempre visibile */
  .sidebar.compact li span { display:inline; }
  .sidebar.compact li:hover .submenu { 
    position: relative; /* non più absolute, per farli scorrere */
    top:auto; left:auto; 
    box-shadow:none;
    background: rgba(255,255,255,0.6);
  }  
  main.compact{ margin-left:0px;}
  .cards {
    grid-template-columns: 1fr; /* una colonna in cascata */
  }
  
}