:root{
  --bg:#F3F4F7; --surface:#FFFFFF; --border:#DCDFE6;
  --text:#1D2029; --muted:#666C7A; --accent:#3D5A99;
  --ok:#2F7D5C; --ok-soft:#DFF0E8; --warn:#9C6A1E; --warn-soft:#F5EBD8;
  --danger:#B4402A; --danger-soft:#F6E2DD;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI",Arial,sans-serif; line-height:1.5;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

.topbar{display:flex; align-items:center; justify-content:space-between; background:var(--surface); padding:0.9rem 1.6rem; border-bottom:1px solid var(--border);}
.topbar .brand{font-weight:700; color:var(--text); font-size:1.05rem;}
.topbar nav{display:flex; align-items:center; gap:1.1rem; font-size:0.92rem;}
.topbar .user{color:var(--muted);}

.wrap{max-width:960px; margin:0 auto; padding:2rem 1.5rem 4rem;}

.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem;}
h1{font-size:1.5rem; margin:0 0 0.3rem;}
h2{font-size:1.15rem; margin-top:2rem;}

.btn, button{background:var(--accent); color:#fff; border:none; padding:0.55rem 1.1rem; border-radius:8px; cursor:pointer; font-size:0.92rem;}
.btn:hover, button:hover{opacity:0.92; text-decoration:none;}

.filters{display:flex; gap:0.8rem; margin-bottom:1rem; font-size:0.9rem;}
.filters a{padding:0.3rem 0.7rem; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text);}
.filters a.active{background:var(--accent); color:#fff; border-color:var(--accent);}

table.list{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; font-size:0.92rem;}
table.list.small{font-size:0.85rem; margin:0.6rem 0;}
table.list th, table.list td{padding:0.6rem 0.8rem; text-align:left; border-bottom:1px solid var(--border);}
table.list th{background:var(--bg); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);}
table.list tr:last-child td{border-bottom:none;}
.empty{color:var(--muted); text-align:center; padding:1.4rem;}

.tag{display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-size:0.78rem; background:var(--bg);}
.tag-stato-nuova{background:var(--warn-soft); color:var(--warn);}
.tag-stato-in_lavorazione{background:#E4E9F5; color:var(--accent);}
.tag-stato-completata{background:var(--ok-soft); color:var(--ok);}
.tag-stato-annullata{background:var(--danger-soft); color:var(--danger);}
.tag-prio-alta{background:var(--danger-soft); color:var(--danger);}
.tag-prio-normale{background:var(--bg); color:var(--muted);}
.tag-prio-bassa{background:var(--bg); color:var(--muted);}

.panel{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1.2rem;}
.panel summary{cursor:pointer; font-weight:600;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-top:0.9rem;}
.form-grid label{display:flex; flex-direction:column; font-size:0.85rem; color:var(--muted); gap:0.3rem;}
.form-grid .full{grid-column:1 / -1;}
.form-grid input, .form-grid select, .form-grid textarea{font-size:0.95rem; padding:0.5rem 0.6rem; border:1px solid var(--border); border-radius:6px; font-family:inherit;}

.inline-form{display:flex; gap:0.6rem; align-items:center; margin-top:0.6rem;}
.inline-form input, .inline-form select{padding:0.4rem 0.5rem; border:1px solid var(--border); border-radius:6px;}

.detail-card, .intervento-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.3rem; margin-bottom:1rem;}
.detail-card .descrizione{white-space:pre-wrap; margin:0.8rem 0;}
.intervento-card .note{color:var(--muted); font-size:0.92rem;}

.login-box{max-width:340px; margin:4rem auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2rem;}
.login-box form{display:flex; flex-direction:column; gap:1rem; margin-top:1rem;}
.login-box label{display:flex; flex-direction:column; gap:0.35rem; font-size:0.9rem; color:var(--muted);}
.login-box input{padding:0.55rem 0.6rem; border:1px solid var(--border); border-radius:6px;}

.error{color:var(--danger); font-size:0.9rem;}
