:root{
  --bg-main:#f8fafc;
  --bg-surface:#ffffff;
  --bg-sidebar:#eef2f7;
  --bg-header:#ffffff;
  --border:#e5e7eb;
  --text:#334155;
  --muted:#64748b;
  --accent:#7aa2e3;
  --accent-2:#a7f3d0;
  --danger:#fca5a5;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Arial,sans-serif;background:var(--bg-main);color:var(--text);}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;background:#070b14;color:var(--fg)}
a{color:inherit}
.sd-layout{display:flex;min-height:100vh}
\.sd-sidebar{width:var(--sidebar-w);background:var(--bg);border-right:1px solid var(--border);position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto;padding:16px}
.sd-brand{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.sd-brand img{width:44px;height:44px;border-radius:10px;object-fit:contain}
.sd-brand .t{font-weight:700}
.sd-brand .s{font-size:12px;color:var(--muted)}
.sd-nav{list-style:none;padding:0;margin:10px 0 0}
.sd-nav li{margin:6px 0}
.sd-nav a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--fg)}
.sd-nav a:hover{background:rgba(96,165,250,.12)}
.sd-nav .active{background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.25)}
.sd-main{flex:1;min-width:0}
.sd-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(11,18,32,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.sd-topbar .who{color:var(--muted);font-size:13px}
.sd-content{padding:18px}
.sd-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.sd-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.sd-col-12{grid-column:span 12}
.sd-col-6{grid-column:span 12}
@media(min-width:900px){.sd-col-6{grid-column:span 6}}
.sd-btn{display:inline-block;padding:10px 14px;border-radius:12px;background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.35);text-decoration:none}
.sd-btn:hover{background:rgba(96,165,250,.26)}
.sd-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.sd-table th{font-size:12px;color:var(--muted);text-align:left;padding:0 10px}
.sd-table td{background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:10px}
.sd-table tr td:first-child{border-left:1px solid rgba(255,255,255,.06);border-top-left-radius:12px;border-bottom-left-radius:12px}
.sd-table tr td:last-child{border-right:1px solid rgba(255,255,255,.06);border-top-right-radius:12px;border-bottom-right-radius:12px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2);color:var(--fg)}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
.sd-actions{display:flex;gap:10px;flex-wrap:wrap}
.sd-note{color:var(--muted);font-size:12px}
.sd-footer{padding:18px;color:var(--muted);font-size:12px}
/* mobile: sidebar becomes drawer-like but remains accessible */
@media(max-width:860px){.sd-sidebar{position:fixed;left:-280px;transition:left .2s ease;z-index:20}.sd-sidebar.open{left:0}.sd-main{width:100%}.sd-topbar .menu-btn{display:inline-block} }
@media(min-width:861px){.sd-topbar .menu-btn{display:none}}
.menu-btn{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--fg)}


.sd-topbar{height:var(--topbar-h)}
.sd-topbar-left{display:flex;align-items:center;gap:12px}
.sd-topbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.sd-topbar-brand img{width:34px;height:34px;border-radius:10px}
.sd-topbar-right{display:flex;align-items:center;gap:12px}
.sd-topbar-link{text-decoration:none;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
.sd-topbar-link:hover{background:rgba(255,255,255,.06)}
.sd-menu-btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);display:inline-flex;align-items:center;justify-content:center}
.sd-menu-btn:before{content:"≡";font-size:20px;line-height:1}
.sd-overlay{display:none;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(0,0,0,.45);z-index:8}
@media(max-width:900px){
  .sd-sidebar{position:fixed;left:0;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));transform:translateX(-105%);transition:transform .2s ease;z-index:9}
  .sd-main{min-height:calc(100vh - var(--topbar-h))}
  html.sd-nav-open .sd-sidebar{transform:translateX(0)}
  html.sd-nav-open .sd-overlay{display:block}
}
@media(min-width:901px){
  .sd-menu-btn{display:none}
}


/* --- Pastel UI overrides --- */
html,body{background:var(--bg-main); color:var(--text);}
a{color:inherit}
.topbar, header.topbar, .header, header{
  background:var(--bg-header);
  border-bottom:1px solid var(--border);
}
.logo-wrap img, .topbar .logo img, header .logo img, .topbar img{
  height:36px;
  width:auto;
  max-height:36px;
  object-fit:contain;
}
.topbar{height:60px; padding:0 16px; display:flex; align-items:center; justify-content:space-between;}
.sidebar, nav.sidebar{
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
}
.sidebar a, nav.sidebar a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
}
.sidebar a:hover, nav.sidebar a:hover{background:rgba(122,162,227,.15); color:var(--text);}
.sidebar a.active, nav.sidebar a.active{background:rgba(122,162,227,.22); font-weight:600;}
.content, main{color:var(--text);}
button, .btn, input[type=submit]{
  background:var(--accent);
  border:0;
  color:#0f172a;
  border-radius:10px;
  padding:10px 12px;
  font-weight:600;
}
button:hover, .btn:hover, input[type=submit]:hover{filter:brightness(0.98);}
input, select, textarea{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
}
@media (max-width: 768px){
  .logo-wrap img{height:30px; max-height:30px;}
}


