/* =====================================================================
   Ordinex — Layer mobile additivo (touch-friendly)
   Caricato DOPO dashboard.css. Tutto sotto @media max-width:768px:
   il desktop resta invariato. Migliora form ordine e liste su smartphone.
   v1.0.0
   ===================================================================== */

@media (max-width: 768px) {

  /* ---- 1. FORM ORDINE: una colonna, niente griglia stretta ---- */
  .order-form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    margin-bottom: 1.25rem !important;
  }
  .order-form-grid .form-group[style*="grid-column"] {
    grid-column: auto !important;
  }

  /* ---- 2. CAMPI TOUCH-FRIENDLY: tap >=48px, font 16px (no zoom iOS) ---- */
  .form-group label {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
  }
  .form-group input,
  .form-group select,
  .form-group textarea,
  .order-details-table input,
  .order-details-table select,
  .order-details-table textarea {
    min-height: 48px !important;
    font-size: 16px !important;          /* evita lo zoom automatico su iOS */
    padding: 0.7rem 0.85rem !important;
    border-radius: 12px !important;
    width: 100% !important;
  }
  .form-group textarea {
    min-height: 88px !important;
  }
  /* select con freccia ben visibile e area ampia */
  .form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230f6ea8' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.4rem !important;
  }

  /* ---- 3. TABELLA ARTICOLI -> CARD IMPILATE ---- */
  .order-details-table,
  .order-details-table tbody,
  .order-details-table tr,
  .order-details-table td {
    display: block;
    width: 100% !important;
  }
  .order-details-table colgroup,
  .order-details-table thead {
    display: none;                        /* intestazioni non servono nelle card */
  }
  .order-details-table tr {
    background: #fff;
    border: 1px solid var(--border-color, rgba(15,110,168,.18));
    border-radius: 16px;
    padding: 0.85rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 2px 8px rgba(18,59,109,.06);
  }
  .order-details-table td {
    padding: 0.35rem 0 !important;
    border: none !important;
  }
  /* etichetta sopra ogni cella (ordine colonne: Articolo, Quantità, Note, Azioni) */
  .order-details-table td::before {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--secondary, #6b7a90);
    margin-bottom: 0.25rem;
  }
  .order-details-table td:nth-of-type(1)::before { content: "Articolo"; }
  .order-details-table td:nth-of-type(2)::before { content: "Quantità"; }
  .order-details-table td:nth-of-type(3)::before { content: "Note"; }
  .order-details-table td:nth-of-type(4)::before { content: "Azioni"; }
  .order-details-table td:nth-of-type(4) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem !important;
  }
  .order-details-table td:nth-of-type(4) .btn {
    flex: 1;
    min-height: 44px;
  }

  /* ---- 4. BARRA AZIONI "Dettagli Articoli": sticky in alto e tappabile ---- */
  /* La barra coi pulsanti resta agganciata in cima mentre si scorre la lista
     articoli, cosi' Aggiungi Riga e Salva Ordine sono sempre raggiungibili. */
  .order-details-bar {
    top: -1rem;                    /* compensa il padding di .content-area su mobile (1rem) */
    z-index: 30;
    align-items: stretch;
    gap: 0.6rem;
  }
  .order-details-bar-actions {
    width: 100%;
  }
  .order-details-bar-actions .btn {
    flex: 1;
    min-height: 48px;
  }
  /* il pulsante stampante resta compatto (icona) accanto agli altri */
  #ordPrinterBtn {
    flex: 0 0 auto;
    min-width: 52px;
  }
  .section-divider { margin: 1.25rem 0; }

  /* riepilogo economico a piena larghezza */
  .order-summary-panel { padding: 0.9rem 1rem; }

  /* ---- 5. LISTA ORDINI -> CARD (id, fornitore, tot, stato a colpo d'occhio) ---- */
  #ordiniTable,
  #ordiniTable tbody,
  #ordiniTable tr,
  #ordiniTable td {
    display: block;
    width: 100%;
  }
  #ordiniTable thead { display: none; }
  #ordiniTable tr {
    background: #fff;
    border: 1px solid var(--border-color, rgba(15,110,168,.18));
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 2px 10px rgba(18,59,109,.07);
  }
  #ordiniTable td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0 !important;
    border: none !important;
    text-align: right;
  }
  #ordiniTable td::before {
    content: attr(data-label);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary, #6b7a90);
    text-align: left;
    flex-shrink: 0;
  }
  /* etichette colonne lista ordini: ID, Fornitore, Data, Tot, Stato, Azioni */
  #ordiniTable td:nth-of-type(1)::before { content: "Ordine"; }
  #ordiniTable td:nth-of-type(2)::before { content: "Fornitore"; }
  #ordiniTable td:nth-of-type(3)::before { content: "Data"; }
  #ordiniTable td:nth-of-type(4)::before { content: "Totale €"; }
  #ordiniTable td:nth-of-type(5)::before { content: "Stato"; }
  #ordiniTable td:nth-of-type(6)::before { content: "Azioni"; }
  /* ID e totale in evidenza */
  #ordiniTable td:nth-of-type(1) { font-weight: 800; color: var(--primary-dark, #0b5480); }
  #ordiniTable td:nth-of-type(4) { font-weight: 800; color: var(--primary, #0f6ea8); }
  /* stato e azioni vanno a capo, allineati a sinistra */
  #ordiniTable td.status-cell,
  #ordiniTable td.table-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  #ordiniTable td.table-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #ordiniTable td.table-actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* ---- 6. RICERCA E FILTRI: pieni e tappabili ---- */
  #ordSearch, #ordStatus, #ordPeriod {
    min-height: 48px !important;
    font-size: 16px !important;
    width: 100%;
  }

  /* autocomplete risultati: voci ampie e leggibili */
  .autocomplete-item {
    padding: 0.7rem 0.85rem !important;
    min-height: 48px;
  }
}

