* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--ink-2);
  font-size: var(--fs-base);
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-dark);   /* affiora nelle tacche stondate del corpo, in continuità con l'header */
}

/* Topbar */
#topbar {
  background: var(--bg-dark);
  color: white;
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 var(--sp-5);
  gap: var(--sp-4);
  z-index: var(--z-topbar);
  justify-content: space-between;
  position: relative;
  box-shadow: var(--shadow-topbar);
}

/* Tre zone: contesto a sinistra · nav al centro (flessibile) · azioni a destra */
#topbar .tb-zone {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

#topbar .tb-left,
#topbar .tb-right { flex: 0 0 auto; }

#topbar .logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--coop-red);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

#topbar .logo-mark {
  width: 28px;
  height: 28px;
  display: block;
  flex: none;
}

#topbar .tb-divider {
  width: 1px;
  height: 22px;
  background: var(--bg-dark-2);
}

#topbar .save-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ok);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(15, 184, 122, 0.1);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

#topbar .save-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

#topbar .save-status.is-saving {
  color: var(--warn);
  background: rgba(230, 160, 20, 0.12);
}

#topbar button {
  background: #3f3f3f;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 14px;
  font-size: var(--fs-md);
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}

#topbar button:hover { background: #525252; border-color: rgba(255, 255, 255, 0.28); }
#topbar button:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* Cluster: gruppo di controlli a pillola sulla topbar scura */
#topbar .tb-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-dark-2);
  border-radius: var(--r-md);
  padding: 3px;
}

/* Icon-button condiviso */
#topbar .tb-iconbtn {
  padding: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--r-sm);
}
#topbar .tb-iconbtn:focus-visible,
#topbar .tb-promo-title:focus-visible,
#topbar .tb-menu-item:focus-visible {
  outline: 2px solid var(--coop-red);
  outline-offset: 1px;
}

/* Titolo promo editabile inline */
#topbar .tb-promo-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}
#topbar .tb-promo-title:hover { background: #3a3a3a; }
#topbar .tb-promo-title[contenteditable="true"] {
  background: #1a1a1a;
  outline: 2px solid var(--coop-red);
  overflow: visible;
}

/* Menu a tendina (switch promo) */
#topbar .tb-menuwrap { position: relative; display: inline-flex; }
#topbar .tb-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-modal);
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-modal);
  padding: 6px;
}
#topbar .tb-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--ink-2);
  border: none;
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
#topbar .tb-menu-item:hover { background: var(--bg-soft); }
#topbar .tb-menu-item.on { color: var(--coop-red); font-weight: 700; }

/* "+ Nuova": icona+testo allineati, stesse proporzioni delle altre CTA */
#topbar .tb-newpromo { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; }

#topbar button.primary { background: var(--coop-red); }
#topbar button.primary:hover { background: var(--coop-red-dark); }

/* Nav fasi: gruppo segmentato a destra */
#topbar .tb-phases {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 3px;
}
/* Segmented control: i bottoni inattivi sono "incassati" (niente bordo), si schiariscono su hover/active */
#topbar .tb-phases button {
  background: transparent;
  border-color: transparent;
  padding: 5px 12px;
}
#topbar .tb-phases button:hover { background: #3f3f3f; border-color: transparent; }
#topbar .tb-phases button.active { background: #4d4d4d; border-color: transparent; }
#topbar .tb-phases button.primary { background: var(--coop-red); }
#topbar .tb-phases button.primary:hover,
#topbar .tb-phases button.primary.active { background: var(--coop-red-dark); }

/* View container — angoli superiori stondati: il corpo si "incastra" nella header piatta.
   Lo sfondo scuro del body affiora nelle tacche agli angoli, in continuità con la barra. */
#view {
  overflow: auto;
  background: var(--bg-canvas);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}


.back-plan { background:none; border:none; color:var(--coop-red); font-size:13px; font-weight:600; cursor:pointer; padding:8px 0; }
.back-plan:hover { text-decoration:underline; }

/* Icone SVG inline (helper icon()) — allineate al testo, ereditano currentColor */
.ico-svg { display: inline-block; vertical-align: -0.18em; flex: none; }
button .ico-svg, a .ico-svg { pointer-events: none; }