:root{
      --bg:#0f172a;          /* slate-900 */
      --card:#111827;         /* gray-900 */
    
      --muted:#1f2937;       /* gray-800 */
      --text:#e5e7eb;        /* gray-200 */
      --sub:#a8b1c0;         /* muted */
      --accent:#38bdf8;      /* sky-400 */
      --green:#22c55e;       /* success */
      --amber:#f59e0b;       /* warning */
      --red:#ef4444;         /* danger */
      --line:#1e293b;
    }
    *{box-sizing:border-box}
    body{margin:0;background:#f1f1f1;color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
    .container{max-width:1400px;margin:0 auto;padding:24px}
    .card{background:linear-gradient(180deg,var(--card),#0c1229);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.35)}
    header.topbar{position:sticky;top:0;z-index:40;background:#111827;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
    header .wrap{display:flex;align-items:center;gap:16px;padding:10px 18px}
    .brand a{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px;color:inherit;}
    .brand .logo{height:28px;border-radius:8px;background:#68af24;display:inline-block}
    nav a{color:var(--text);opacity:.85;text-decoration:none;padding:8px 10px;border-radius:10px;white-space:nowrap}
    nav a:hover, nav a.active{background:#990000;color:white}
    .grid{display:grid;gap:16px}
    .grid.cols-2{grid-template-columns:1fr 1fr}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .section{display:none}
    .section.active{display:block}
    h1{margin:0 0 12px;font-size:28px}
    h2{margin:18px 0 10px;font-size:18px;color:var(--accent)}
    h3{margin:6px 0 8px;font-size:15px;color:#cfe9ff}
    .muted{color:var(--sub)}
    .pad{padding:18px}
    .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .btn{background:#0b132a;color:#e6f6ff;border:1px solid #1f3a5f;padding:10px 14px;border-radius:10px;cursor:pointer;min-height:44px}
    .btn:hover{border-color:#2b6ea6}
    .btn.outline{background:transparent}
    .tag{display:inline-block;padding:6px 12px;border-radius:500px;font-size:12px;border:1px solid #223150;background:#0a1229;text-align: center;}
    .tag.pianificato{border-color:#0090ff;color:#fff;background:#0090ff; width:100px; font-weight:bold; }
    .tag.corso{border-color:#ff8a00;color:#fff;background:#ff8a00; width:100px; font-weight:bold; }
    .tag.chiuso{border-color:#009900;color:#fff;background:#009900; width:100px; font-weight:bold; }
    
	.tag.attivo{border-color:#009900;color:#fff;background:#009900; width:100px; font-weight:bold; }
	.tag.disabilitato{border-color:#990000;color:#fff;background:#990000; width:100px; font-weight:bold; }


	.tag.bad{border-color:#990000;color:#fff;background:#990000;  font-weight:bold; }
    .tag.warn{border-color:#ff8a00;color:#fff;background:#ff8a00;   font-weight:bold; }
    .tag.ok{border-color:#009900;color:#fff;background:#009900;   font-weight:bold; }

	 .btn2{background:#009900;color:#fff;border:1px solid #009900;padding:10px 14px;border-radius:10px;cursor:pointer;min-height:44px}
    .btn2:hover{border-color:#2b6ea6}
    .btn2.outline{background:transparent}
	
	a{ color:#2b6ea6; text-decoration:none; }

    /* ===== Tabelle base ===== */
    .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px}
    thead th{font-size:13px;text-align:left;color:#c7d2fe;background:#0b132a;padding:10px;border-bottom:1px solid var(--line)}
    tbody td{padding:10px;border-bottom:1px solid #132036}
    tbody tr:hover{background:#0c142b}

    /* ===== Card-table responsive (stack) ===== */
    .rtable{min-width:720px}
    @media (max-width: 640px){
      .rtable{min-width:0}
      .rtable thead{display:none}
      .rtable tr{display:block;border:1px solid var(--line);border-radius:12px;margin:0 0 12px;background:#0b132a}
      .rtable td{display:flex;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid #132036}
      .rtable td:last-child{border-bottom:none}
      .rtable td::before{content:attr(data-label);color:var(--sub);flex:1;min-width:45%}
      .rtable td > *{max-width:55%}
      .rtable .cell-actions{display:flex;gap:8px;flex-wrap:wrap;width:100%}
      .rtable .cell-actions .btn{flex:1;min-width:120px}
    }

    .kpi{padding:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0b132a,#0a1327);scroll-margin-top:80px}
    .kpi .value{font-size:28px;font-weight:700}
    .divider{height:1px;background:var(--line);margin:14px 0}
    .small{font-size:12px}
    .list-actions{display:flex;gap:6px;flex-wrap:wrap}
    .stack{display:flex;flex-direction:column;gap:8px}
    .code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono",monospace;background:#0b132a;border:1px solid var(--line);border-radius:10px;padding:10px}
    footer{color:#8292b4;font-size:12px;text-align:center;padding:26px 10px}
    .two{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
    .chips{display:flex;flex-wrap:wrap;gap:8px}
    .chip{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#0b132a}
    .local-nav{margin:12px 0 18px;display:flex;flex-wrap:wrap;gap:8px}

    /* ====== Mobile: layout responsive ====== */
    @media (max-width: 920px){
      .container{max-width:100%;padding:16px}
      header .wrap{gap:10px;padding:10px 12px}
      .brand .logo{width:24px;height:24px}
      nav#main-nav{overflow-x:auto;max-width:70vw;scrollbar-width:none}
      nav#main-nav::-webkit-scrollbar{display:none}
      .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
      .two{grid-template-columns:1fr}
      .kpi{padding:12px}
      h1{font-size:24px}
      h2{font-size:16px}
      .local-nav{position:sticky;top:56px;z-index:30;background:rgba(15,23,42,.9);backdrop-filter:blur(6px);padding:8px;border:1px solid var(--line);border-radius:12px;overflow:auto}
      .local-nav .btn{padding:8px 10px}
      .muted[style*="width:240px"]{width:auto !important}
    }

    @media (max-width: 480px){
      .container{padding:12px}
      .pad{padding:14px}
      h1{font-size:22px}
      .btn{width:100%}
      .list-actions .btn{flex:1;min-width:120px}
    }
  
.icona-ordinamento {
    display: inline-block;
}

.icona-ordinamento svg {
    fill: #004078;
    width: 8px;
}

th a {
    text-decoration: none;
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
    text-align: left;
    gap: 4px;
    color: inherit;
}

#main-nav svg {
  fill:#990000;
  width:18px;
  height: 18px;
}

#main-nav a:hover svg {
  fill:white;
}

.hide {
  display: none;
}

.pillbar {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
}

.pillbar input[type="submit"]{
  border: none;
  background: no-repeat;
  color: #009900;
  font-size: 12px;
  cursor: pointer;
}

.btn-verde-secondario{
  cursor: pointer;
  border: 1px solid #009900;
  background: none;
  color: #009900;
  padding: 6px 12px;
  border-radius: 100px;
}

.btn-verde-secondario svg {
  fill: #009900;
  width: 14px;
  margin-right: 6px;
}

.btn-verde-secondario:hover{
  background: #009900;
  color: white;
}

.btn-verde-secondario:hover svg {
  fill: white;
}

.btn-verde{
  border: 1px solid #009900;
  background: #009900;
  color: white;
  padding: 6px 12px;
  border-radius: 100px;
}

.btn-verde svg {
  fill: white;
  width: 14px;
  margin-right: 6px;
}

.btn-rosso{
  cursor: pointer;
  border: none;
  background: #990000;
  color: white;
  padding: 6px 12px;
  border-radius: 100px;
}

.btn-rosso svg {
  fill: white;
  width: 14px;
  margin-right: 6px;
}

.btn-rosso-secondario{
  cursor: pointer;
  border: 1px solid #990000;
  background: none;
  color: white;
  padding: 6px 12px;
  border-radius: 100px;
}

.btn-rosso-secondario svg {
  fill: white;
  width: 14px;
  margin-right: 6px;
}

.btn-rosso-secondario:hover{
  background: #990000;
  color: white;
}

.btn-rosso-secondario:hover svg {
  fill: white;
}

.btn-giallo{
  cursor: pointer;
  border: none;
  background: #e9a200;
  color: white;
  padding: 6px 12px;
  border-radius: 100px;
}

.btn-giallo svg {
  fill: white;
  width: 14px;
  margin-right: 6px;
}

/* Stile modale */
#password-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#password-modal .modal-content {
  background: #fff;
  color: #333;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  min-width: 300px;
  transition: transform 0.2s;
}

#password-modal input {
  padding: 10px;
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
}

#password-modal h3 {
  color: #111827;
}

.errore-password {
  color: #e74c3c;
  font-weight: bold;
  font-size: 14px;
  height: 22px;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}

.modal-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.modal-buttons button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background-color: #111827;
  color: white;
  transition: background-color 0.3s;
}

.modal-buttons button:hover {
  background-color: #111827;
}

/* effetto shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.shake {
  animation: shake 0.3s;
}