/* =========================================================
   S.E.M.N.S. Creations — admin-styles.css
   Stili del pannello admin (login + dashboard prodotti).
   Riusa le variabili colore/font definite in styles.css.
   ========================================================= */

.admin-body {
  min-height: 100vh;
}

/* ---------- Login ---------- */
.admin-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.admin-card {
  width: 100%;
  max-width: 420px;
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border-top: 3px dashed var(--thread-soft);
  padding: 40px 36px 32px;
  text-align: center;
}

/* Stessa identica "grafica" del logo del sito pubblico (.logo/.logo-text/
   .logo-mark/.logo-sub in styles.css), riprodotta qui con nomi propri per
   restare indipendente dal markup dell'header del sito. */
.admin-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.6em;
}
.admin-logo-icon { height: 34px; width: auto; display: block; }
.admin-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.admin-logo-mark {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brown-dark);
  letter-spacing: 0.03em;
}
.admin-logo-sub {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wood);
}

.admin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: var(--thread);
  font-weight: 500;
  margin: 0 0 0.6em;
}
.admin-eyebrow .icon { width: 16px; height: 16px; }

.admin-title { font-size: 1.7rem; margin-bottom: 0.35em; }
.admin-subtitle {
  color: var(--text-soft);
  font-size: 0.92rem;
  margin-bottom: 1.8em;
}

.admin-notice {
  text-align: left;
  background: var(--beige);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 0.85rem;
  color: var(--text-main);
  margin-bottom: 1.6em;
  line-height: 1.6;
}
.admin-notice code {
  background: rgba(74, 51, 36, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.admin-form {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.admin-form label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
  margin: 14px 0 6px;
}
.admin-form input {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--beige-deep);
  background: var(--cream);
  color: var(--text-main);
}
.admin-form input:focus { outline: none; border-color: var(--thread); }

.admin-error {
  color: var(--thread);
  font-size: 0.87rem;
  min-height: 1.3em;
  margin: 10px 0 0;
}

.admin-submit {
  margin-top: 18px;
  justify-content: center;
  width: 100%;
}
.admin-submit.is-loading { opacity: 0.7; pointer-events: none; }

.admin-back-link {
  display: inline-block;
  margin-top: 1.8em;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.admin-back-link:hover { color: var(--wood-deep); }

/* =========================================================
   DASHBOARD
   ========================================================= */
.admin-dashboard-body { background: var(--cream); }

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 241, 230, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--beige-deep);
}
.admin-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.admin-topbar .admin-logo { margin-bottom: 0; }
.admin-topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.admin-topbar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--beige);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--thread);
}
.admin-topbar-eyebrow .icon { width: 13px; height: 13px; }
.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 28px 90px;
}

.admin-main-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 1.4em;
}
.admin-main-head h1 { font-size: 2rem; margin-bottom: 0.15em; }
.admin-count { color: var(--text-soft); font-size: 0.9rem; margin: 0; }

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.4em;
}

/* Riga filtri/ordinamento: riusa .filter-group, .filter-pill,
   .filter-select-group e .filter-sort definiti in styles.css per lo Shop
   pubblico, così l'aspetto e il comportamento (pulsanti su desktop,
   tendine sotto i 768px) restano identici tra sito e pannello. */
.admin-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 1.4em;
}
@media (max-width: 700px) {
  .admin-filters-row { flex-direction: column; align-items: stretch; }
  .admin-filters-row .filter-sort { justify-content: space-between; }
}

.admin-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}
.admin-archived-toggle input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--thread-soft);
  cursor: pointer;
}
@media (max-width: 700px) {
  .admin-archived-toggle { margin-left: 0; }
}
.admin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white-soft);
  border: 1.5px solid var(--beige-deep);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--wood);
  max-width: 340px;
  box-shadow: var(--shadow-card);
}
.admin-search .icon { width: 17px; height: 17px; }
.admin-search input {
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-main);
  width: 100%;
}

.admin-seed-box {
  background: var(--beige);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 1.6em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-seed-box p { margin: 0; color: var(--text-main); font-size: 0.92rem; }

.admin-load-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: var(--text-soft);
  padding: 60px 20px;
}
/* Il testo "Caricamento in corso..." usa lo stesso ago-che-cuce del
   negozio (.shop-loading-stitch e affini, definiti in styles.css). Se
   admin.js sostituisce il contenuto con un messaggio d'errore, resta
   solo il testo semplice, centrato dal contenitore. */
.admin-load-state-text {
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--wood);
}

.admin-table-wrap {
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 720px;
}
.admin-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wood);
  background: var(--cream-deep);
  padding: 14px 16px;
  font-weight: 600;
}
.admin-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--cream-deep);
  vertical-align: middle;
  color: var(--text-main);
}
/* Il bigliettino "novità" (in coda alla riga, per non spostare le colonne
   usate dalla "Tabella compatta") non ha una colonna di intestazione:
   in QUALSIASI vista tabellare va sempre nascosto, si vede solo nelle
   "Schede" (vedi le regole scoped più sotto). */
