/* Hotfix tabelle + immagini articoli
   Data: 2026-07-05 21:39
   Obiettivo:
   - pulsanti delle tabelle sempre leggibili anche su desktop stretto e mobile;
   - colonne "Azioni" non troncate, anche quando non sono l'ultima colonna;
   - pulsanti impilati verticalmente nelle celle operative;
   - miniature articoli e immagini vetrina più grandi su smartphone.
*/

/* Base desktop/tablet: corregge il problema visibile già su PC. */
main .table-wrap,
main .table-responsive{
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  padding-bottom:8px !important;
}

main table{
  table-layout:auto !important;
}

/* Celle operative: classi presenti nei template + classe aggiunta via JS. */
main table td.actions-cell,
main table th.actions-cell,
main table td.table-action-cell,
main table th.table-action-cell,
main table td.actions,
main table th.actions,
main table td.backup-actions,
main table td:has(.table-actions),
main table th:has(.table-actions),
main table td:has(> a.btn),
main table td:has(> button),
main table td:has(> form button),
main table td:has(> .inline-form button){
  min-width:240px !important;
  width:240px !important;
  max-width:300px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  vertical-align:top !important;
}

/* Gruppi azioni: una sola colonna. Senza questa regola il CSS Grid può affiancare i pulsanti. */
main table .table-actions,
main table .table-action-group{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-flow:row !important;
  gap:8px !important;
  width:100% !important;
  min-width:220px !important;
  max-width:280px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}

/* Pulsanti dentro celle tabellari: niente tagli, niente ellissi. */
main table .table-actions .btn,
main table .table-actions a.btn,
main table .table-actions button,
main table .table-action-group .btn,
main table .table-action-group a.btn,
main table .table-action-group button,
main table td.actions-cell > a.btn,
main table td.actions-cell > button,
main table td.actions-cell form > button,
main table td.table-action-cell > a.btn,
main table td.table-action-cell > a.small,
main table td.table-action-cell > button,
main table td.table-action-cell form > button,
main table td.actions > a.btn,
main table td.actions > button,
main table td.actions form > button,
main table td.backup-actions > a.btn,
main table td.backup-actions form > button{
  box-sizing:border-box !important;
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:42px !important;
  padding:9px 12px !important;
  margin:0 !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  line-height:1.16 !important;
  font-size:14px !important;
  text-align:center !important;
  text-decoration:none !important;
}

main table td.actions-cell form,
main table td.table-action-cell form,
main table td.actions form,
main table td.backup-actions form,
main table td.actions-cell .inline-form,
main table td.table-action-cell .inline-form,
main table td.actions .inline-form{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
}

main table td.table-action-cell > a.btn + a.btn,
main table td.table-action-cell > a.btn + form,
main table td.table-action-cell > form + a.btn,
main table td.table-action-cell > form + form,
main table td.actions-cell > a.btn + a.btn,
main table td.actions-cell > a.btn + form,
main table td.actions-cell > form + a.btn,
main table td.actions-cell > form + form{
  margin-top:8px !important;
}

/* Evita che una cella operativa ereditata da vecchi CSS resti a ellissi. */
main table td.actions-cell *,
main table td.table-action-cell *,
main table td.actions *,
main table td.backup-actions *{
  text-overflow:clip !important;
}

/* Miniature articoli in admin più leggibili. */
main table img.thumb,
main table .thumb{
  object-fit:cover !important;
  border-radius:10px !important;
}

@media (max-width: 980px){
  main table td.actions-cell,
  main table th.actions-cell,
  main table td.table-action-cell,
  main table th.table-action-cell,
  main table td.actions,
  main table th.actions,
  main table td.backup-actions,
  main table td:has(.table-actions),
  main table th:has(.table-actions),
  main table td:has(> a.btn),
  main table td:has(> button),
  main table td:has(> form button),
  main table td:has(> .inline-form button){
    min-width:230px !important;
    width:230px !important;
    max-width:270px !important;
  }

  main table .table-actions,
  main table .table-action-group{
    min-width:210px !important;
    max-width:250px !important;
  }

  main table .table-actions .btn,
  main table .table-actions a.btn,
  main table .table-actions button,
  main table .table-action-group .btn,
  main table .table-action-group a.btn,
  main table .table-action-group button,
  main table td.actions-cell > a.btn,
  main table td.actions-cell > button,
  main table td.actions-cell form > button,
  main table td.table-action-cell > a.btn,
  main table td.table-action-cell > a.small,
  main table td.table-action-cell > button,
  main table td.table-action-cell form > button,
  main table td.actions > a.btn,
  main table td.actions > button,
  main table td.actions form > button,
  main table td.backup-actions > a.btn,
  main table td.backup-actions form > button{
    min-height:44px !important;
    padding:10px 12px !important;
    font-size:14px !important;
  }

  main table img.thumb,
  main table .thumb{
    width:96px !important;
    height:96px !important;
    max-width:96px !important;
    min-width:96px !important;
  }

  main table td:has(img.thumb),
  main table th:has(img.thumb){
    min-width:116px !important;
    max-width:128px !important;
    text-align:center !important;
  }
}

@media (max-width: 420px){
  main table td.actions-cell,
  main table th.actions-cell,
  main table td.table-action-cell,
  main table th.table-action-cell,
  main table td.actions,
  main table th.actions,
  main table td.backup-actions,
  main table td:has(.table-actions),
  main table th:has(.table-actions),
  main table td:has(> a.btn),
  main table td:has(> button),
  main table td:has(> form button),
  main table td:has(> .inline-form button){
    min-width:220px !important;
    width:220px !important;
    max-width:245px !important;
  }

  main table .table-actions,
  main table .table-action-group{
    min-width:200px !important;
    max-width:225px !important;
  }

  main table img.thumb,
  main table .thumb{
    width:88px !important;
    height:88px !important;
    max-width:88px !important;
    min-width:88px !important;
  }
}

@media (max-width: 620px){
  /* Vetrina: foto più presenti nelle card e nella scheda pubblica articolo. */
  .product-image{
    height:360px !important;
  }

  .detail-wrap{
    width:calc(100% - 20px) !important;
    gap:18px !important;
    padding-top:12px !important;
  }

  .detail-photo{
    border-radius:24px !important;
  }

  .detail-photo img{
    width:100% !important;
    height:min(70vh,620px) !important;
    min-height:520px !important;
    object-fit:contain !important;
    background:#fff !important;
  }

  .detail-placeholder{
    min-height:520px !important;
    height:min(70vh,620px) !important;
  }
}

@media (max-width: 390px){
  .product-image{
    height:330px !important;
  }

  .detail-photo img,
  .detail-placeholder{
    min-height:470px !important;
    height:min(68vh,560px) !important;
  }
}

/* Link operativi scritti solo come class="small": trattali comunque come pulsanti nelle tabelle. */
main table td.table-action-cell > a.small:not(.btn),
main table td.actions-cell > a.small:not(.btn),
main table td.actions > a.small:not(.btn){
  border:1px solid #b95b00 !important;
  border-radius:7px !important;
  background:linear-gradient(#ffa642,#ff7b0c) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.18) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
}