/* ── Marco Severini & Partners brand tokens ──────────────────────────────
   Verified live against marcoseverini.net + brand-kit/brand-style-guide.md
   (2026-08-18 scrape, corrected 2026-08-21): Teal #028EB9 is the real primary,
   not an approximation. --navy/--gold kept as aliases pointing at the MS&P
   teal scale so the rest of the stylesheet (written against Joy's original
   navy/gold tokens) repaints correctly without a full selector rewrite.
   IMPORTANT (2026-09-01 incident): this file is the deployed source of truth
   for the LIVE Joy tool. Do not fork/copy it elsewhere and edit the fork --
   round 11/12 did exactly that (edited a stale un-rebranded local copy for
   unrelated UX fixes, then redeployed it, silently reverting this branding).
   Always edit THIS file in /tmp/claude-0/joy-webapp/. */
:root {
  --teal: #028EB9;
  --teal-dark: #015F7B;
  --teal-deep: #012F3E;
  --teal-light: #9BD6E8;
  --navy: #012F3E;      /* alias -> Teal Profondo, dark UI chrome */
  --gold: #028EB9;       /* alias -> Teal primario, accents/CTAs */
  --bg: #F7F5F2;
  --card: #FFFFFF;
  --text: #26262E;
  --muted: #999997;      /* MS&P Grigio Medio */
  --ok: #407C51;         /* MS&P Verde */
  --warn: #ED5829;       /* MS&P Arancione */
  --danger: #ED1C24;     /* MS&P Rosso */
  --border: #E8E6E6;     /* MS&P Grigio Chiaro */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif; /* MS&P brand guide: system fonts, max readability */
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.hidden { display: none !important; }

/* ── Brand block: logo + name/tagline, shared by login screen + header ─── */
.brand-block { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-size: 15px; font-weight: 700; color: var(--teal-deep); }
.brand-tagline { font-size: 11px; font-weight: 500; color: var(--teal); letter-spacing: 0.02em; }
header .brand-name { color: white; }
header .brand-tagline { color: var(--teal-light); }

#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  background: var(--card);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-box .brand-block { margin-bottom: 4px; }
.subtitle { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.login-box input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}
.login-box button {
  background: var(--teal);
  color: white;
  border: none;
  padding: 11px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.login-box button:hover { background: var(--teal-dark); }
.error-msg { color: var(--danger); font-size: 13px; min-height: 16px; margin: 0; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--teal-deep);
  color: white;
}
.header-right { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.ghost-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

#tabs { display: flex; gap: 6px; padding: 10px 20px 0; }
.tab-btn {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 7px 16px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.tab-btn.active { background: var(--teal); color: white; border-color: var(--teal); }

#stats-bar {
  padding: 6px 20px;
  font-size: 12px;
  color: var(--muted);
}

#filter-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px 10px;
  font-size: 12px;
  color: var(--muted);
}
/* Badge di filtro dal Wizard, aggiunto 2026-09-11 (vedi app.js showReviewFiltered) */
#wizard-filter-badge {
  display: flex; align-items: center; gap: 10px;
  background: var(--teal-light); color: var(--teal-deep);
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
}
#wizard-filter-badge button {
  background: white; border: 1px solid var(--teal-dark); color: var(--teal-dark);
  padding: 4px 8px; border-radius: 5px; font-size: 11px; cursor: pointer;
}
#filter-bar label { display: flex; align-items: center; gap: 6px; }
#filter-bar select {
  border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-size: 12px;
  background: white;
}
#pagination-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#pagination-controls button {
  background: transparent; border: 1px solid var(--border); color: var(--navy);
  padding: 5px 10px; border-radius: 5px; font-size: 11px; cursor: pointer;
}
#pagination-controls button:disabled { opacity: 0.35; cursor: default; }

#bulk-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px 10px;
}
#bulk-generate-btn {
  background: var(--navy);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
#bulk-generate-btn:disabled { opacity: 0.5; cursor: default; }
#bulk-batch-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
#bulk-batch-size {
  border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-size: 12px;
}
#bulk-retry-failed-btn, #bulk-continue-btn {
  background: var(--gold); color: var(--navy); border: none; padding: 7px 14px;
  border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer;
}
#bulk-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 12px;
  color: var(--muted);
}
.bulk-progress-track {
  flex: 1;
  max-width: 320px;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
#bulk-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 0.3s ease;
}
.ghost-btn-dark {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}