body.admin-view-compact .admin-cell-newbadge { display: none; }
body.admin-view-compact .admin-cell-grow { display: none; }
/* Il chip pieno "Cresce con te" (sopra) resta nascosto in ogni vista
   tabellare per non spostare le colonne: al suo posto, una piccola
   pianticella accanto al codice prodotto (vedi .admin-grow-table-icon
   in admin.js) segnala comunque l'articolo, qui e da cellulare. */
body.admin-view-compact .admin-grow-table-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  color: var(--thread);
  vertical-align: -2px;
  margin-left: 4px;
}
.admin-desc-cell {
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  max-width: 320px;
  white-space: normal;
}

/* ---------- "Tabella compatta" da desktop/tablet: griglia con celle
   raggruppate ----------
   Stato e Tecnica non hanno più una colonna propria: appaiono impilati
   sotto, rispettivamente, Codice e Categoria, nella STESSA colonna — e
   Materiale si è spostato subito prima di Prezzo. Lo spazio guadagnato
   va tutto alla Descrizione, più larga. Il markup dei <td> resta quello
   di sempre (stesso ordine nel DOM di admin.js, e le stesse celle usate
   dalle "Schede" più sopra e dalla vista compatta da cellulare più
   sotto): qui si dice solo a ciascuna cella in quale colonna/riga della
   griglia finire, un po' come la vista compatta da cellulare fa già con
   gli indici nth-child. Non tocca la tabella "Articoli venduti"
   (#salesTableWrap), che resta una tabella vera con le sue colonne. */