/* --- Header pastel + logo visibility --- */
.sd-topbar{
  background: var(--bg-header);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.sd-topbar-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.sd-logo{display:flex; align-items:center; justify-content:center; padding:4px 6px; border-radius:10px; background: rgba(122,162,227,.10);}
.sd-logo img{height:34px; width:auto; max-height:34px; object-fit:contain; display:block;}
.sd-brand-text{font-weight:700; letter-spacing:.2px;}
@media (max-width: 768px){
  .sd-logo img{height:30px; max-height:30px;}
  .sd-brand-text{font-size:14px;}
}


/* --- Header/Logo + footer alignment --- */
.sd-topbar{background:var(--bg-header); border-bottom:1px solid var(--border);}
.sd-footer{background:var(--bg-header); border-top:1px solid var(--border); padding:14px 16px; text-align:center;}
.sd-logo img{height:34px; width:auto; max-height:34px; display:block;}
@media (max-width:768px){
  .sd-logo img{height:32px; max-height:32px;}
}

/* Login page title -> logo */
.sd-login-logo{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:16px; background:rgba(122,162,227,.12); margin:12px auto;}
.sd-login-logo img{height:96px;width:auto;display:block;}
@media (max-width:768px){
  .sd-login-logo img{height:72px;}
}

.sd-container{max-width:1100px;margin:0 auto;padding:18px 16px;}


/* --- Force lateral sidebar layout (desktop) --- */
.sd-sidebar{
  position: fixed;
  top: 60px; /* below header */
  left: 0;
  width: 260px;
  height: calc(100vh - 60px);
  overflow: auto;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  z-index: 50;
}
.sd-container{padding-left: 280px;} /* make room for sidebar */
@media (max-width: 768px){
  .sd-sidebar{
    transform: translateX(-105%);
    transition: transform .2s ease;
    top: 60px;
    height: calc(100vh - 60px);
  }
  body.sd-nav-open .sd-sidebar{ transform: translateX(0); }
  .sd-container{padding-left: 16px;}
  .sd-overlay{
    position: fixed; inset: 60px 0 0 0;
    background: rgba(15,23,42,.25);
    display: none;
    z-index: 40;
  }
  body.sd-nav-open .sd-overlay{ display:block; }
}

/* --- Dashboard: big logo background on the right --- */
.sd-dashboard{position:relative}
.sd-dashboard:before{
  content:"";
  position:fixed;
  top:60px;
  left:260px;
  right:0;
  bottom:0;
  background-image:url('../img/logo.png');
  background-repeat:no-repeat;
  background-position:calc(100% - 36px) calc(100% - 36px);
  background-size:min(720px, 60vw);
  opacity:.08;
  pointer-events:none;
}

/* --- UI badge (privilege) --- */
.sd-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.06);
  color:var(--text);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.sd-badge-priv{ text-transform: lowercase; }

/* --- Accessibility fixes: contrast + mobile menu button visibility --- */
button:focus-visible, .btn:focus-visible, input[type=submit]:focus-visible, .sd-menu-btn:focus-visible, .menu-btn:focus-visible{
  outline: 3px solid rgba(15,23,42,.35);
  outline-offset: 2px;
}

/* Ensure the mobile hamburger button is always visible (was white-on-near-white) */
.sd-menu-btn{
  background: var(--accent) !important;
  border: 0 !important;
  color:#0f172a !important;
}

/* Dashboard button in top-left */
.sd-dashboard-btn{margin-right:8px;white-space:nowrap}

/* Conditional blocks hidden by default (shown via JS) */
.sd-cond[data-confirm]{display:none}
/* === Gestisci gruppi: contatti verticali + checkbox allineati a sinistra === */
.sd-groups-page .sd-grid{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sd-groups-page label.sd-check{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  padding:0;
}
.sd-groups-page label.sd-check input[type="checkbox"]{
  width:auto !important;
  margin:0 !important;
  flex:0 0 auto;
}
.sd-groups-page label.sd-check span{
  display:inline-block;
  white-space:nowrap;
}