/* ── Table: wide, wraps naturally, no clipped mini-boxes ─────────────── */
#table-scroll, #history-scroll {
  margin: 0 20px 30px;
  overflow: auto;
  max-height: calc(100vh - 130px);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1400px; /* forces horizontal scroll instead of squeezing columns unreadable */
}
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy);
  color: white;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 10px;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
td {
  padding: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tbody tr:hover { background: #FBFAF5; }

.col-priority { width: 70px; }
.col-url { width: 200px; }
.col-metrics { width: 100px; }
.col-keyword { width: 160px; }
.col-title { width: 260px; }
.col-meta { width: 320px; }
.col-status { width: 130px; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: white;
}
.badge.Alta { background: var(--danger); }
.badge.Media { background: var(--warn); }
.badge.Bassa { background: var(--ok); }

.url-text {
  display: block;
  font-weight: 600;
  color: var(--navy);
  font-size: 11px;
  word-break: break-word;
  line-height: 1.4;
  text-decoration: none;
}
.url-text:hover { text-decoration: underline; color: var(--gold); }
/* Keyword column (2026-09-04): the keyword is real input to the AI prompt
   (see app.py "Keyword target:"), so it gets its own readable column instead
   of a 10px gray afterthought under the URL -- the whole point is that the
   team can SEE the tool is grounded in real keyword data, not just trust it. */
.kw-primary {
  font-size: 13px; font-weight: 700; color: var(--text);
  line-height: 1.35; word-break: break-word;
}
.kw-related {
  color: var(--teal-dark); font-size: 11px; margin-top: 5px; font-weight: 600;
  line-height: 1.4; word-break: break-word;
}
.kw-none {
  color: var(--muted); font-size: 11px; font-style: italic; line-height: 1.4;
}
.source-tag {
  display: inline-block; margin-top: 6px; padding: 2px 7px; border-radius: 10px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.src-gsc { background: var(--teal-light); color: var(--teal-deep); }
.src-catalog { background: #FBE3D9; color: var(--warn); }
.meta-src-theme { background: var(--teal-light); color: var(--teal-deep); margin: 0 0 4px 0; text-transform: none; letter-spacing: 0; font-size: 10px; }

/* 2026-09-11 (Cesar): tag per keyword puramente numeriche (es. "553888", un codice
   prodotto reale di Search Console ma senza significato di ricerca) -- stesso stile del
   badge fonte sopra, cosi' il team la riconosce a colpo d'occhio come "non una vera
   keyword" senza che il dato venga nascosto o scartato. */
.kw-numeric-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: #FBE3D9; color: var(--warn); vertical-align: middle;
}

.col-metrics div { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Text cells: normal wrapping, full content visible, no inner scrollbars */
.cell-text {
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  word-wrap: break-word;
  color: var(--text);
}
.current-title, .current-meta { color: var(--muted); }

.editable-cell { background: #FCFBF8; }
.cell-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  gap: 6px;
}
.char-count { font-size: 10px; color: var(--muted); white-space: nowrap; }
.char-count.over { color: var(--danger); font-weight: 700; }

.ai-btn {
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 4px 9px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-btn:hover { filter: brightness(0.95); }

.status-badge {
  display: inline-block;
  padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600;
  background: #EDEBE5; color: var(--muted); text-transform: capitalize;
}
.status-badge.approved { background: #E1F0E5; color: var(--ok); }
.status-badge.rejected { background: #F3E1E3; color: var(--danger); }

.actions-row { margin-top: 8px; display: flex; gap: 6px; }
.actions-row button {
  padding: 5px 10px; border-radius: 5px; border: none; font-size: 11px;
  cursor: pointer; font-weight: 600;
}
.approve-btn { background: var(--ok); color: white; }
.reject-btn { background: transparent; color: var(--danger); border: 1px solid var(--danger) !important; }
.generate-row-btn {
  background: var(--gold); color: var(--navy); width: 100%;
}
.generate-row-btn:disabled { opacity: 0.35; cursor: default; }
.generate-row-btn.working { opacity: 0.7; cursor: wait; }
.details-toggle-btn {
  background: transparent; color: var(--navy); border: 1px solid var(--border) !important;
  width: 100%;
}

/* ── H1 + Description detail panel (added round 8, H1/description scope) ─ */
.detail-row td { background: #FBFAF5; padding: 18px 20px; border-top: 2px solid var(--gold); }
/* align-items: stretch (the grid default, made explicit here) makes each
   .detail-field column match the row's tallest sibling -- e.g. H1's short
   column stretches to Descrizione's height. That alone isn't enough though:
   a stretched flex CONTAINER doesn't make its flex CHILDREN taller unless
   they're told to grow, so without flex:1 below, the H1 box stayed its
   natural short height with dead space appearing after its AI button
   instead -- which is the exact "different height, doesn't look even" bug
   Cesar flagged 2026-09-01. */
.detail-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: stretch; }
.detail-field { display: flex; flex-direction: column; gap: 4px; }
.detail-field-wide { grid-column: span 1; }
.detail-field label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted);
  margin-top: 6px;
}
.detail-field .cell-text {
  background: white; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  font-size: 12px; max-height: 160px; min-height: 70px; overflow-y: auto; white-space: pre-wrap;
  flex: 1;
}
.detail-field .ai-btn { align-self: flex-start; margin-top: 6px; flex: none; }
/* FIX 2026-09-11 (Cesar): sostituisce il vecchio ".hidden-for-product { display: none }"
   sul <td>, che toglieva la cella dal flusso della riga e sfasava le colonne successive
   (alt text, stato/azioni) di una posizione a sinistra sui prodotti -- vedi commento in
   app.js. La cella resta sempre nel flusso, solo attenuata visivamente. */
.field-not-applicable { background: #FAFAF8; }
.field-not-applicable .current-description_bottom { color: var(--muted); font-style: italic; }

/* FIX 2026-09-11, stesso giorno, seconda richiesta di Cesar dopo aver visto il fix sopra
   gia' live: "dobbiamo togliere o nascondere Descrizione inferiore che tanto serve solo
   per le categorie" -- il messaggio "Non applicabile" nella cella non bastava, voleva la
   colonna tolta del tutto quando si guardano i prodotti. Diverso dal vecchio bug: questa
   classe si applica alla TABELLA (#items-table), non a una singola riga, quindi nasconde
   SEMPRE insieme sia l'intestazione <th> sia tutte le celle <td> della colonna in un colpo
   solo -- mai il caso "alcune righe ce l'hanno, altre no" che causava lo sfasamento
   corretto in precedenza. Sicuro perche' questa tabella mostra sempre un solo page_type
   alla volta (vedi state.activeType in app.js): non c'e' mai un mix di righe prodotto e
   categoria nella stessa tabella che richiederebbe nascondere per riga. */
#items-table.hide-bottom-col .detail-field-bottom-only { display: none; }

/* FIX 2026-09-18 (ticket MSPDEV-10, Matteo Griggio): "Alt text immagini" e' solo per i
   prodotti (le categorie non hanno immagini prodotto da descrivere), stesso meccanismo
   whole-column della regola sopra. "Foto" nella tabella Keywords del Wizard, stesso
   discorso: le categorie non gestiscono immagini in questa schermata. */
#items-table.hide-alt-col .col-alt { display: none; }
#wizard-table.hide-photo-col .col-photo { display: none; }

/* Rendered HTML preview (added 2026-09-01, Cesar: "build it"). Only used for
   description/description_bottom, the two fields that legitimately contain
   real HTML tags meant for eventual publishing (h2/h3/p) -- everywhere else
   in this app content is shown as plain text via textContent specifically
   to avoid rendering untrusted content, this preview goes through
   sanitizeHtmlForPreview() in app.js (a tag/attribute whitelist walk, no
   raw innerHTML of AI output ever), never a raw insertion. */
.detail-field-actions { display: flex; gap: 8px; margin-top: 6px; }
.detail-field-actions .ai-btn { margin-top: 0; }
.preview-toggle-btn {
  background: transparent; color: var(--navy); border: 1px solid var(--border) !important;
  border-radius: 6px; padding: 4px 9px; font-weight: 700; font-size: 11px; cursor: pointer;
}
.preview-toggle-btn.active { background: var(--teal-light); border-color: var(--teal) !important; }
.cell-text-preview {
  background: #FBFAF5; border: 1px dashed var(--teal); border-radius: 6px; padding: 10px 12px;
  font-size: 13px; max-height: 220px; overflow-y: auto; flex: 1; line-height: 1.5;
}
.cell-text-preview h2 { font-size: 15px; margin: 0 0 6px; color: var(--teal-deep); }
.cell-text-preview h3 { font-size: 13px; margin: 8px 0 4px; color: var(--teal-dark); }
.cell-text-preview p { margin: 0 0 8px; }
.cell-text-preview ul, .cell-text-preview ol { margin: 0 0 8px 18px; }

/* ── AI note popover ─────────────────────────────────────────────────── */
.popover {
  position: fixed;
  width: 360px;
  max-height: 440px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 50;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
}
.popover-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 13px; color: var(--navy);
}
.popover-header button {
  background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1;
}
.popover-hint { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.feedback-history { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; }
.feedback-item { font-size: 11px; background: #F0EEE8; padding: 6px 9px; border-radius: 6px; }
.feedback-item .fb-user { font-weight: 700; }
.feedback-item .fb-field { color: var(--gold); font-weight: 700; text-transform: uppercase; font-size: 9px; }
#ai-note-input {
  width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  font-size: 12px; font-family: inherit; resize: vertical; min-height: 56px;
}
#ai-regenerate-btn {
  background: var(--gold); color: var(--navy); border: none;
  padding: 8px 14px; border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 12px;
}
.qa-errors { background: #F3E1E3; color: var(--danger); padding: 8px 10px; border-radius: 6px; font-size: 11px; }
.qa-errors li { margin-bottom: 2px; }

/* ── Mobile responsive layer (added 2026-09-01, Cesar's request) ──────────
   Scoped almost entirely to this @media block so the verified desktop
   experience (dense Excel-style table, Cesar's explicit round-15 decision)
   stays untouched above 700px. Fixes seen live on a real phone screenshot:
   header text wrapping to 3 lines and eating half the screen, the wide
   table requiring horizontal scroll with zero anchor for "which row am I
   on", the H1/description panel squeezing to unreadable slivers, and the
   AI note popover (positioned/sized for a desktop click point) overflowing
   a narrow viewport. */
@media (max-width: 700px) {
  html, body { height: 100%; }
  body { overflow: hidden; } /* only #table-scroll/#history-scroll scroll -- no double scrollbars */
  #app-view { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  header, #tabs, #stats-bar, #filter-bar, #bulk-bar { flex: 0 0 auto; }

  header { padding: 8px 10px; gap: 6px; }
  .brand-logo { width: 28px; height: 28px; }
  .brand-name { font-size: 12px; white-space: nowrap; }
  .brand-tagline { display: none; } /* reclaim a full line, redundant once you're in the app */
  .header-right { gap: 8px; }
  #whoami { display: none; } /* "Cesar (test)" was wrapping to its own line; Esci button is what matters */
  .ghost-btn { padding: 6px 10px; font-size: 11px; }

  #tabs { padding: 6px 10px 0; gap: 4px; overflow-x: auto; }
  .tab-btn { padding: 8px 12px; font-size: 12px; min-height: 34px; }

  #stats-bar { padding: 6px 10px; font-size: 11px; }

  #filter-bar { flex-wrap: wrap; gap: 8px 14px; padding: 0 10px 8px; }
  #pagination-controls { margin-left: 0; width: 100%; justify-content: space-between; }
  #filter-bar select, #bulk-batch-size { min-height: 32px; }

  #bulk-bar { flex-wrap: wrap; row-gap: 8px; padding: 0 10px 10px; }
  #bulk-progress { flex-basis: 100%; }
  .bulk-progress-track { max-width: none; }
  #bulk-generate-btn, #bulk-retry-failed-btn, #bulk-continue-btn { min-height: 36px; }

  /* Table: keep the dense desktop layout, but pin the URL/query column
     while scrolling horizontally so the row you're reviewing never scrolls
     out of sight -- the #1 usability problem with a wide table on a phone. */
  #table-scroll, #history-scroll {
    margin: 0 6px 6px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }
  td.col-url {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card);
    box-shadow: 2px 0 4px rgba(0,0,0,0.08);
  }
  thead th.col-url {
    position: sticky;
    left: 0;
    z-index: 3; /* above both the top-sticky header row (2) and scrolling-under body cells (1) */
  }

  /* Bigger touch targets on the actions every row has */
  .ai-btn, .actions-row button, .details-toggle-btn { min-height: 32px; }

  /* H1/description detail panel: stack instead of squeezing to slivers */
  .detail-grid { grid-template-columns: 1fr; gap: 14px; }
  .detail-row td { padding: 14px 10px; }

  /* AI note popover: bottom sheet instead of a small fixed box positioned
     from a desktop click point. `left`/`width` keep !important because
     nothing in JS ever sets those on mobile so there's no fight to lose;
     `top`/`bottom` deliberately do NOT have !important anymore (fixed
     2026-09-01, see the mobile-keyboard fix in app.js) -- openAiPopover()
     is now mobile-aware and leaves top/bottom for _applyMobilePopoverBounds()
     to set inline via the VisualViewport API, which is the only way to keep
     the popover (and its submit button) above the iOS on-screen keyboard
     instead of sized against the static layout viewport's 75vh, which does
     not shrink when the keyboard opens. max-height/bottom below are just the
     fallback for the instant before JS runs, or if visualViewport is
     unsupported. */
  .popover {
    top: auto;
    bottom: 0;
    left: 0 !important;
    right: 0;
    width: 100% !important;
    max-width: 100%;
    max-height: 75vh;
    border-radius: 14px 14px 0 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
}

/* ── Wizard, Schermata 0 + 1 (added 2026-09-04, Fase 4) ───────────────────
   Additive block: reuses the same variables/spacing/font-sizes as the rest
   of the file, no new palette introduced. */
.wizard-select-box {
  max-width: 420px;
  margin: 40px auto;
  padding: 28px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.wizard-select-box h2 { margin: 0 0 18px; color: var(--navy); font-size: 18px; }
.wizard-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
}
.wizard-scope-btn {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.wizard-scope-btn.active { background: var(--gold); color: white; border-color: var(--gold); }
#wizard-block-size {
  border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; font-size: 13px;
}
#wizard-generate-btn {
  background: var(--navy);
  color: white;
  border: none;
  padding: 10px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

#wizard-keywords-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}
#wizard-keywords-title { font-size: 13px; color: var(--muted); font-weight: 600; }
#wizard-bulk-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px 10px;
  font-size: 12px;
  color: var(--muted);
}
#wizard-optimize-btn {
  background: var(--gold); color: white; border: none; padding: 8px 16px;
  border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer;
}
#wizard-optimize-btn:disabled { opacity: 0.5; cursor: default; }
#wizard-table-scroll {
  margin: 0 20px 30px;
  overflow: auto;
  max-height: calc(100vh - 200px);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
}
#wizard-table { min-width: 1100px; }
.col-photo { width: 64px; }
.wizard-photo {
  width: 48px; height: 48px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border);
  display: block; background: var(--border);
}
.wizard-photo-placeholder { visibility: hidden; }
.wizard-score { font-size: 10px; color: var(--gold); font-weight: 600; margin-top: 4px; }
/* Aggiunto 2026-09-11 (Cesar): flag di affidabilita' del contenuto. Stile ad outline
   (non pieno come .badge della priorita' sopra) apposta per essere visivamente diverso
   dal badge di priorita', anche se condividono le stesse tre parole Alta/Media/Bassa. */
.wizard-reliability { font-size: 10px; font-weight: 600; margin-top: 2px; }
.reliability-badge, .wizard-reliability {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px;
  font-weight: 700; border: 1.5px solid; background: transparent;
}
.rel-Alta { color: var(--ok); border-color: var(--ok); }
.rel-Media { color: var(--warn); border-color: var(--warn); }
.rel-Bassa { color: var(--danger); border-color: var(--danger); }
.col-priority .reliability-badge { display: block; margin-top: 5px; width: fit-content; }
.wizard-kw-cell { font-size: 12px; }
.wizard-kw-text { display: block; margin-bottom: 4px; }
.wizard-kw-remove-btn {
  background: transparent; border: 1px solid var(--danger); color: var(--danger);
  padding: 2px 8px; border-radius: 5px; font-size: 10px; cursor: pointer;
}
.wizard-kw-remove-btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 700px) {
  .wizard-select-box { margin: 20px auto; max-width: 92%; }
  #wizard-keywords-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  #wizard-bulk-bar { flex-wrap: wrap; row-gap: 8px; }
}