@media (min-width: 701px) {
  body.admin-view-compact #adminTableWrap .admin-table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  body.admin-view-compact #adminTableWrap .admin-table thead,
  body.admin-view-compact #adminTableWrap .admin-table tbody {
    display: block;
    width: 100%;
  }
  body.admin-view-compact #adminTableWrap .admin-table thead tr,
  body.admin-view-compact #adminTableWrap .admin-table tbody tr {
    display: grid;
    grid-template-columns: 60px 96px 150px minmax(180px, 2fr) 130px 130px 68px 148px;
    column-gap: 10px;
  }
  body.admin-view-compact #adminTableWrap .admin-table tbody tr {
    align-items: center;
    /* La riga di separazione tra un articolo e l'altro ora vive qui,
       su tutta la riga della griglia: con Codice+Stato e Categoria+Tecnica
       impilate su due "piani" diversi, il bordo delle singole celle non
       cadrebbe più tutto alla stessa altezza (risultato: righe sfasate).
       Una sola linea sulla riga stessa resta invece dritta, sempre. */
    border-top: 1px solid var(--cream-deep);
  }
  body.admin-view-compact #adminTableWrap .admin-table td,
  body.admin-view-compact #adminTableWrap .admin-table th {
    padding: 10px 6px;
    min-width: 0;
    overflow-wrap: anywhere;
    border-top: none;
  }
  body.admin-view-compact #adminTableWrap .admin-table th:first-child,
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-thumb {
    padding-left: 12px;
    padding-right: 4px;
  }
  body.admin-view-compact #adminTableWrap .admin-table th:last-child,
  body.admin-view-compact #adminTableWrap .admin-table td.admin-row-actions {
    padding-right: 16px;
  }
  /* La miniatura si restringe un filo per stare comoda nella colonna
     stretta della foto (era pensata per una colonna native-table che si
     allargava da sola in base al contenuto). */
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-thumb .admin-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-thumb .admin-thumb .icon {
    width: 16px;
    height: 16px;
  }

  /* Intestazioni: stessa griglia dei dati sotto, una riga sola */
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(1) { grid-column: 1; }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(2) { grid-column: 2; }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(3) { grid-column: 3; }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(4) { grid-column: 4; }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(5) { grid-column: 5; }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(6) { grid-column: 6; }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(7) { grid-column: 7; }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(8) { grid-column: 8; }
  /* Un'unica fascia continua per l'intestazione (non più un rettangolo di
     sfondo per ciascuna colonna, con "buchi" chiari negli spazi tra una
     colonna e l'altra): lo sfondo va sulla riga intera, le singole celle
     restano trasparenti. */
  body.admin-view-compact #adminTableWrap .admin-table thead tr {
    background: var(--cream-deep);
  }
  body.admin-view-compact #adminTableWrap .admin-table thead th {
    background: transparent;
  }
  /* Al posto dei rettangoli, le colonne si separano con una sottile linea
     tratteggiata (come un filo), che corre per tutta l'altezza della
     colonna: intestazione compresa, riga dopo riga. Attaccata sempre a
     una cella "intera" (alta quanto tutta la riga articolo), mai a
     Codice/Stato o Categoria/Tecnica che sono impilate su mezza altezza
     ciascuna e spezzerebbero la linea. */
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(1),
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-thumb {
    border-right: 1px dashed var(--thread-soft);
  }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(3),
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-name {
    border-left: 1px dashed var(--thread-soft);
  }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(4),
  body.admin-view-compact #adminTableWrap .admin-table td.admin-desc-cell {
    border-left: 1px dashed var(--thread-soft);
    border-right: 1px dashed var(--thread-soft);
  }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(6),
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-material {
    border-left: 1px dashed var(--thread-soft);
    border-right: 1px dashed var(--thread-soft);
  }
  body.admin-view-compact #adminTableWrap .admin-table th:nth-child(7),
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-price {
    border-right: 1px dashed var(--thread-soft);
  }

  /* Foto, Nome, Descrizione, Materiale, Prezzo, Azioni: una sola cella
     per articolo, alta quanto le due righe. La riga (tr) centra il suo
     contenuto per Codice/Stato e Categoria/Tecnica (impilate), ma queste
     celle "intere" devono invece OCCUPARE tutta l'altezza (align-self:
     stretch, non il centraggio ereditato dalla riga) — altrimenti la
     loro casella si accorcia al solo contenuto e il bordo tratteggiato
     verticale si accorcia con lei, spezzandosi da una riga all'altra.
     Il contenuto resta comunque centrato, ma internamente, con un
     piccolo flex sulla cella stessa. */
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-thumb {
    grid-column: 1; grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-name {
    grid-column: 3; grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-desc-cell {
    grid-column: 4;
    grid-row: 1 / span 2;
    max-width: none;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-material {
    grid-column: 6; grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-price {
    grid-column: 7; grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-row-actions {
    grid-column: 8;
    grid-row: 1 / span 2;
    gap: 6px;
    align-self: stretch;
    align-items: center;
  }
  /* Pulsanti azione un filo più piccoli, per stare comodi in quattro
     sulla larghezza della colonna (qui più stretta che nelle "Schede"). */
  body.admin-view-compact #adminTableWrap .admin-table td.admin-row-actions .admin-icon-btn {
    width: 26px;
    height: 26px;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-row-actions .admin-icon-btn .icon {
    width: 12px;
    height: 12px;
  }

  /* Codice + Stato, impilati nella stessa colonna (2) */
  body.admin-view-compact #adminTableWrap .admin-table td.admin-code-cell {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-status {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding-top: 2px;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-status .admin-status-pill {
    font-size: 0.62rem;
    padding: 3px 8px;
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }

  /* Categoria + Tecnica, impilate nella stessa colonna (5) */
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-category {
    grid-column: 5;
    grid-row: 1;
    align-self: end;
  }
  body.admin-view-compact #adminTableWrap .admin-table td.admin-cell-technique {
    grid-column: 5;
    grid-row: 2;
    align-self: start;
    padding-top: 2px;
    color: var(--text-soft);
    font-size: 0.8rem;
  }
}

.admin-thumb {
  width: 48px; height: 48px;
  border-radius: 8px;
  border: 1.5px dashed var(--thread-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wood-light);
  background: var(--cream);
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-thumb .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }

.admin-status-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--white-soft);
  white-space: nowrap;
}
/* "Archiviato": concetto solo admin (non esiste nello Shop pubblico), colore
   neutro per distinguerlo dagli stati disponibile/ordinazione/esaurito. */
.admin-status-pill.status-archived { background: var(--text-soft); margin-left: 6px; }
.admin-cell-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Riga archiviata (visibile solo con "Mostra anche gli archiviati"): resa
   visivamente attenuata così si distingue a colpo d'occhio dagli articoli
   attivi, senza nasconderne i dati. */
tr.admin-row-archived { opacity: 0.6; }
body.admin-view-compact .admin-row-archived { opacity: 0.6; }

.admin-row-actions { display: flex; gap: 8px; }
.admin-icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--beige-deep);
  background: var(--cream);
  color: var(--wood-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-icon-btn .icon { width: 15px; height: 15px; }
.admin-icon-btn:hover { border-color: var(--wood); background: var(--white-soft); }
.admin-icon-btn-danger:hover { border-color: var(--thread); color: var(--thread); }
.admin-icon-btn-sold:hover { border-color: var(--status-ok); color: var(--status-ok); }
.admin-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.admin-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-soft);
  background: var(--white-soft);
  border-radius: var(--radius);
}
.admin-empty-state .btn { margin-top: 14px; }

/* ---------- Vista "Schede": griglia di card con tutte le informazioni ----------
   A differenza della "Tabella compatta" (righe strette, tutto in colonne),
   qui ogni articolo è una scheda con foto, testo e azioni ben leggibili —
   comoda per scorrere il catalogo a colpo d'occhio, con tutte le azioni
   sempre a portata di click. Vale per qualunque larghezza dello schermo;
   sotto i 700px una regola più specifica (vedi il relativo @media più
   sotto) la trasforma invece in una griglia compatta a due colonne con
   il dettaglio completo apribile toccando la scheda. */