/* =====================================================================
   7. LISTA ORDINI ESPANDIBILE AL TAP (mobile)
   Card chiusa = solo dati chiave (Ordine, Fornitore, Totale, Stato).
   Tap sulla card -> mostra Data, sotto-stati e Azioni.
   ===================================================================== */
@media (max-width: 768px) {
  #ordiniTable tr {
    position: relative;
    cursor: pointer;
    padding-right: 2.3rem;                 /* spazio per la freccia */
    transition: box-shadow .2s;
  }
  #ordiniTable tr:active {
    box-shadow: 0 2px 14px rgba(18,59,109,.16);
  }
  /* freccia indicatore (giù = chiusa, su = aperta) */
  #ordiniTable tr::after {
    content: "";
    position: absolute;
    top: 1.15rem;
    right: 1rem;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--secondary, #6b7a90);
    border-bottom: 2.5px solid var(--secondary, #6b7a90);
    transform: rotate(45deg);
    transition: transform .25s ease;
  }
  #ordiniTable tr.is-expanded::after {
    transform: rotate(225deg);
  }
  /* riga vuota "Nessun ordine": niente freccia */
  #ordiniTable tr td.table-empty { text-align: center; }
  #ordiniTable tr:has(td.table-empty)::after { display: none; }

  /* CHIUSA: nascondi Data (3) e Azioni (6) e i sotto-stati */
  #ordiniTable td:nth-of-type(3),
  #ordiniTable td:nth-of-type(6) {
    display: none;
  }
  #ordiniTable td.status-cell .status-meta,
  #ordiniTable td.status-cell .status-email {
    display: none;
  }

  /* APERTA: rivela dettagli e azioni */
  #ordiniTable tr.is-expanded td:nth-of-type(3) {
    display: flex;
  }
  #ordiniTable tr.is-expanded td.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.6rem !important;
    border-top: 1px solid var(--border-color, rgba(15,110,168,.14)) !important;
  }
  #ordiniTable tr.is-expanded td.status-cell .status-meta,
  #ordiniTable tr.is-expanded td.status-cell .status-email {
    display: block;
  }
}

/* =====================================================================
   8. RESPONSIVE GLOBALE — tutte le viste interne leggibili su smartphone
   (header, filtri, toolbar, tabelle larghe, modali, paginazione).
   Il media query dashboard esistente copriva solo dashboard/sidebar.
   ===================================================================== */
@media (max-width: 768px) {

  /* Area contenuto piu' compatta sui telefoni */
  .content-area { padding: 1rem; }

  /* ---- Intestazioni vista: titolo sopra, azioni sotto a tutta larghezza ---- */
  .view-header,
  .crud-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .view-title { font-size: 1.5rem; }
  .view-subtitle { font-size: 0.9rem; }
  .action-group,
  .table-toolbar,
  .filter-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .action-group .btn,
  .crud-header .btn,
  .filter-actions .btn {
    flex: 1 1 auto;
    min-height: 46px;
  }

  /* ---- Pannello filtri: una colonna, controlli ampi ---- */
  .filters-panel { padding: 1rem; margin-bottom: 1rem; }
  .filters-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .filter-group { min-width: 0; width: 100%; }
  .filter-group input,
  .filter-group select,
  .input-shell,
  .filters-form input,
  .filters-form select,
  .search-panel input {
    min-height: 48px !important;
    font-size: 16px !important;     /* evita lo zoom automatico su iOS */
  }

  /* ---- Tabelle larghe: scorrimento orizzontale leggibile (no squish) ----
     I wrapper hanno gia' overflow-x:auto; diamo una min-width cosi' le
     colonne restano leggibili e la tabella si scorre invece di schiacciarsi. */
  .table-responsive,
  .table-panel {
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
  }
  #materialeDaEvadereTable { min-width: 920px; }
  .excel-table,
  #crudTable { min-width: 800px; }
  .ricezione-merce-table { min-width: 640px; }
  #ordiniParzialiTable { min-width: 760px; }
  #ai-results-table { min-width: 680px; }
  /* celle un filo piu' generose per leggibilita' al tocco */
  .materiale-da-evadere-table th,
  .materiale-da-evadere-table td,
  .excel-table th,
  .excel-table td {
    font-size: 0.82rem;
  }

  /* ---- Modali a tutto schermo (override dei max-width inline) ---- */
  .modal { padding: 0.5rem; align-items: flex-start; }
  .modal-content {
    max-width: 96vw !important;
    width: 96vw !important;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1rem !important;
    margin: 0.5rem auto;
  }
  .modal-content .form-actions,
  .modal-content .action-group {
    flex-direction: column;
    align-items: stretch;
  }
  .modal-content .form-actions .btn { width: 100%; min-height: 46px; }

  /* ---- Paginazione a capo e centrata ---- */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  /* ---- Pulsanti generici: area di tap comoda ovunque nelle viste ---- */
  .content-area .btn { min-height: 44px; }
  .content-area .btn-sm { min-height: 38px; }
}