/* ============================================================================
   officina.css — Stili della sezione "Generatore Home" (Officina) del CMS
   ----------------------------------------------------------------------------
   Le classi generiche (.cd-tenant-card, .cd-superadmin-kpi, .cd-badge-*,
   .cd-btn-*, .cd-flex, .cd-text-*, ecc.) arrivano dai CSS condivisi
   (comune-digital.css, superadmin.css, booking.css, admin.css).

   Questo foglio usa SEMPRE i token del design system (--cd-space-*,
   --cd-radius-*, --cd-shadow-*, palette --cd-*): niente hex fuori palette.
   L'editor è a tutto schermo con 3 zone (header / nav / pane). Su mobile
   l'header riavvolge (Salva/Chiudi sempre raggiungibili) e la nav diventa
   una striscia di tab orizzontale.
   ============================================================================ */

/* ---- Badge variante "muted" ------------------------------------------ */
.cd-badge-muted {
  background-color: var(--cd-gray-100);
  color: var(--cd-gray-700);
  border: 1px solid var(--cd-gray-300);
}

/* ---- Banner messaggio (errore/avviso/info in cima alla sezione) ------ */
.cd-banner {
  display: flex; align-items: center; gap: var(--cd-space-sm);
  padding: var(--cd-space-sm) var(--cd-space-md);
  border-radius: var(--cd-radius-md);
  font-size: 0.95rem;
}
.cd-banner-error   { background-color: #FDECEC; color: #92231C; border: 1px solid #F5C2C0; }
.cd-banner-warning { background-color: #FFF8E0; color: #8C6A00; border: 1px solid #F2E3A1; }
.cd-banner-info    { background-color: var(--cd-blue-100); color: #0F3960; border: 1px solid #B7D2EA; }

/* ---- Link discreti ---------------------------------------------------- */
.cd-link-muted { color: var(--cd-gray-500); text-decoration: none; font-size: 0.85rem; }
.cd-link-muted:hover { text-decoration: underline; color: var(--cd-blue-700); }

/* ---- Bottoni extra-small --------------------------------------------- */
.cd-btn-xs { padding: 4px 8px !important; font-size: 0.78rem !important; line-height: 1.1; }

/* ---- Card homepage (griglia lista) ----------------------------------- */
.officina-card {
  position: relative; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.officina-card:hover,
.officina-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--cd-shadow-md);
  outline: none;
}
.officina-card-lock {
  position: absolute; top: 8px; right: 8px;
  background: #FDECEC; color: #92231C; border: 1px solid #F5C2C0;
  border-radius: var(--cd-radius-pill, 999px);
  padding: 2px 8px; font-size: 0.72rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; z-index: 1;
}

/* ============================================================================
   EDITOR — shell a tutto schermo (header / nav laterale / pane)
   ============================================================================ */
.officina-editor-overlay {
  position: fixed; inset: 0;
  background: rgba(16, 31, 49, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1100; display: flex;
}
.officina-editor-shell {
  background: var(--cd-white);
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "header header"
    "side   main";
  overflow: hidden;
}

/* ---- Header ---------------------------------------------------------- */
.officina-editor-header {
  grid-area: header;
  display: flex; align-items: center; gap: var(--cd-space-md);
  flex-wrap: wrap;
  padding: var(--cd-space-sm) var(--cd-space-lg);
  background: var(--cd-white);
  border-bottom: 1px solid var(--cd-gray-300);
}
.officina-editor-header h2 {
  margin: 0; font-size: 1.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.officina-editor-header .meta { color: var(--cd-gray-500); font-size: 0.85rem; }
.officina-editor-header .meta code { font-size: 0.85em; }
.officina-editor-header .spacer { flex: 1 1 auto; }

/* ---- Nav laterale ---------------------------------------------------- */
.officina-editor-side {
  grid-area: side;
  background: var(--cd-gray-100);
  border-right: 1px solid var(--cd-gray-300);
  overflow-y: auto;
  padding: var(--cd-space-md) 0;
}
.officina-editor-side .nav-section {
  padding: var(--cd-space-xs) var(--cd-space-md);
  margin-top: var(--cd-space-sm);
  text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em;
  color: var(--cd-gray-500); font-weight: 700;
}
.officina-editor-side .nav-section:first-child { margin-top: 0; }
.officina-editor-side .nav-item {
  display: flex; align-items: center; gap: var(--cd-space-sm);
  padding: var(--cd-space-sm) var(--cd-space-md);
  cursor: pointer; font-size: 0.92rem; color: var(--cd-gray-700);
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.officina-editor-side .nav-item i { width: 1.1em; text-align: center; color: var(--cd-gray-500); }
.officina-editor-side .nav-item:hover { background: var(--cd-blue-100); }
.officina-editor-side .nav-item.is-active {
  background: var(--cd-white);
  border-left-color: var(--cd-blue-700);
  color: var(--cd-blue-700); font-weight: 600;
}
.officina-editor-side .nav-item.is-active i { color: var(--cd-blue-700); }
.officina-editor-side .nav-item .pill {
  margin-left: auto; font-size: 0.68rem; padding: 1px 7px;
  border-radius: var(--cd-radius-pill, 999px);
  background: var(--cd-blue-100); color: var(--cd-blue-700); font-weight: 700;
}

/* ---- Pane principale (contenuto scorrevole) -------------------------- */
.officina-editor-main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--cd-space-lg);
  background: var(--cd-gray-100);
}
/* il contenuto di ogni pane vive in una card bianca */
.officina-editor-pane {
  background: var(--cd-white);
  border: 1px solid var(--cd-gray-300);
  border-radius: var(--cd-radius-lg);
  box-shadow: var(--cd-shadow-sm);
  padding: var(--cd-space-lg);
  max-width: 920px;
}
.officina-editor-pane h3 { margin: 0 0 var(--cd-space-xs); font-size: 1.2rem; color: var(--cd-blue-700); }
.officina-editor-pane h4 {
  margin: var(--cd-space-lg) 0 var(--cd-space-sm);
  font-size: 0.95rem; color: var(--cd-blue-700);
  padding-bottom: var(--cd-space-xs); border-bottom: 2px solid var(--cd-blue-100);
}
.officina-editor-pane .pane-sub { color: var(--cd-gray-500); margin-bottom: var(--cd-space-lg); font-size: 0.9rem; }

/* ---- Righe form ------------------------------------------------------ */
.officina-form-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--cd-space-md);
  align-items: start;
  margin-bottom: var(--cd-space-md);
}
.officina-form-row > label { padding-top: 0.55rem; font-weight: 600; font-size: 0.9rem; color: var(--cd-gray-700); }
.officina-form-row .help { display: block; color: var(--cd-gray-500); font-weight: 400; font-size: 0.8rem; margin-top: 2px; }

.officina-form-row input[type="text"],
.officina-form-row input[type="url"],
.officina-form-row input[type="number"],
.officina-form-row textarea,
.officina-form-row select {
  width: 100%; font: inherit;
  padding: 0.55rem 0.7rem; min-height: 42px;
  border: 1.5px solid var(--cd-gray-300);
  border-radius: var(--cd-radius-md);
  background: var(--cd-white); color: var(--cd-gray-700);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.officina-form-row input:focus,
.officina-form-row textarea:focus,
.officina-form-row select:focus {
  outline: none; border-color: var(--cd-blue-700);
  box-shadow: 0 0 0 3px var(--cd-blue-100);
}
.officina-form-row textarea { min-height: 80px; resize: vertical; }

/* Coppia colore (swatch + hex): il testo si adatta, niente overflow */
.officina-form-row .color-pair { display: flex; align-items: center; gap: var(--cd-space-sm); }
.officina-form-row .color-pair input[type="color"] {
  width: 42px; height: 42px; padding: 0; flex: 0 0 auto;
  border: 1.5px solid var(--cd-gray-300); border-radius: var(--cd-radius-md); cursor: pointer;
}
.officina-form-row .color-pair input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; }

/* ---- Lock banner dentro l'editor ------------------------------------ */
.officina-editor-lockbanner {
  margin: 0 var(--cd-space-lg) var(--cd-space-md);
  padding: var(--cd-space-sm) var(--cd-space-md);
  background: #FFF8E0; border: 1px solid #F2E3A1;
  border-radius: var(--cd-radius-md); color: #8C6A00;
  display: flex; align-items: center; gap: var(--cd-space-sm);
}

/* ============================================================================
   RESPONSIVE — tablet / finestre affiancate (≤ 900px): nav più stretta
   ============================================================================ */
@media (max-width: 900px) and (min-width: 641px) {
  .officina-editor-shell { grid-template-columns: 220px 1fr; }
  .officina-form-row { grid-template-columns: 180px 1fr; }
}

/* ============================================================================
   RESPONSIVE — mobile (≤ 640px)
   - header riavvolge: titolo su una riga, azioni a capo (Salva/Chiudi visibili)
   - nav = striscia di tab orizzontale scorrevole
   - form a una colonna
   ============================================================================ */
@media (max-width: 640px) {
  .officina-editor-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "side"
      "main";
  }

  /* Header: titolo a tutta riga, poi badge e bottoni che vanno a capo */
  .officina-editor-header { padding: var(--cd-space-sm) var(--cd-space-md); gap: var(--cd-space-sm); }
  .officina-editor-header > i:first-child { display: none; }   /* icona decorativa */
  .officina-editor-header > div:nth-of-type(1) { flex: 1 1 100%; min-width: 0; }
  .officina-editor-header h2 { max-width: 100%; }
  .officina-editor-header .spacer { display: none; }
  .officina-editor-header .cd-btn { flex: 1 1 auto; }

  /* Nav: striscia di tab orizzontale */
  .officina-editor-side {
    display: flex; align-items: center; gap: var(--cd-space-xs);
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    padding: var(--cd-space-sm) var(--cd-space-md);
    border-right: 0; border-bottom: 1px solid var(--cd-gray-300);
    -webkit-overflow-scrolling: touch;
  }
  .officina-editor-side .nav-section { display: none; }
  .officina-editor-side .nav-item {
    flex: 0 0 auto; border-left: 0;
    border: 1px solid var(--cd-gray-300); border-radius: var(--cd-radius-pill, 999px);
    padding: var(--cd-space-xs) var(--cd-space-md); background: var(--cd-white);
  }
  .officina-editor-side .nav-item.is-active {
    border-color: var(--cd-blue-700); background: var(--cd-blue-100);
  }
  .officina-editor-side .nav-item .pill { margin-left: var(--cd-space-xs); }

  /* Pane + form */
  .officina-editor-main { padding: var(--cd-space-md); }
  .officina-editor-pane { padding: var(--cd-space-md); }
  .officina-form-row { grid-template-columns: 1fr; gap: var(--cd-space-xs); margin-bottom: var(--cd-space-md); }
  .officina-form-row > label { padding-top: 0; }
  .officina-editor-lockbanner { margin: 0 var(--cd-space-md) var(--cd-space-md); }
}