body:not(.admin-view-compact) .admin-table-wrap {
  overflow-x: visible;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
body:not(.admin-view-compact) .admin-table {
  display: block;
  width: 100%;
  min-width: 0;
}
body:not(.admin-view-compact) .admin-table thead { display: none; }
body:not(.admin-view-compact) .admin-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
  align-items: start;
}
/* Ogni scheda è una piccola griglia ad "aree" nominate: permette di
   disporre le celle nell'ordine visivo che vogliamo (chip "Cresce con
   te" accanto al codice, categoria/tecnica sulla stessa riga, pulsanti
   azione sempre in fondo a tutto) senza toccare l'ordine dei <td> nel
   DOM — che deve restare fisso perché la "Tabella compatta" da
   cellulare lo usa per posizionare le celle via nth-child (vedi il
   commento in admin.js). */
body:not(.admin-view-compact) .admin-table tr {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-areas:
    "thumb    thumb"
    "code     grow"
    "name     name"
    "cat      tech"
    "desc     desc"
    "price    price"
    "material material"
    "actions  actions";
  column-gap: 8px;
  position: relative;
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1.5px dashed var(--thread-soft);
}
body:not(.admin-view-compact) .admin-table td {
  display: block;
  padding: 0 16px;
  border-top: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Niente più etichette "CODICE / NOME / ..." ripetute su ogni riga: si
   legge come una scheda prodotto, non come un modulo compilato. */
body:not(.admin-view-compact) .admin-table td[data-label]::before { content: none; }

/* La foto riempie la parte alta della scheda, come un'anteprima vera,
   con lo stato in sovraimpressione nell'angolo (come nello Shop). */
body:not(.admin-view-compact) .admin-cell-thumb { grid-area: thumb; padding: 0; }
body:not(.admin-view-compact) .admin-cell-thumb .admin-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  border-radius: 0;
  border: none;
}
body:not(.admin-view-compact) .admin-cell-thumb .admin-thumb .icon { width: 30px; height: 30px; }
body:not(.admin-view-compact) .admin-cell-status {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 0;
}
/* Bigliettino "novità", stesso stile e stessa regola (< 7 giorni, non
   esaurito) dello Shop pubblico: qui a destra, di fronte allo stato. Le
   schede qui sono un po' più strette di quelle dello Shop (240px contro
   270px), quindi a parità di dimensioni il bigliettino sembrava più
   grande: lo rimpiccioliamo leggermente per farlo apparire uguale. */
body:not(.admin-view-compact) .admin-table td.new-badge {
  padding: 6px 11px 7px;
  border-top: none;
  margin: 0;
  font-size: 1.05rem;
}

body:not(.admin-view-compact) .admin-code-cell {
  grid-area: code;
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 0.72rem;
}
/* Iconcina "cresce con te" accanto al codice: usata solo in "Tabella
   compatta" (vedi più sotto), nascosta di default perché nelle Schede
   il chip pieno la sostituisce già (.admin-cell-grow qui accanto). */
.admin-grow-table-icon { display: none; }

/* "Cresce con te" (facoltativo): non più una fascia a sé in fondo alla
   scheda, ma un chip allineato a destra sulla stessa riga del codice
   prodotto (stessa griglia, area "grow" accanto a "code" qui sopra). */
body:not(.admin-view-compact) .admin-table td.admin-cell-grow {
  grid-area: grow;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
  padding-left: 0;
}
body:not(.admin-view-compact) .admin-table td.admin-cell-grow .grow-chip {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

body:not(.admin-view-compact) .admin-cell-name { grid-area: name; }
body:not(.admin-view-compact) .admin-cell-name .admin-truncate {
  margin-top: 2px;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-main);
  white-space: normal;
}
/* Categoria e tecnica sulla stessa riga (prima una sotto l'altra), per
   risparmiare spazio verticale nella scheda. */
body:not(.admin-view-compact) .admin-cell-category { grid-area: cat; }
body:not(.admin-view-compact) .admin-cell-technique { grid-area: tech; text-align: right; }
body:not(.admin-view-compact) .admin-cell-category,
body:not(.admin-view-compact) .admin-cell-technique {
  margin-top: 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wood);
  font-weight: 600;
}
/* Descrizioni troppo lunghe non allungano più la scheda a dismisura
   rispetto alle vicine: si fermano dopo 3 righe, il resto si legge
   aprendo "Modifica". */
body:not(.admin-view-compact) .admin-table td.admin-desc-cell {
  grid-area: desc;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.4;
  max-width: none;
  white-space: normal;
}
body:not(.admin-view-compact) .admin-cell-price {
  grid-area: price;
  margin-top: 6px;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wood-deep);
}
/* Pulsanti azione: sempre in fondo alla scheda, sotto Materiale e
   "Cresce con te" — anche se nel DOM restano prima di loro (qui, con la
   griglia ad aree nominate, conta solo "grid-area", non l'ordine dei
   <td>, che deve restare fisso per la "Tabella compatta" da cellulare). */
