:root{ --sidebar-w: 320px; }

.layout{
  min-height: 100vh;
  display:flex;
  align-items:stretch;
}

.sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 950;
}

.main{
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 18px 26px;
}

.overlay{ display:none; }

@media (max-width: 980px){
  .sidebar{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    transform: translateX(calc(-1 * var(--sidebar-w) - 18px));
    transition: transform .22s ease;
    z-index: 1000;
  }
  .sidebar.is-open{ transform: translateX(0); }

  .main{ padding: 18px 14px 26px; }

  .overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.70);
    backdrop-filter: blur(10px);
    z-index: 900;
    display:none;
  }
  .overlay.is-on{ display:block; }
}

/* topbar coerente */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}
.topbar__left{display:flex;align-items:center;gap:12px;}

.burger{
  width: 44px; height: 44px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  display:none;
  cursor:pointer;
}
.burger:hover{ background: rgba(255,255,255,.10); }
@media (max-width: 980px){
  .burger{ display:inline-flex;align-items:center;justify-content:center; }
}

.page-title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:.2px;
}
.page-sub{ margin-top: 6px; color: var(--muted); font-size: 13px; }

/* Card base (se non già in base.css) */
.card{
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__head{
  padding: 16px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.card__title{margin:0; font-size: 14px; font-weight: 900;}
.card__body{padding: 16px 18px;}

/* Tabella: non deve “sparare” sotto sidebar */
table{
  width:100%;
  border-collapse: collapse;
}
thead th{
  font-size:12px;
  color: var(--muted);
  font-weight: 800;
}
tbody td{
  vertical-align: top;
}

/* input dentro table: meglio allineati */
.input{
  max-width: 100%;
}

/* Bottoni inline: evita che si rompano male */
.btn, .btn.btn--ghost{
  white-space: nowrap;
}