/* WartHive - adattamento smartphone. Su desktop (>= 1024 px) non cambia nulla. */

/* pulsante menu nella barra in alto (esiste solo sotto 1024 px, come la barra stessa) */
.wh-mb-btn {
  margin-left: auto; margin-right: 10px;
  width: 36px; height: 36px; border: 1px solid #27272A; border-radius: 3px;
  background: #0B0B0F; color: #FAFAFA; font-size: 20px; line-height: 1;
}
.wh-mb-panel {
  position: fixed; top: 56px; right: 8px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; min-width: 220px; max-width: calc(100vw - 16px);
  padding: 12px; background: #0B0B0F; border: 1px solid #27272A; border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.wh-mb-panel .wh-fm-select { margin: 0; max-width: none; width: 100%; padding: 10px; font-size: 14px; }
.wh-mb-item {
  text-align: left; padding: 12px; font: 14px Inter, system-ui, sans-serif; color: #FAFAFA;
  background: #18181B; border: 1px solid #27272A; border-radius: 3px;
}
.wh-mb-note { color: #A1A1AA; font-size: 13px; }

@media (max-width: 1023px) {
  /* niente scorrimento orizzontale della pagina */
  html, body { overflow-x: hidden; }
  /* i modali stanno nello schermo */
  .fixed.inset-0 > div { max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 32px); overflow-y: auto; }
}

@media (max-width: 767px) {
  /* ---- tabella rig -> schede ---- */
  [data-testid="rig-table-wrap"] table { min-width: 0 !important; }
  [data-testid="rig-table-wrap"] thead { display: none; }
  [data-testid="rig-table-wrap"] tbody,
  [data-testid="rig-table-wrap"] tbody tr { display: block; }
  [data-testid="rig-table-wrap"] tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
    position: relative; padding: 12px 14px 12px 30px;
    border-bottom: 1px solid #27272A;
  }
  [data-testid="rig-table-wrap"] tbody td {
    display: block; padding: 0 !important; min-width: 0; white-space: normal !important;
  }
  [data-testid="rig-table-wrap"] tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block;
    font: 9px ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; color: #71717A;
  }
  /* pallino di stato e freccia: in posizione assoluta, senza etichetta */
  [data-testid="rig-table-wrap"] tbody td:first-child { position: absolute; left: 12px; top: 16px; }
  [data-testid="rig-table-wrap"] tbody td:last-child { position: absolute; right: 12px; top: 14px; }
  /* nome rig su tutta la riga */
  [data-testid="rig-table-wrap"] tbody td:nth-child(2) { grid-column: 1 / -1; padding-right: 24px !important; }
  [data-testid="rig-table-wrap"] tbody td:nth-child(2)::before { display: none !important; }
  [data-testid="rig-table-wrap"] .max-w-\[240px\] { max-width: none; }

  /* ---- flight sheet: il layout compatto a riga (wh-compact) torna in colonna ---- */
  html.wh-fs-page [data-testid^="fs-card-"] { flex-direction: column !important; align-items: stretch !important; }
  html.wh-fs-page [data-testid^="fs-card-"] > div:first-child { width: auto; max-width: none; }
  html.wh-fs-page [data-testid^="fs-card-"] .space-y-1 { flex-direction: column !important; }
  html.wh-fs-page [data-testid^="fs-card-"] .space-y-1 > div { max-width: none !important; white-space: normal; word-break: break-all; }

  /* griglie fisse con 3+ colonne (senza varianti responsive) -> 2 colonne */
  main .grid.grid-cols-3, main .grid.grid-cols-4, main .grid.grid-cols-5,
  main .grid.grid-cols-6, main .grid.grid-cols-8, main .grid.grid-cols-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* campi e pulsanti comodi per il dito */
  main input, main select, main textarea { font-size: 16px; }
  main button { min-height: 36px; }
}