/*
 * MK INDUSTRIES — mise en page responsive (mobile, tablette, ordinateur).
 * Chargé par toutes les pages via templates/stock/_theme_head.html, après mk-theme.css.
 *
 *   mobile     < 768 px           barre latérale en tiroir (bouton ☰), marges réduites
 *   tablette   768 px – 1279 px   barre latérale en rail d'icônes (dépliable par-dessus le contenu),
 *                                 cibles tactiles agrandies, points de vente resserrés
 *   ordinateur ≥ 1280 px          inchangé
 *
 * La logique (ouverture du tiroir, rail, tableaux défilants) est dans static/js/mk-responsive.js.
 */

/* ── Commun ───────────────────────────────────────────────────────── */

/* La colonne de contenu à côté de la barre latérale peut rétrécir :
 * sans cela, un tableau large élargit toute la page au-delà de l'écran. */
#sidebar ~ .flex-1 { min-width: 0; }

/* Tableaux enveloppés automatiquement quand rien ne les fait défiler */
.mk-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Calque base : les utilitaires Tailwind (w-*, h-*) gardent la main */
@layer base {
  canvas, iframe { max-width: 100%; }
}

/* Fenêtres modales Tailwind (fixed inset-0 flex items-center) : une fenêtre plus haute
 * que l'écran (téléphone, tablette en paysage) reste atteignable par défilement. */
.fixed.inset-0.flex.items-center { align-items: safe center; overflow-y: auto; }

/* Voile derrière le tiroir / le rail déplié */
.mk-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 22, 34, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mk-sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
html.mk-scroll-lock, html.mk-scroll-lock body { overflow: hidden !important; }

/* Pour les pages : masquer / afficher selon l'appareil */
@media (max-width: 767.98px) { .mk-hide-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .mk-hide-tablet { display: none !important; } }
@media (min-width: 768px) { .mk-only-mobile { display: none !important; } }


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

  /* Barre latérale = tiroir hors écran */
  #sidebar.mk-sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    width: min(300px, 86vw) !important;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    visibility: hidden;
    box-shadow: var(--mk-shadow-lg);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  #sidebar.mk-sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }
  /* L'état « réduit » de l'ordinateur ne s'applique pas au tiroir */
  #sidebar.mk-sidebar.sidebar-collapsed .sidebar-text,
  #sidebar.mk-sidebar.sidebar-collapsed #sidebar-title { display: revert; }
  #sidebar.mk-sidebar.sidebar-collapsed .mk-nav-link { justify-content: flex-start; padding-left: 0.875rem; padding-right: 0.875rem; }
  /* Le bouton « réduire » sert à fermer le tiroir */
  #sidebar.mk-sidebar #toggle-sidebar { display: flex !important; }
  #sidebar.mk-sidebar .mk-nav-link { min-height: 46px; }

  /* Marges des pages */
  #sidebar ~ .flex-1 main.p-6,
  #sidebar ~ .flex-1 main.p-10,
  #sidebar ~ .flex-1 > main[class*="p-6"],
  #sidebar ~ .flex-1 > main[class*="p-10"] { padding: 1rem; }
  #sidebar ~ .flex-1 > main[class*="py-8"] { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  main.container { padding-left: 0.75rem; padding-right: 0.75rem; }

  /* Titres un peu moins grands */
  #sidebar ~ .flex-1 main h1.text-3xl,
  #sidebar ~ .flex-1 main h1.text-4xl { font-size: 1.5rem; line-height: 2rem; }

  /* iOS : pas de zoom automatique dans les champs (texte ≥ 16 px) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="file"]),
  select,
  textarea { font-size: max(16px, 1em); }

  /* Fenêtres modales : jamais plus larges que l'écran */
  .mk-modal-card { max-height: 92vh; }
  .fixed.inset-0.flex > div:not([class*="inset-0"]) { max-width: calc(100vw - 1.5rem); }

  /* Notifications « toast » de base.html */
  .toast { min-width: 0; max-width: calc(100vw - 32px); }
  #toast-container { left: 16px; right: 16px; top: 12px; }
}


