/* ============================================================
   Lista prodotti (index.html) — versione cellulare.
   Caricato solo sugli schermi stretti (vedi mobile.css).
   ============================================================ */

/* Badge "Sorgente" nella barra: solo il nome */
.sorgente-badge { padding: 4px 8px; font-size: 11px; margin-right: 0; white-space: nowrap; }

/* ── Barra di ricerca: due righe ──
   1: [cerca........][Cerca][📷][☐ Solo disp.]
   2: [📍 posizione.][Ordina ▾][⚙][+ Nuovo]                      */
.search-container {
    gap: 5px;
    padding: 6px;
    justify-content: flex-start;
}
.search-container::after {           /* a capo forzato tra le due righe */
    content: '';
    order: 5;
    flex-basis: 100%;
    height: 0;
}
.search-container input[type="text"],
.search-container select,
.search-container button,
.search-container .new-product,
.stock-filter-toggle,
.prod-settings-btn {
    font-size: 13px;
    padding: 6px 8px;
    height: 34px;
    box-sizing: border-box;
}
.search-container #searchInput {
    order: 1;
    flex: 1 1 110px;
    min-width: 0;
    width: auto;
}
.search-container #searchButton { order: 2; }
.search-container > button:not(#searchButton) {   /* Scansiona: solo icona */
    order: 3;
    font-size: 0;
    width: 36px;
    padding: 0;
}
.search-container > button:not(#searchButton) i { font-size: 15px; }
.stock-filter-toggle {
    order: 4;
    gap: 4px;
    padding: 6px;
}
.stock-filter-toggle span { font-size: 0; }
.stock-filter-toggle span::after { content: 'Solo disp.'; font-size: 12px; }
.search-separator { display: none; }

.position-input-wrapper {
    order: 6;
    flex: 1 1 90px;
    min-width: 0;
}
.position-input-wrapper i { margin-right: 4px !important; }
.position-input-wrapper input[type="text"] {
    width: 100%;
    min-width: 0;
}
.search-container #orderBySelect {
    order: 7;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 150px;
    font-size: 12px;
    padding: 6px 4px;
}
.prod-settings-wrapper {
    order: 8;
    position: static;          /* il menù si allinea alla barra intera */
}
.search-container .prod-settings-btn {
    font-size: 0;
    width: 36px;
    padding: 0;
}
.prod-settings-btn i { font-size: 15px; }
.prod-settings-menu {
    top: 100%;
    left: 6px;
    right: 6px;
    min-width: 0;
}
.search-container .new-product {
    order: 9;
    font-size: 0;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
}
.search-container .new-product::before { content: '+ Nuovo'; font-size: 13px; }

.position-dropdown {
    min-width: 0;
    width: calc(100vw - 12px);
    max-height: 50vh;
}

.position-filter-badge { margin: 2px auto; padding: 3px 10px; font-size: 12px; }
#searchTermDisplay { margin: 2px; font-size: 11px; }
#searchTermDisplay:has(#searchTermText:empty) { display: none; }

/* ── Tabella → schede compatte, una per prodotto ──
   [foto][Titolo su due righe                         ]
   [foto][€ prezzo][Qtà n][Pos. 0001     ][Salva  W AI]
   [foto][Categoria                        ][data mod.]           */
#productTable {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    table-layout: auto;
}
#productTable thead { display: none; }
#productTable tbody { display: block; }
#productTable tbody tr {
    display: grid;
    grid-template-columns: auto min(var(--prod-img-size, 50px), 64px) auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "sel img name  name  name name name"
        "sel img price stock pos  pos  act"
        "sel img cat   cat   cat  cat  date";
    column-gap: 6px;
    row-gap: 1px;
    align-items: center;
    padding: 5px 6px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}
#productTable tbody td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
}
#productTable tbody td:nth-child(1) { grid-area: sel; padding: 0 !important; }
#productTable tbody td:nth-child(2) { grid-area: img; align-self: start; }
#productTable tbody td:nth-child(3) { grid-area: name; }
#productTable tbody td:nth-child(4) { grid-area: stock; }
#productTable tbody td:nth-child(5) { grid-area: price; }
#productTable tbody td:nth-child(6) { grid-area: pos; }
#productTable tbody td:nth-child(7) { grid-area: date; }
#productTable tbody td:nth-child(8) { grid-area: cat; }
#productTable tbody td:nth-child(9) { grid-area: act; }

#productTable td .prod-thumb-wrap { height: auto; }
#productTable td img.prod-thumb {
    width: min(var(--prod-img-size, 50px), 64px);
    height: min(var(--prod-img-size, 50px), 64px);
    border-radius: 4px;
}

/* Valori modificabili (doppio tocco): compatti, su una riga */
#productTable td .product-input {
    font-size: 13px;
    line-height: 1.35;
    padding: 0 2px;
    min-height: 0;
    height: 1.4em;
    border: 0;
}
#productTable tbody td:nth-child(3) .product-input {
    field-sizing: content;     /* alta quanto il titolo, massimo due righe */
    height: auto;
    max-height: 2.75em;
    font-weight: 600;
    color: #111;
}
#productTable tbody td:nth-child(4),
#productTable tbody td:nth-child(5),
#productTable tbody td:nth-child(6) {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #6b7280;
}
#productTable tbody td:nth-child(4)::before { content: 'Qtà'; }
#productTable tbody td:nth-child(5)::before { content: '€'; }
#productTable tbody td:nth-child(6)::before { content: 'Pos.'; }
#productTable tbody td:nth-child(4) .product-input { width: 3.2ch; }
#productTable tbody td:nth-child(5) .product-input { width: 6ch; font-weight: 600; color: #111; }
#productTable tbody td:nth-child(6) .product-input { width: 100%; }
#productTable tbody td:nth-child(7) {
    font-size: 10.5px;
    color: #9ca3af;
    white-space: nowrap;
    text-align: right;
}
#productTable tbody td:nth-child(8) {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-actions { gap: 4px; justify-content: flex-end; }
.product-actions button { padding: 4px 9px; font-size: 12px; }
.product-actions .wordpress-link { margin-left: 0; font-size: 1.05em; }
.badge-ai { padding: 1px 5px; font-size: 10px; }

/* ── Paginazione ── */
.pagination { gap: 6px; margin: 8px 0 12px; padding: 0; }
.pagination button { padding: 7px 12px; margin: 0; font-size: 13px; }
#pageInfo { font-size: 13px; gap: 4px; }
#pageInput { width: 44px; padding: 4px; }

/* ── Finestre (scanner, ricerca da foto, modifica in blocco) ── */
.modal-content { width: 94%; padding: 10px; margin: 2vh auto; }
.scanner-modal-content { padding: 10px; }
.scanner-video-wrap video,
.scanner-video-wrap canvas { max-height: 55vh; }
.scanner-hint { display: none; }
.ocr-modal-content { margin: 2vh auto; max-height: 94vh; }
.ocr-preview-row { flex-direction: column; gap: 8px; }
.ocr-preview-row #ocrPreview { width: 100%; height: 160px; }
.ocr-buttons { flex-wrap: wrap; }
.ocr-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ocr-result-card img { height: 110px; }
.bulk-edit-popup-content { width: 96%; max-height: 94vh; }
.bulk-edit-popup-header,
.bulk-edit-popup-body,
.bulk-edit-popup-footer { padding: 10px; }
.bulk-edit-popup-header h2 { font-size: 17px; }
.bulk-edit-field { margin-bottom: 10px; }