/* ═══════════════════════════════════════════════════════════════
   LELAM Print — Mobile Responsive CSS (Fase 1 v2 — 2026-07-13)
   Card view per tabelle + header responsivo.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tablet (≤ 900px): header più compatto ─── */
@media (max-width: 900px) {
  .header, header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    align-items: center;
  }
  .header h1 { font-size: 15px !important; }
  .btn-refresh, .btn-prossimo, .btn-download,
  .btn-fermo-toggle {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 40px;
    white-space: nowrap;
  }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {

  /* ─── HEADER: date-nav a full width, azioni wrappano ─── */
  .header, header {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .date-nav {
    flex: 1 1 100% !important;
    justify-content: center;
    order: 1;
  }
  .date-nav .date-display { font-size: 13px !important; }
  .btn-refresh { order: 2; flex: 0 0 auto; }
  .header .amm-link,
  .header .esci-link,
  .header a[href*='admin'],
  .header a[href*='logout'],
  .header a[href*='esci'] {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  /* ─── TAB REPARTI: scroll orizzontale ─── */
  .tabs {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px !important;
    gap: 4px;
    scrollbar-width: thin;
    white-space: nowrap;
  }
  .tabs::-webkit-scrollbar { height: 3px; }
  .tab {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* ─── KPI SUMMARY CARDS: 2 colonne compatte ─── */
  .summary-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px 12px !important;
  }
  .summary-card {
    min-width: 0 !important;
    padding: 10px 12px !important;
  }
  .summary-card .value { font-size: 22px !important; }
  .summary-card .label { font-size: 10px !important; text-transform: uppercase; }

  /* Theme-shared KPI (riepilogo) */
  .t-kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .t-kpi-value { font-size: 22px !important; }

  /* ─── CARD VIEW per tabelle ordini/articoli ─── */
  /* Il JS aggiunge data-label a ogni td; il CSS trasforma in card */
  .machines-grid, .t-table-wrap { overflow: visible !important; padding: 8px !important; }

  table.orders-table,
  table.articoli-table,
  table.mag-table,
  table.t-table {
    display: block;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
  }
  table.orders-table thead,
  table.articoli-table thead,
  table.mag-table thead {
    display: none;
  }
  table.orders-table tbody,
  table.articoli-table tbody,
  table.mag-table tbody {
    display: block;
    width: 100%;
  }
  table.orders-table tbody tr,
  table.articoli-table tbody tr,
  table.mag-table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  table.orders-table tbody td,
  table.articoli-table tbody td,
  table.mag-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f4f4f4 !important;
    text-align: right;
    font-size: 13px;
    max-width: none !important;
    width: auto !important;
  }
  table.orders-table tbody td:last-child,
  table.articoli-table tbody td:last-child,
  table.mag-table tbody td:last-child {
    border-bottom: none !important;
  }
  table.orders-table tbody td::before,
  table.articoli-table tbody td::before,
  table.mag-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 auto;
  }
  /* Se td non ha data-label (fallback), non forzare */
  table.orders-table tbody td:not([data-label])::before,
  table.articoli-table tbody td:not([data-label])::before,
  table.mag-table tbody td:not([data-label])::before {
    content: '';
  }

  /* Prima riga (commessa) evidenziata */
  table.orders-table tbody td:first-child,
  table.articoli-table tbody td:first-child,
  table.mag-table tbody td:first-child {
    font-weight: 700;
    color: #222;
    font-size: 13px;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
  }

  /* Bottoni azione dentro le card più touch-friendly */
  .stato-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 42px;
    min-width: 42px;
  }
  .anticipati-label { font-size: 11px; }

  /* Icone di lock/spostamento nella colonna Commessa */
  .move-btn, .fermo-badge {
    padding: 6px 8px !important;
    min-height: 34px;
    font-size: 11px;
  }

  /* Note operatore input */
  input[type='text'], input[type='search'], textarea {
    font-size: 14px !important;
    padding: 8px 10px !important;
    min-height: 40px;
    box-sizing: border-box;
  }

  /* ─── MACCHINE (Giostra 1, ecc): header più compatto ─── */
  .machines-grid > div:first-child,
  .machine-header {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  /* Presenze reparto */
  .op-chip { font-size: 12px !important; padding: 4px 8px !important; }

  /* ─── FILTRI/PRESETS ─── */
  .filters, .mag-filters, .presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px !important;
  }
  .filters input, .filters select,
  .mag-filters input, .mag-filters select {
    flex: 1 1 45%;
    min-width: 0;
    padding: 10px !important;
    font-size: 14px !important;
    min-height: 40px;
  }

  /* ─── RIEPILOGO ─── */
  .totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wrap { padding: 8px !important; }
  .t-btn-mini { padding: 8px 10px; font-size: 12px; min-height: 34px; }

  /* ─── CDA ─── */
  .card { margin-bottom: 12px !important; }
  .card-body, .card-body.tight { padding: 10px !important; }
  .card-head { padding: 10px 12px !important; font-size: 14px; }
  .costi-header-row, .costi-header-inner {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
  }
  .chips-row { flex-wrap: wrap; gap: 4px; }
  .chip, .chip-action, .chip-label { font-size: 11px; padding: 4px 8px; }
  .period-select { flex: 1 1 100%; font-size: 14px; padding: 10px; }

  /* ─── MODALI ─── */
  .mag-modal, .modal, .mag-modal-overlay > div {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    padding: 12px !important;
  }
  .modal-btns { flex-wrap: wrap; gap: 6px; }
  .modal-btns button { flex: 1 1 45%; min-height: 42px; }

  /* ─── TOUCH TARGETS globali ─── */
  button, .btn, .t-btn {
    min-height: 40px;
  }
  .btn-download { font-size: 13px !important; }

  /* ─── BANNER ─── */
  .banner-text, .banner-sub { font-size: 12px !important; line-height: 1.3; }
  .beta-banner { padding: 6px 10px; font-size: 12px; }


  /* ─── CDA .dataset / .pl-table: scroll orizz. (no card view — tabelle numeriche multi-col) ─── */
  .pl-table-wrap, .dataset-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 !important;
    scrollbar-width: thin;
  }
  table.dataset, table.pl-table {
    font-size: 11px !important;
    min-width: 100%;
    width: max-content;
  }
  table.dataset th, table.dataset td,
  table.pl-table th, table.pl-table td {
    padding: 5px 8px !important;
    white-space: nowrap;
  }
  /* Prima colonna sticky nelle tabelle P&L (label voce di costo/ricavo) */
  table.pl-table th:first-child, table.pl-table td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 2px 0 3px rgba(0,0,0,0.05);
  }

  /* Hide colonne meno importanti (già usato in index.html) */
  .hide-mobile { display: none !important; }
}

/* ─── Smartphone stretti (≤ 480px) ─── */
@media (max-width: 480px) {
  .summary-bar { grid-template-columns: 1fr !important; }
  .t-kpi-row { grid-template-columns: 1fr !important; }
  .totals { grid-template-columns: 1fr !important; }
  .header h1 { font-size: 14px !important; }
  .tab { padding: 8px 10px !important; font-size: 12px !important; }
  .filters input, .filters select,
  .mag-filters input, .mag-filters select { flex: 1 1 100%; }
  .modal-btns button { flex: 1 1 100%; }
}