/* ============================================================
   HACCP Synphonie — adaptation telephone (11/09/2026)
   Fichier separe : styles.css d'origine intact.
   Retirer la ligne <link ... mobile.css> de index.html = retour arriere.

   Probleme corrige : sous 900 px, styles.css faisait .sidebar{display:none}
   sans rien pour la remplacer -> aucun moyen de changer d'ecran.
   ============================================================ */

.m-bottom-nav, .m-backdrop { display: none; }

@media (max-width: 900px) {
  body { -webkit-text-size-adjust: 100%; }

  /* Mise en page : une colonne qui ne deborde jamais */
  .app { grid-template-columns: minmax(0, 1fr); }
  .main {
    min-width: 0;
    overflow: visible;
    overflow-x: clip;          /* pas de scroll horizontal, sans casser la barre collante */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  /* Menu lateral -> tiroir qui glisse depuis la gauche */
  .sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    height: auto; width: min(290px, 84vw);
    z-index: 1200;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
  body.m-menu-open .sidebar { transform: none; }
  body.m-menu-open { overflow: hidden; }
  .m-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1150;
    background: rgba(0, 0, 0, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.m-menu-open .m-backdrop { opacity: 1; pointer-events: auto; }
  .nav button { padding: 11px 12px; font-size: 15px; }
  .nav-icon { font-size: 17px; width: 22px; }

  /* Barre du haut : compacte et toujours visible */
  .topbar {
    position: sticky; top: 0; z-index: 900;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    align-items: center; flex-wrap: nowrap;
  }
  .topbar > div:first-child { min-width: 0; flex: 1; }
  .topbar h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-subtitle, #page-tag, #fullscreen-btn { display: none; }
  #refresh-all { padding: 6px 12px; }
  #global-status { padding: 3px 12px !important; }

  /* Contenu : la page defile normalement (plus de zone de scroll interne) */
  .view { padding: 12px; overflow: visible; }
  .panel { padding: 14px 12px; }
  .grid.col2, .grid.col3, .terrain-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .grid > *, .terrain-layout > * { min-width: 0; }
  .panel[style*="max-width"] { max-width: none !important; }
  .section-title { flex-wrap: wrap; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { font-size: 28px; }

  /* Tactile : cibles de 44 px, et 16 px mini dans les champs (sinon l'iPhone zoome) */
  .btn { min-height: 42px; white-space: normal; line-height: 1.25; }
  .input, select.input, textarea, .ocr-edit { font-size: 16px; }
  .input, select.input { min-height: 44px; }
  .field input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }

  /* Lignes de liste : les textes longs passent a la ligne au lieu de deborder */
  .task-item, .temp-item, .alert-item { flex-wrap: wrap; }
  .task-item > div, .temp-item > div, .alert-item > div, .nc-item { min-width: 0; overflow-wrap: anywhere; }
  .task-item > div[style*="flex:1"] { flex: 1 1 160px; }

  /* Controle huile : 3 cases par ligne -> 2 */
  #oil-view [style*="1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

  /* Courbe IoT un peu plus haute sur petit ecran */
  #iot-chart-container { height: 220px !important; }

  /* Barre d'onglets en bas de l'ecran */
  .m-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    background: var(--brand);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
  }
  .m-bottom-nav button {
    flex: 1; min-width: 0; min-height: 58px;
    background: none; border: 0; cursor: pointer; position: relative;
    color: rgba(255, 255, 255, .65);
    padding: 7px 2px 8px; font-size: 11px; line-height: 1.2;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .m-bottom-nav .m-ico { font-size: 20px; line-height: 1.1; }
  .m-bottom-nav .m-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .m-bottom-nav button.active { color: #fff; font-weight: 600; }
  .m-bottom-nav button.active::before {
    content: ""; position: absolute; top: 0; left: 24%; right: 24%;
    height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
  }
  .m-bottom-nav .m-badge {
    position: absolute; top: 4px; left: calc(50% + 7px);
    background: var(--red); color: #fff; border-radius: 10px;
    padding: 0 5px; font-size: 10px; font-weight: 700; line-height: 16px;
  }
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .btn-hero { padding: 16px 18px; font-size: 17px; }
  .btn-xl { padding: 12px 16px; font-size: 15px; }
  .login-card { padding: 24px 18px; }
  .ocr-field { grid-template-columns: 96px minmax(0, 1fr); }
  .fiche-name { font-size: 18px; }
}