body:not(.admin-view-compact) .admin-table td.admin-row-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px 14px;
  margin-top: 6px;
}
/* Materiale (facoltativo, testo libero): stessa idea di categoria/tecnica,
   con un'etichetta scritta via CSS dato che qui le intestazioni della
   tabella sono nascoste. */
body:not(.admin-view-compact) .admin-table td.admin-cell-material {
  grid-area: material;
  display: block;
  margin-top: 4px;
  padding: 10px 16px 4px;
  border-top: 1px dashed var(--cream-deep);
  font-size: 0.8rem;
  color: var(--text-soft);
}
body:not(.admin-view-compact) .admin-table td.admin-cell-material::before {
  content: "Materiale — ";
  font-weight: 600;
  color: var(--wood);
}

/* ---------- Modale prodotto ---------- */
.admin-modal-open { overflow: hidden; }

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(61, 43, 31, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  z-index: 200;
  overflow-y: auto;
}

.admin-modal {
  width: 100%;
  max-width: 660px;
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border-top: 3px dashed var(--thread-soft);
}

.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  border-bottom: 1px solid var(--cream-deep);
}
.admin-modal-head h2 { font-size: 1.4rem; margin: 0; }
.admin-modal-code {
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: 0.03em;
  color: var(--wood-deep);
}
.admin-code-cell {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  white-space: nowrap;
}
.admin-modal-close {
  width: 32px; height: 32px;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-soft);
  cursor: pointer;
}
.admin-modal-close:hover { color: var(--thread); }

.admin-product-form {
  padding: 24px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.admin-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.admin-form-field {
  display: flex;
  flex-direction: column;
}
.admin-form-field-narrow { max-width: 130px; }
@media (max-width: 480px) {
  .admin-form-field-narrow { max-width: none; }
}
.admin-field-hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--status-ok);
}
.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-main);
  cursor: pointer;
}
.admin-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--thread);
  cursor: pointer;
  flex-shrink: 0;
}
.admin-product-form label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.admin-product-form input,
.admin-product-form select,
.admin-product-form textarea {
  font-family: var(--font-body);
  font-size: 0.94rem;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1.5px solid var(--beige-deep);
  background: var(--cream);
  color: var(--text-main);
  resize: vertical;
}
.admin-product-form input:focus,
.admin-product-form select:focus,
.admin-product-form textarea:focus {
  outline: none;
  border-color: var(--thread);
}