/* ── Prodotti/Categorie, Fase 5 (added 2026-09-05): colonne impilate,
   selezione multipla, alt text. Il resto della tabella (badge, cell-text,
   ai-btn, actions-row, cell-text-preview) è invariato da prima. ─────────── */
#bulk-bar label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
#bulk-confirm-selected-btn, #bulk-regenerate-selected-btn {
  background: var(--gold); color: white; border: none; padding: 7px 14px;
  border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer;
}
#bulk-confirm-selected-btn:disabled, #bulk-regenerate-selected-btn:disabled { opacity: 0.5; cursor: default; }

.col-select { width: 34px; text-align: center; }
.col-stack { width: 240px; }
.col-stack.col-wide { width: 320px; }

/* Espandi tutto/Comprimi tutto, added 2026-09-05 (mockup toolbar action, finito su
   richiesta di Cesar dopo la Fase 5). Descrizione/Descrizione inferiore possono superare
   1000 caratteri e rendevano ogni riga altissima; ora sono troncate a ~3 righe per
   default, il bottone toglie il limite per tutta la tabella in un colpo solo (stato
   globale su #table-scroll, non per singola riga). Solo le colonne larghe: title/meta/h1
   sono già corte a sufficienza da non aver bisogno di troncamento. */
.col-wide .cell-text { max-height: 4.5em; overflow: hidden; }
#table-scroll.expanded .col-wide .cell-text { max-height: none; overflow: visible; }
#expand-toggle-btn {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 5px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
#expand-toggle-btn.active { background: var(--gold); border-color: var(--gold); color: white; }
.stack-divider { border-top: 1px dashed var(--border); margin: 8px 0; }
.col-alt { width: 200px; }

