/* InnovaIndustria — design system (palette v4: navy / sage / peach) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --navy-50:#EEF1F6; --navy-100:#D5DEE8; --navy-200:#ABBDD0; --navy-300:#7E97B5;
  --navy-400:#5275A0; --navy-500:#2F5685; --navy-600:#1A2D4A; --navy-700:#14253D;
  --navy-800:#101F33; --navy-900:#0A1726;
  --peach-300:#FBE0C9; --peach-400:#F7CAA8; --peach-500:#F4C9A8; --peach-600:#C9805A;
  --sage-100:#EAF1EF; --sage-300:#D7E4E2; --sage-400:#B5CCC8; --sage-500:#9FBDB8;
  --sage-600:#7CA39D; --sage-700:#5A847E;
  --petrol:#1B3D3B;
  --n0:#FFFFFF; --n50:#F6F8F9; --n100:#ECF0F2; --n200:#DDE3E7; --n250:#D3DBDF;
  --n300:#C4CDD3; --n400:#97A4AD; --n500:#6B7A85; --n600:#4D5A64; --n700:#36424B;
  --n800:#232E36; --n850:#1a232a; --n900:#131C23;
  --ok:#10B981; --ok-bg:#E6F4EA; --warn:#F59E0B; --warn-bg:#FEF3C7;
  --err:#EF4444; --err-bg:#FEE2E2; --info:#3B82F6; --info-bg:#EFF6FF;
  --r:0.875rem; --sidebar-w:248px;
  --font-d:'Archivo',sans-serif; --font-b:'Hanken Grotesk',sans-serif; --font-m:'IBM Plex Mono',monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--font-b); color:var(--n800); background:var(--n50);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
h1,h2,h3,h4,h5 { font-family:var(--font-d); font-weight:600; color:var(--navy-800); }
a { color:inherit; text-decoration:none; }
.mono { font-family:var(--font-m); }

/* ---------- Layout shell ---------- */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); background:var(--navy-900); color:#fff;
  display:flex; flex-direction:column; padding:1.25rem 0.9rem; position:fixed;
  top:0; bottom:0; left:0; z-index:30;
}
.brand { display:flex; align-items:center; gap:0.7rem; padding:0.4rem 0.6rem 1.3rem; }
.brand .logo {
  width:40px; height:40px; border-radius:0.75rem; background:var(--sage-500);
  color:var(--navy-900); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:700; font-size:1.1rem;
}
.brand .name { font-family:var(--font-d); font-weight:700; font-size:1.05rem; line-height:1.1; }
.brand .sub { font-size:0.65rem; color:var(--sage-400); letter-spacing:.08em; text-transform:uppercase; }
.nav { display:flex; flex-direction:column; gap:0.25rem; margin-top:0.5rem; }
.nav a {
  display:flex; align-items:center; gap:0.75rem; padding:0.7rem 0.8rem; border-radius:0.9rem;
  color:var(--sage-300); font-weight:600; font-size:0.9rem; transition:.15s;
}
.nav a svg { width:20px; height:20px; stroke:var(--sage-400); flex-shrink:0; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a:hover svg { stroke:#fff; }
.nav a.active { background:var(--navy-700); color:#fff; }
.nav a.active svg { stroke:var(--peach-400); }
.sidebar-foot { margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); }
.user-chip { display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0.6rem; }
.user-chip .av {
  width:36px; height:36px; border-radius:0.7rem; background:var(--sage-600); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem;
}
.user-chip .nm { font-size:0.82rem; font-weight:600; color:#fff; }
.user-chip .rl { font-size:0.68rem; color:var(--sage-400); }
.logout-link { color:var(--sage-400); font-size:0.78rem; font-weight:600; padding:0.4rem 0.6rem; display:inline-block; }
.logout-link:hover { color:#fff; }

.main { flex:1; margin-left:var(--sidebar-w); padding:1.6rem 2rem 3rem; max-width:100%; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; gap:1rem; flex-wrap:wrap; }
.topbar h1 { font-size:1.5rem; }
.topbar .sub { color:var(--n500); font-size:0.85rem; }

/* ---------- Cards ---------- */
.card { background:#fff; border-radius:calc(var(--r)*1.8); box-shadow:0 1px 3px rgba(16,31,51,.06); padding:1.4rem; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.card-head h3 { font-size:1.05rem; }
.card-head .desc { color:var(--n500); font-size:0.82rem; margin-top:.15rem; }

.grid { display:grid; gap:1.2rem; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:1100px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:720px){ .g2,.g3,.g4{grid-template-columns:1fr} }

/* ---------- KPI ---------- */
.kpi { background:#fff; border-radius:calc(var(--r)*1.8); padding:1.4rem; display:flex; gap:1rem; align-items:center; box-shadow:0 1px 3px rgba(16,31,51,.06); }
.kpi .ic { width:48px; height:48px; border-radius:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi .ic svg { width:24px; height:24px; }
.kpi .t { font-size:0.72rem; font-weight:600; color:var(--n400); }
.kpi .v { font-family:var(--font-m); font-weight:700; font-size:1.6rem; color:var(--n900); }
.kpi .d { font-size:0.66rem; color:var(--n400); font-weight:600; }
.ic-sage{ background:var(--sage-100); color:var(--sage-700);} .ic-sage svg{stroke:var(--sage-700);}
.ic-navy{ background:var(--navy-100); color:var(--navy-700);} .ic-navy svg{stroke:var(--navy-700);}
.ic-peach{ background:var(--peach-300); color:var(--peach-600);} .ic-peach svg{stroke:var(--peach-600);}
.ic-ok{ background:var(--ok-bg); color:var(--ok);} .ic-ok svg{stroke:var(--ok);}

/* ---------- Banner ---------- */
.banner { background:linear-gradient(110deg,var(--navy-800),var(--navy-900)); color:#fff; border-radius:calc(var(--r)*2.2); padding:1.8rem 2rem; position:relative; overflow:hidden; }
.banner .eyebrow { font-size:0.7rem; font-weight:700; color:var(--sage-400); text-transform:uppercase; letter-spacing:.14em; }
.banner h2 { color:#fff; font-size:1.6rem; margin:.35rem 0; }
.banner p { color:var(--sage-300); font-size:0.88rem; max-width:46rem; }
.banner::after { content:""; position:absolute; right:-40px; bottom:-60px; width:240px; height:240px; background:rgba(159,189,184,.12); border-radius:50%; filter:blur(40px); }

/* ---------- Rows / list items ---------- */
.row-item { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1rem; border:1px solid var(--n200); background:var(--n50); border-radius:1rem; transition:.15s; }
.row-item:hover { border-color:var(--n300); }
.row-item + .row-item { margin-top:.6rem; }
.row-left { display:flex; align-items:center; gap:0.8rem; min-width:0; }
.row-ic { width:40px; height:40px; border-radius:0.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--n200); color:var(--n500); }
.row-ic svg{ width:20px;height:20px; stroke:currentColor;}
.row-title { font-weight:700; font-size:0.88rem; color:var(--n850); }
.row-sub { font-size:0.75rem; color:var(--n400); }

/* ---------- Badges ---------- */
.badge { display:inline-block; font-family:var(--font-m); font-size:0.68rem; font-weight:700; padding:0.18rem 0.5rem; border-radius:0.4rem; }
.badge-ok{ background:var(--ok-bg); color:#0f7a55;}
.badge-warn{ background:var(--warn-bg); color:#92660b;}
.badge-crit,.badge-err{ background:var(--err-bg); color:#b91c1c;}
.badge-info{ background:var(--info-bg); color:#1d4ed8;}
.badge-muted{ background:var(--n100); color:var(--n500);}
.badge-peach{ background:rgba(251,224,201,.5); color:var(--peach-600);}
.code-pill { font-family:var(--font-m); font-weight:700; font-size:0.72rem; color:var(--navy-600); background:var(--navy-50); padding:0.2rem 0.5rem; border-radius:0.4rem; }

/* ---------- Progress ---------- */
.progress { width:100%; height:6px; background:var(--n200); border-radius:99px; overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--sage-500); border-radius:99px; transition:width .5s; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; height:42px; padding:0 1.1rem; border-radius:0.9rem; font-family:var(--font-b); font-weight:700; font-size:0.88rem; border:none; cursor:pointer; transition:.15s; }
.btn svg{ width:18px; height:18px; stroke:currentColor;}
.btn-navy { background:var(--navy-600); color:#fff;} .btn-navy:hover{ background:var(--navy-700);}
.btn-sage { background:var(--sage-600); color:#fff;} .btn-sage:hover{ background:var(--sage-700);}
.btn-ghost { background:#fff; border:1px solid var(--n250); color:var(--n800);} .btn-ghost:hover{ background:var(--n100);}
.btn-danger { background:var(--err); color:#fff;} .btn-danger:hover{ filter:brightness(.93);}
.btn-sm { height:34px; padding:0 0.8rem; font-size:0.8rem; border-radius:0.7rem; }
.btn-block { width:100%; justify-content:space-between; height:48px; }

/* quick actions */
.qa { display:flex; flex-direction:column; gap:0.7rem; }
.qa a { display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 1rem; border-radius:1rem; font-weight:700; font-size:0.88rem; transition:.15s; }
.qa a span{ display:flex; align-items:center; gap:.5rem;}
.qa a svg{ width:20px;height:20px;}
.qa .a-navy{ background:var(--navy-600); color:#fff;} .qa .a-navy:hover{background:var(--navy-700);} .qa .a-navy svg:first-child{stroke:var(--sage-400);}
.qa .a-sage{ background:var(--sage-600); color:#fff;} .qa .a-sage:hover{background:var(--sage-700);} .qa .a-sage svg:first-child{stroke:var(--peach-300);}
.qa .a-ghost{ border:1px solid var(--n250); color:var(--n800);} .qa .a-ghost:hover{background:var(--n100);} .qa .a-ghost svg:first-child{stroke:var(--navy-600);}

/* ---------- Tables ---------- */
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:0.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--n400); font-weight:700; padding:0.6rem 0.8rem; border-bottom:1px solid var(--n200); }
.table td { padding:0.8rem; border-bottom:1px solid var(--n100); font-size:0.86rem; vertical-align:middle; }
.table tr:hover td { background:var(--n50); }
.table a.lnk { color:var(--navy-500); font-weight:600; }

/* ---------- Worksite cards ---------- */
.ws-card { padding:1.2rem; border:1px solid var(--n200); background:var(--n50); border-radius:1.2rem; display:flex; flex-direction:column; gap:0.9rem; transition:.15s; }
.ws-card:hover { border-color:var(--n300); }
.ws-top { display:flex; align-items:center; justify-content:space-between; }
.ws-card h4 { font-size:0.95rem; color:var(--n850); }
.ws-meta { font-size:0.74rem; color:var(--n400); display:flex; align-items:center; gap:.35rem; }

/* ---------- Forms ---------- */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.2rem; }
@media(max-width:720px){ .form-grid{grid-template-columns:1fr} }
.field { display:flex; flex-direction:column; gap:0.35rem; }
.field.full { grid-column:1 / -1; }
.field label { font-size:0.78rem; font-weight:700; color:var(--n700); }
.field .hint { font-size:0.7rem; color:var(--n400); }
.input, .select, textarea.input {
  height:44px; padding:0 0.85rem; border:1px solid var(--n250); border-radius:0.8rem;
  font-family:var(--font-b); font-size:0.9rem; background:#fff; color:var(--n800); width:100%;
}
textarea.input { height:auto; padding:0.7rem 0.85rem; resize:vertical; min-height:90px; }
.input:focus,.select:focus,textarea.input:focus { outline:2px solid var(--sage-400); border-color:var(--sage-500); }
.form-actions { display:flex; gap:0.8rem; margin-top:1.4rem; }

/* ---------- Alerts ---------- */
.alert { border-radius:1rem; padding:0.9rem 1.1rem; font-size:0.86rem; display:flex; gap:.6rem; align-items:flex-start; }
.alert-ok{ background:var(--sage-100); border:1px solid var(--sage-300); color:var(--sage-700);}
.alert-warn{ background:var(--warn-bg); color:#92660b;}
.alert-err{ background:var(--err-bg); color:#b91c1c;}
.empty { background:var(--sage-100); border:1px solid var(--sage-300); border-radius:1rem; padding:1.1rem 1.2rem; display:flex; gap:.8rem; align-items:center; }
.empty .row-ic{ background:var(--sage-300); color:var(--sage-700);}
.empty h4{ font-size:0.9rem; }
.empty p{ font-size:0.78rem; color:var(--n500); }

/* ---------- Detail layout ---------- */
.detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.kv { display:grid; grid-template-columns:160px 1fr; gap:0.55rem 1rem; font-size:0.88rem; }
.kv dt { color:var(--n400); font-weight:600; font-size:0.8rem; }
.kv dd { color:var(--n800); }
.back-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--n500); font-size:0.82rem; font-weight:600; margin-bottom:.8rem; }
.back-link:hover{ color:var(--navy-600); }
.section-title { font-size:0.95rem; margin:1.6rem 0 0.8rem; }

/* ---------- Footer tag ---------- */
.foot-tag { text-align:center; color:var(--n400); font-size:0.74rem; margin-top:2rem; }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy-800),var(--navy-900)); padding:1.5rem; }
.login-card { background:#fff; border-radius:calc(var(--r)*2); padding:2.2rem; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-card .logo { width:52px; height:52px; border-radius:1rem; background:var(--navy-900); color:var(--sage-500); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-weight:700; font-size:1.4rem; margin-bottom:1rem; }
.login-card h1 { font-size:1.4rem; }
.login-card .lead { color:var(--n500); font-size:0.86rem; margin:.2rem 0 1.4rem; }

@media(max-width:860px){
  .sidebar{ position:static; width:100%; flex-direction:row; align-items:center; flex-wrap:wrap; padding:0.8rem 1rem; gap:.5rem; }
  .brand{ padding:0; }
  .nav{ flex-direction:row; flex-wrap:wrap; margin:0; }
  .nav a{ padding:.5rem .7rem; }
  .sidebar-foot{ margin:0 0 0 auto; border:none; padding:0; display:flex; align-items:center; gap:.5rem; }
  .main{ margin-left:0; padding:1.2rem; }
}

/* ============================================================
   Blog pubblico (accessibile senza login)
   ============================================================ */
body.public { background:var(--n50); }
.pub-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.6rem; background:var(--navy-900); color:#fff;
}
.pub-brand { display:flex; align-items:center; gap:.7rem; color:#fff; }
.pub-logo {
  width:40px; height:40px; border-radius:.75rem; background:var(--sage-500);
  color:var(--navy-900); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:800; font-size:1.1rem;
}
.pub-brand .pub-name { display:block; font-family:var(--font-d); font-weight:700; font-size:1.02rem; }
.pub-brand .pub-sub { display:block; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--sage-400); }
.pub-login {
  border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:600; font-size:.82rem;
  padding:.5rem .9rem; border-radius:.7rem;
}
.pub-login:hover { background:rgba(255,255,255,.1); }

.pub-wrap { max-width:1040px; margin:0 auto; padding:2.4rem 1.6rem 3rem; }

.pub-hero { margin-bottom:2rem; }
.pub-hero h1 { font-size:2.1rem; color:var(--navy-800); }
.pub-hero p { color:var(--n500); font-size:1.02rem; margin-top:.4rem; }

.pub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.pub-card {
  display:flex; flex-direction:column; background:#fff; border-radius:calc(var(--r)*1.4);
  overflow:hidden; box-shadow:0 1px 3px rgba(16,31,51,.06); transition:transform .15s, box-shadow .15s;
}
.pub-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(16,31,51,.13); }
.pub-card-cover { height:168px; background-size:cover; background-position:center; background-color:var(--navy-100); }
.pub-card-cover--ph { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy-700),var(--navy-900)); }
.pub-card-cover--ph span { font-family:var(--font-d); font-weight:800; font-size:2rem; color:var(--sage-500); }
.pub-card-body { padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.pub-card-date { font-family:var(--font-m); font-size:.72rem; color:var(--n400); margin-bottom:.4rem; }
.pub-card-body h2 { font-size:1.12rem; line-height:1.3; color:var(--navy-800); margin-bottom:.5rem; }
.pub-card-body p { color:var(--n500); font-size:.88rem; flex:1; }
.pub-card-more { margin-top:.9rem; color:var(--navy-500); font-weight:700; font-size:.85rem; }

.pub-article { max-width:720px; margin:0 auto; }
.pub-article h1 { font-size:2rem; line-height:1.2; color:var(--navy-800); margin:.6rem 0 .3rem; }
.pub-meta { font-family:var(--font-m); font-size:.78rem; color:var(--n400); margin-bottom:1.4rem; }
.pub-cover { width:100%; border-radius:calc(var(--r)*1.2); margin-bottom:1.6rem; }
.pub-body { font-size:1.02rem; color:var(--n700); }
.pub-body p { margin-bottom:1.1rem; line-height:1.7; }

.pub-empty { text-align:center; padding:3rem 1rem; color:var(--n500); }
.pub-empty h1 { font-size:1.5rem; color:var(--navy-800); margin-bottom:.5rem; }
.pub-empty p { margin-bottom:1.2rem; }

.pub-foot {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  max-width:1040px; margin:0 auto; padding:1.6rem; border-top:1px solid var(--n200);
  font-size:.8rem; color:var(--n500);
}
.pub-foot a { color:var(--navy-500); font-weight:700; }

@media(max-width:560px){
  .pub-hero h1 { font-size:1.7rem; }
  .pub-article h1 { font-size:1.5rem; }
}