.admin-photo-manager { display: flex; flex-direction: column; gap: 10px; }
.admin-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-photo-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.admin-photo-thumb {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 10px;
  border: 2px dashed var(--thread-soft);
  background: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
}
.admin-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-photo-cover-badge {
  position: absolute;
  top: 4px; left: 4px;
  background: var(--thread);
  color: var(--white-soft);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  z-index: 1;
}
.admin-photo-thumb-actions {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  background: rgba(74, 51, 36, 0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.admin-photo-thumb:hover .admin-photo-thumb-actions,
.admin-photo-thumb:focus-within .admin-photo-thumb-actions { opacity: 1; }
.admin-photo-thumb-btn {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 253, 249, 0.92);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.admin-photo-thumb-btn .icon { width: 12px; height: 12px; }
.admin-photo-thumb-btn:hover { background: var(--white-soft); color: var(--wood); }
.admin-photo-thumb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.admin-photo-thumb-btn-danger:hover { color: var(--thread); }
.admin-photo-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-photo-status { font-size: 0.8rem; color: var(--text-soft); margin: 0; min-height: 1.1em; }
.admin-photo-status-error { color: var(--thread); }
.admin-btn-danger { background: transparent; border: 1.5px solid var(--thread-soft); color: var(--thread) !important; }
.admin-btn-danger:hover { background: var(--thread); color: var(--white-soft) !important; }

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.admin-modal-small { max-width: 460px; }
.admin-sold-product-name {
  font-weight: 600;
  color: var(--wood-deep);
  margin: 0 0 4px;
}

/* ---------- Sezione "Articoli venduti" ---------- */
.admin-content-section > .stitch-divider {
  margin-bottom: 2.6em;
}
.admin-load-more-row {
  display: flex;
  justify-content: center;
  margin-top: 1.4em;
}

/* ---------- Sezione "Analytics" (apribile/richiudibile) ---------- */
.admin-analytics-inner { margin-top: 1.4em; display: flex; flex-direction: column; gap: 24px; }

.admin-analytics-period {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-analytics-period label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
}
.admin-analytics-period select {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--beige-deep);
  background: var(--white-soft);
  color: var(--text-main);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.admin-kpi-tile {
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  border-top: 3px solid var(--thread-soft);
}
.admin-kpi-label {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-kpi-value {
  margin: 0;
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--wood-deep);
  line-height: 1.1;
}
.admin-kpi-delta {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
}
.admin-kpi-delta.is-up { color: var(--status-ok); }
.admin-kpi-delta.is-down { color: var(--thread); }

.admin-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.admin-chart-card {
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* evita overflow del canvas dentro la grid */
}
.admin-chart-card-wide { grid-column: 1 / -1; }
.admin-chart-card h3 { margin: 0; font-size: 1.05rem; color: var(--wood-deep); }
.admin-chart-canvas-wrap {
  position: relative;
  height: 260px;
  width: 100%;
}
.admin-chart-canvas-wrap-donut { height: 220px; }
.admin-chart-empty {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  font-style: italic;
}
.admin-chart-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
}
.admin-stat-card { align-items: center; text-align: center; justify-content: center; }
.admin-stat-card .admin-kpi-value { font-size: 2.4rem; }
@media (max-width: 700px) {
  .admin-chart-canvas-wrap { height: 220px; }
  .admin-chart-canvas-wrap-donut { height: 200px; }
  .admin-kpi-value { font-size: 1.7rem; }
}

/* ---------- Sezione "Contenuti del sito" (apribile/richiudibile) ---------- */
.admin-content-section { margin-top: 3.2em; }
.admin-collapsible-head {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-collapsible-head:hover h2 { color: var(--thread); }
.admin-collapse-icon {
  width: 22px;
  height: 22px;
  color: var(--wood-deep);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.admin-collapsible-head[aria-expanded="true"] .admin-collapse-icon { transform: rotate(90deg); }
.admin-content-body { margin-top: 1.4em; }
.admin-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.admin-content-card {
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-content-card-wide { grid-column: 1 / -1; }
.admin-content-card h3 { margin: 0; font-size: 1.05rem; color: var(--wood-deep); }
.admin-content-hint { margin: 0; color: var(--text-soft); font-size: 0.82rem; }
.admin-content-divider {
  border: none;
  border-top: 1px solid var(--cream-deep);
  margin: 4px 0;
  width: 100%;
}
.admin-content-text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-content-card label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.admin-content-card textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--beige-deep);
  background: var(--cream);
  color: var(--text-main);
  resize: vertical;
  min-height: 260px;
}
.admin-content-card textarea:focus { outline: none; border-color: var(--thread); }

/* Topbar più compatta sui telefoni: senza queste regole logo, badge
   "Area riservata", pulsante "Torna al sito" ed "Esci" finiscono
   ognuno su una riga a piena larghezza (tutti pensati per desktop),
   occupando uno spazio verticale enorme prima ancora di arrivare ai
   prodotti. Qui restano solo due righe compatte. */
@media (max-width: 700px) {
  .admin-topbar-inner { padding: 10px 16px; gap: 8px 14px; }
  .admin-topbar-brand { gap: 8px; }
  .admin-logo-icon { height: 24px; }
  .admin-logo-mark { font-size: 1rem; }
  .admin-logo-sub { font-size: 0.6rem; letter-spacing: 0.14em; }
  .admin-topbar-eyebrow { padding: 3px 9px; font-size: 0.62rem; }
  .admin-topbar-eyebrow .icon { width: 11px; height: 11px; }
  .admin-topbar-right { width: 100%; justify-content: space-between; gap: 10px; }
  .admin-back-btn { padding: 6px 14px; font-size: 0.78rem; gap: 5px; }
  .admin-back-btn .btn-icon { width: 13px; height: 13px; }
  #logoutBtn { padding: 6px 14px; font-size: 0.78rem; }
}

/* Pulsanti per passare da "Schede" (griglia di card) a "Tabella
   compatta": ora visibili anche da desktop/tablet, dato che le due
   viste hanno un aspetto davvero diverso a qualunque larghezza. */
.admin-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--white-soft);
  border: 1.5px solid var(--beige-deep);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-card);
}
.admin-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--wood-deep);
  cursor: pointer;
  white-space: nowrap;
}
.admin-view-btn .icon { width: 14px; height: 14px; flex: none; }
.admin-view-btn[aria-pressed="true"] {
  background: var(--wood-deep);
  color: var(--white-soft);
}

/* Tabelle prodotti e vendite su telefono, modalità "Schede" (default):
   invece di una tabella larga con scroll orizzontale, ogni riga diventa
   una scheda impilata con etichetta + valore, più comoda da leggere e
   toccare. Si passa alla "Tabella compatta" con il pulsante qui sopra. */
