:root{
  --bg:#0f1117; --bg2:#161a23; --bg3:#1d2230; --line:#2a3142;
  --txt:#e7ebf3; --muted:#a7b0c2; --accent:#6d8bff;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--txt);font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;margin:0}

/* layout app */
.app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:48px 1fr;min-height:100vh}
.topbar{grid-column:1/3;display:flex;align-items:center;gap:16px;background:var(--bg2);border-bottom:1px solid var(--line);padding:0 16px}
.topbar .brand{font-weight:700;letter-spacing:.4px;display:flex;align-items:center;gap:8px}
.topbar .brand .logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#6d8bff,#9b6dff);display:flex;align-items:center;justify-content:center;font-size:14px}
.brand-logo{height:24px;display:block;background:#fff;border-radius:6px;padding:3px 8px}
.login-logo{display:block;max-width:230px;width:82%;background:#fff;border-radius:8px;padding:10px 16px;margin:0 auto 10px}
.topbar .proj{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:4px 12px;color:var(--muted);font-size:13px}
.topbar .spacer{flex:1}
.topbar .user{display:flex;align-items:center;gap:8px;color:var(--muted)}
.topbar .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#e6a23c,#ff6d9b);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#11151c}
.topbar a{color:var(--muted)}.topbar a:hover{color:#fff}
.logout-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--line);color:var(--txt)!important;border-radius:8px;padding:5px 12px;font-size:12px;text-decoration:none;margin-left:8px}
.logout-btn:hover{border-color:#ef5350;color:#ef5350!important;background:rgba(239,83,80,.08)}

.sidebar{background:var(--bg2);border-right:1px solid var(--line);padding:10px 8px;overflow-y:auto}
.side-group{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:12px 10px 6px;margin-top:6px;border-top:1px solid var(--line)}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--txt);opacity:.82;font-size:13px;text-decoration:none}
.nav-item:hover{background:var(--bg3);opacity:1;color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(109,139,255,.18),transparent);opacity:1;color:#fff;box-shadow:inset 2px 0 0 var(--accent)}
.nav-item i{width:18px;text-align:center;font-size:15px}

.main{overflow:auto}
.content{padding:22px 26px}
h2.title{font-size:20px;font-weight:700;margin:0 0 4px}
.subtitle{color:var(--muted);margin-bottom:20px;font-size:13px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px}
.kpi .n{font-size:26px;font-weight:700}
.kpi .l{color:var(--muted);font-size:12px;margin-top:2px}
.kpi .ico{float:right;font-size:20px;opacity:.5}

/* pannelli + tabelle */
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.panel h3{font-size:14px;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.panel h3 .sub{margin-left:auto;font-size:12px;color:var(--muted);font-weight:400}
table{width:100%;border-collapse:collapse}
th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--bg3);font-size:13px;vertical-align:middle}
tr:hover td{background:var(--bg3)}
.code{font-family:'Consolas',monospace;color:#9bb0ff;background:rgba(109,139,255,.1);padding:2px 7px;border-radius:5px;font-size:12px}

/* form (override Bootstrap per tema scuro) */
.form-control,.form-select{background-color:var(--bg3);border:1px solid var(--line);color:var(--txt)}
.form-control::placeholder{color:#7e889c}
.text-muted{color:#a7b0c2 !important}
.form-control:focus,.form-select:focus{background-color:var(--bg3);color:var(--txt);border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(109,139,255,.2)}
/* Freccia (chevron) delle select, ben visibile sul tema scuro */
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23a7b0c2'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:14px;padding-right:2rem}

/* Zona drag & drop */
.dropzone{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--muted);cursor:pointer;background:var(--bg3);transition:border-color .15s,background .15s,color .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);color:#fff;background:rgba(109,139,255,.08)}
.dropzone i{font-size:26px;display:block;margin-bottom:6px}
.dropzone .fname{color:var(--accent);font-weight:600;margin-top:6px;word-break:break-all}

/* ===== Sola lettura (guest): nasconde i controlli di modifica ===== */
.role-guest .write-only{display:none !important}
.role-guest .col-lg-8{flex:0 0 100%;max-width:100%}   /* la lista occupa tutta la larghezza */
.form-label{font-size:12px;color:var(--muted);margin-bottom:2px;margin-top:6px}
.btn-primary{background:var(--accent);border:none}.btn-primary:hover{background:#5a78f0}
.btn-outline-light{border-color:var(--line)}
code{color:#9bb0ff}
a{color:var(--accent)}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(circle at 50% 25%,#1a2030,#0f1117)}
.login-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:32px;width:340px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.login-card h1{font-size:22px;margin:0}

/* ===== Sidebar comprimibile (toggle) ===== */
.side-toggle{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;width:34px;height:30px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-right:2px;flex:none}
.side-toggle:hover{color:#fff;border-color:var(--accent)}
.app.sidebar-collapsed{grid-template-columns:64px 1fr}
.app.sidebar-collapsed .nav-txt,.app.sidebar-collapsed .side-group{display:none}
.app.sidebar-collapsed .nav-item{justify-content:center;padding:10px 0}
.app.sidebar-collapsed .nav-item i{width:auto}

/* ===== Responsive: tablet e mobile ===== */
@media(max-width:992px){
  .content{padding:18px 16px}
}
@media(max-width:768px){
  /* sidebar sempre a sole icone su schermi piccoli */
  .app{grid-template-columns:64px 1fr}
  .nav-txt,.side-group{display:none}
  .nav-item{justify-content:center;padding:10px 0}
  .nav-item i{width:auto}
  .topbar .proj{display:none}
  .content{padding:14px 12px}
  .panel{overflow-x:auto}            /* tabelle larghe -> scroll orizzontale */
  h2.title{font-size:18px}
}
@media(max-width:480px){
  .topbar{gap:8px;padding:0 10px}
  .topbar .user span{display:none}   /* nasconde il nome, lascia avatar + Esci */
  .logout-btn{padding:5px 9px}
  .brand{font-size:13px}
}

/* ===== Home / launcher con i pulsantoni ===== */
.app-home{min-height:100vh;display:flex;flex-direction:column}
.home-wrap{max-width:1000px;margin:0 auto;padding:44px 20px;width:100%}
.home-wrap h1{font-size:26px;margin:0 0 4px}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:26px}
.home-card{display:flex;flex-direction:column;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:26px;text-decoration:none;color:var(--txt);min-height:155px;transition:transform .15s,border-color .15s,box-shadow .15s}
.home-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.4);color:#fff}
.home-card i{font-size:32px;color:var(--accent)}
.home-card .hc-title{font-size:18px;font-weight:700}
.home-card .hc-desc{font-size:12px;color:var(--muted)}