.alt-images { display: flex; flex-direction: column; gap: 8px; }
.alt-image-item { display: flex; gap: 6px; align-items: flex-start; }
.alt-image-thumb {
  width: 32px; height: 32px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border);
  background: var(--border); flex: none;
}
.alt-image-text { font-size: 11px; color: var(--muted); line-height: 1.4; }

#help-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.5); color: white;
  border-radius: 50%; width: 18px; height: 18px; font-size: 11px; line-height: 1;
  cursor: pointer; margin-left: 6px; padding: 0;
}
.regenerate-all-btn {
  background: transparent; border: 1px solid var(--gold); color: var(--gold);
  padding: 5px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;
}
.regenerate-all-btn.working { opacity: 0.7; cursor: wait; }
.regenerate-all-btn:disabled { opacity: 0.5; cursor: default; }

/* Alt text: proposta + bottone AI per immagine, aggiunto 2026-09-05 */
.alt-image-col { flex: 1; min-width: 0; }
.alt-ai-btn {
  background: var(--gold); color: white; border: none; padding: 2px 8px;
  border-radius: 5px; font-size: 10px; cursor: pointer; margin-top: 4px;
}
.alt-ai-btn:disabled { opacity: 0.5; cursor: wait; }

/* Fase 6 staging: bottone di scrittura Shopify, SEMPRE in modalità di prova */
.push-shopify-btn {
  background: transparent; border: 1px solid var(--muted); color: var(--muted);
  padding: 5px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;
}
.push-shopify-btn:disabled { opacity: 0.5; cursor: wait; }

/* Fase 5 aggiunse checkbox + H1 + Descrizione + Descrizione inferiore + Alt text come
   colonne sempre visibili: la tabella è più larga di prima, override solo qui, non sul
   selettore generico "table" che serve anche a Cronologia (nascosta ma non rimossa) e al
   wizard. */
#items-table { min-width: 1900px; }

@media (max-width: 700px) {
  #bulk-bar { flex-wrap: wrap; row-gap: 8px; }
}