/* ── Tablette (768 px – 1279 px) ──────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1279.98px) {

  /* Barre latérale = rail d'icônes, collé en haut, défile seul */
  #sidebar.mk-sidebar {
    position: sticky;
    top: 0;
    z-index: 1001;
    flex-shrink: 0;
    align-self: flex-start;
    width: 76px !important;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    transition: width 0.22s ease, margin-right 0.22s ease, box-shadow 0.22s ease;
  }
  #sidebar.mk-sidebar .sidebar-text,
  #sidebar.mk-sidebar #sidebar-title { display: none; }
  #sidebar.mk-sidebar > div:first-child {
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #sidebar.mk-sidebar nav { padding-left: 0.5rem; padding-right: 0.5rem; }
  #sidebar.mk-sidebar .mk-nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    min-height: 48px;
  }
  #sidebar.mk-sidebar #toggle-sidebar { width: 2.5rem; height: 2.5rem; }

  /* Rail déplié : passe par-dessus le contenu sans le décaler
   * (la marge négative garde la place du rail dans la mise en page). */
  #sidebar.mk-sidebar.is-expanded {
    width: 280px !important;
    margin-right: -204px;
    box-shadow: var(--mk-shadow-lg);
  }
  #sidebar.mk-sidebar.is-expanded .sidebar-text,
  #sidebar.mk-sidebar.is-expanded #sidebar-title { display: revert; }
  #sidebar.mk-sidebar.is-expanded > div:first-child { flex-direction: row; justify-content: space-between; padding-left: 1rem; padding-right: 1rem; }
  #sidebar.mk-sidebar.is-expanded nav { padding-left: 0.75rem; padding-right: 0.75rem; }
  #sidebar.mk-sidebar.is-expanded .mk-nav-link { justify-content: flex-start; padding-left: 0.875rem; padding-right: 0.875rem; }

  /* Marges des pages : un peu plus serrées qu'à l'ordinateur */
  #sidebar ~ .flex-1 main.p-6,
  #sidebar ~ .flex-1 > main[class*="p-6"] { padding: 1.25rem; }
  #sidebar ~ .flex-1 main.p-10,
  #sidebar ~ .flex-1 > main[class*="p-10"] { padding: 1.5rem; }
}


/* ── Écrans tactiles : cibles plus confortables ───────────────────── */
@media (pointer: coarse) {
  .mk-btn { min-height: 44px; }
  .mk-theme-toggle { width: 2.75rem; height: 2.75rem; }
  .mk-nav-link { min-height: 46px; }
  .mk-modal-x, .toast-close { min-width: 44px; min-height: 44px; }
}


/* ── Points de vente (vente_boissons, vente_depot, vente_produit…) ── */
/* Repères posés dans les templates :
 *   .mk-pos        conteneur ordinateur/tablette (gauche = produits, droite = panier)
 *   .mk-pos-grid   grille des produits
 *   .mk-pos-cart   colonne du panier                                      */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Tablette en portrait : panier plus étroit, 2 colonnes de produits */
  .mk-pos { padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-bottom: 0.75rem !important; gap: 0.75rem !important; }
  .mk-pos > section { gap: 0.75rem; }
  .mk-pos-cart { width: 300px !important; padding: 1rem !important; }
  .mk-pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; }
  /* Entête du poste : les boutons passent à la ligne au lieu d'être coupés */
  .mk-pos > section > header > div {
    height: auto !important;
    min-height: 2.5rem;
    flex-wrap: wrap;
    row-gap: 0.375rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* Tablette en paysage : 3 colonnes, panier un peu réduit */
  .mk-pos { padding-left: 1rem !important; padding-right: 1rem !important; gap: 1rem !important; }
  .mk-pos-cart { width: 340px !important; padding: 1.25rem !important; }
  .mk-pos-grid { gap: 0.75rem !important; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .mk-pos-grid > article { padding: 0.75rem; }
  .mk-pos-cart button, .mk-pos-grid button { min-height: 40px; }
}


/* ── Impression : rien de tout cela ───────────────────────────────── */
@media print {
  .mk-sidebar-backdrop, #mobile-menu-btn { display: none !important; }
  .mk-table-scroll { overflow: visible !important; }
}