@media (max-width: 700px) {
  .admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
  .admin-search { max-width: none; flex: 1 1 100%; }
  .admin-view-toggle { flex: 1 1 100%; }

  #newProductBtn { padding: 8px 16px; font-size: 0.8rem; gap: 6px; }
  #newProductBtn .btn-icon { width: 13px; height: 13px; }

  /* Vista "Schede" da cellulare: griglia compatta a due colonne, come lo
     Shop pubblico. Ogni scheda mostra solo foto (con lo stato in
     sovraimpressione), nome (una riga) e prezzo; toccandola si apre il
     dettaglio a schermo intero con descrizione, categoria/tecnica e i
     pulsanti azione (modifica/duplica/venduto/elimina) — vedi
     openAdminProductDetail() in admin.js. */
  body:not(.admin-view-compact) .admin-table-wrap {
    overflow-x: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  body:not(.admin-view-compact) .admin-table { display: block; width: 100%; min-width: 0; }
  body:not(.admin-view-compact) .admin-table thead { display: none; }
  body:not(.admin-view-compact) .admin-table tbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
  }
  body:not(.admin-view-compact) .admin-table tr {
    display: block;
    position: relative;
    background: var(--white-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    cursor: pointer;
  }
  /* Di tutte le colonne della tabella, in questa vista compatta restano
     visibili solo foto, stato, nome e prezzo: il resto si vede aprendo
     il dettaglio. */
  body:not(.admin-view-compact) .admin-table td { display: none; }
  /* Descrizione e azioni hanno regole più specifiche (line-clamp e
     pulsanti in riga da desktop, vedi più sopra) che altrimenti
     vincerebbero su quella qui sopra a qualunque larghezza: vanno
     nascoste di nuovo esplicitamente. */
  body:not(.admin-view-compact) .admin-table td.admin-desc-cell,
  body:not(.admin-view-compact) .admin-table td.admin-row-actions,
  body:not(.admin-view-compact) .admin-table td.admin-cell-material,
  body:not(.admin-view-compact) .admin-table td.admin-cell-grow { display: none; }
  body:not(.admin-view-compact) .admin-table td.admin-cell-thumb,
  body:not(.admin-view-compact) .admin-table td.admin-cell-name,
  body:not(.admin-view-compact) .admin-table td.admin-cell-price,
  body:not(.admin-view-compact) .admin-table td.admin-cell-status,
  body:not(.admin-view-compact) .admin-table td.new-badge {
    display: block;
  }
  body:not(.admin-view-compact) .admin-cell-thumb {
    padding: 0;
  }
  body:not(.admin-view-compact) .admin-cell-thumb .admin-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 0;
    border: none;
  }
  body:not(.admin-view-compact) .admin-cell-thumb .admin-thumb .icon { width: 28px; height: 28px; }
  body:not(.admin-view-compact) .admin-cell-status {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    padding: 0;
    border: none;
  }
  body:not(.admin-view-compact) .admin-cell-status .admin-status-pill {
    font-size: 0.58rem;
    padding: 3px 7px;
  }
  body:not(.admin-view-compact) .admin-table td.new-badge {
    top: 4px; right: 4px;
    font-size: 0.85rem;
    padding: 4px 9px 5px;
  }
  body:not(.admin-view-compact) .admin-cell-name,
  body:not(.admin-view-compact) .admin-cell-price {
    padding: 6px 10px 0;
    border-top: none;
  }
  body:not(.admin-view-compact) .admin-cell-price {
    padding-top: 0;
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--wood-deep);
  }
  body:not(.admin-view-compact) .admin-cell-name .admin-truncate {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.86rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- Dettaglio articolo a schermo intero (vista Schede da cellulare) ----------
   Stessa impostazione del dettaglio prodotto dello Shop pubblico: un
   foglio che sale dal basso con tutte le informazioni e i pulsanti
   azione, aperto toccando una scheda compatta della griglia qui sopra. */
.admin-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(61, 43, 31, 0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.admin-detail-panel {
  position: relative;
  background: var(--cream);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}
.admin-detail-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 6;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(61, 43, 31, 0.72);
  color: var(--white-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.admin-detail-close svg { width: 18px; height: 18px; }
.admin-detail-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wood-light);
  border-bottom: 2px dashed var(--thread-soft);
}
.admin-detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-detail-thumb .icon { width: 34px; height: 34px; }
.admin-detail-thumb .admin-status-pill { position: absolute; top: 12px; left: 12px; }
.admin-detail-thumb .admin-detail-archived-pill { position: absolute; top: 46px; left: 12px; margin-left: 0; }
/* Qui il bigliettino "novità" e il pulsante di chiusura stanno entrambi
   in alto a destra: lo spostiamo un po' più a sinistra per non farli
   sovrapporre. */
.admin-detail-thumb .new-badge { top: 12px; right: 58px; }
.admin-detail-body { padding: 20px 22px 26px; }
.admin-detail-code {
  margin: 0 0 0.3em;
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--text-soft);
}
.admin-detail-body h3 { margin: 0 0 0.25em; font-size: 1.3rem; }
.admin-detail-meta {
  margin: 0 0 0.6em;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wood);
  font-weight: 600;
}
.admin-detail-desc { margin: 0 0 0.8em; font-size: 0.92rem; color: var(--text-main); }
.admin-detail-material { margin: 0 0 0.8em; font-size: 0.85rem; color: var(--text-soft); }
.admin-detail-material strong { color: var(--wood); font-weight: 600; }
.admin-detail-price {
  margin: 0 0 1em;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--wood-deep);
}
.admin-detail-actions { gap: 10px; }
body.admin-detail-open { overflow: hidden; }

/* Modalità "Tabella compatta" su telefono: una riga per articolo, ma il
   contenuto è su due righe di testo (più la foto, a sinistra, che le
   attraversa entrambe) invece che su un'unica riga stretta — così niente
   viene tagliato e non serve scorrimento orizzontale. Colonne secondarie
   (categoria, tecnica, acquirente, contatto, note) restano nascoste qui:
   si vedono tornando alla vista "Schede" oppure aprendo "Modifica". */
@media (max-width: 700px) {
  body.admin-view-compact .admin-table-wrap {
    overflow-x: hidden;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  body.admin-view-compact .admin-table { min-width: 0; width: 100%; }
  body.admin-view-compact .admin-table thead { display: none; }
  body.admin-view-compact .admin-table,
  body.admin-view-compact .admin-table tbody { display: block; width: 100%; }
  body.admin-view-compact .admin-table tr {
    display: grid;
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;
    background: var(--white-soft);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  body.admin-view-compact .admin-table td {
    padding: 0;
    border: none;
    min-width: 0;
    font-size: 0.78rem;
  }
  body.admin-view-compact .admin-col-secondary { display: none; }

  /* Foto: prima colonna, alta quanto le due righe di testo */
  body.admin-view-compact .admin-cell-thumb { grid-column: 1; grid-row: 1 / span 2; }
  body.admin-view-compact .admin-thumb { width: 42px; height: 42px; border-radius: 8px; }
  body.admin-view-compact .admin-thumb .icon { width: 16px; height: 16px; }

  /* Testo: mai più di una riga a cella, troncato con "…" se serve */
  body.admin-view-compact .admin-truncate,
  body.admin-view-compact .admin-code-cell,
  body.admin-view-compact .admin-table td:not(.admin-cell-thumb):not(.admin-row-actions) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.admin-view-compact .admin-truncate { font-weight: 600; color: var(--text-main); }
  body.admin-view-compact .admin-code-cell { color: var(--text-soft); font-size: 0.72rem; }
  body.admin-view-compact .admin-status-pill {
    padding: 2px 8px;
    font-size: 0.64rem;
    letter-spacing: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  /* Azioni: griglia 2×2 di icone, a destra, alta quanto le due righe */
  body.admin-view-compact .admin-row-actions {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    justify-self: end;
  }
  body.admin-view-compact .admin-icon-btn { width: 20px; height: 20px; border-radius: 5px; border-width: 1px; }
  body.admin-view-compact .admin-icon-btn .icon { width: 10px; height: 10px; }

  /* Disposizione — tabella "Prodotti": riga 1 = nome + prezzo,
     riga 2 = codice + stato, foto a sinistra, azioni a destra */
  body.admin-view-compact #adminTableWrap.admin-table-wrap .admin-table tr {
    grid-template-columns: 42px 1fr 62px 48px;
  }
  body.admin-view-compact #adminTableWrap .admin-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  body.admin-view-compact #adminTableWrap .admin-table td:nth-child(7) { grid-column: 3; grid-row: 1; text-align: right; }
  body.admin-view-compact #adminTableWrap .admin-table td:nth-child(2) { grid-column: 2; grid-row: 2; }
  body.admin-view-compact #adminTableWrap .admin-table td:nth-child(8) { grid-column: 3; grid-row: 2; }

  /* Disposizione — tabella "Articoli venduti": riga 1 = prodotto + prezzo,
     riga 2 = data + codice, foto a sinistra, nessuna colonna azioni */
  body.admin-view-compact #salesTableWrap.admin-table-wrap .admin-table tr {
    grid-template-columns: 42px 1fr 62px;
  }
  body.admin-view-compact #salesTableWrap .admin-table td:nth-child(4) { grid-column: 2; grid-row: 1; }
  body.admin-view-compact #salesTableWrap .admin-table td:nth-child(7) { grid-column: 3; grid-row: 1; text-align: right; }
  body.admin-view-compact #salesTableWrap .admin-table td:nth-child(2) { grid-column: 2; grid-row: 2; }
  body.admin-view-compact #salesTableWrap .admin-table td:nth-child(3) { grid-column: 3; grid-row: 2; text-align: right; }
}

@media (max-width: 640px) {
  .admin-form-row, .admin-form-row-3 { grid-template-columns: 1fr; }
  .admin-modal-head, .admin-product-form { padding-left: 20px; padding-right: 20px; }
  .admin-main-inner { padding: 32px 18px 70px; }
  .admin-modal-overlay { padding: 20px 12px; }
  .admin-content-text-row { grid-template-columns: 1fr; }
}