/* ═══════════════════════════════════════════════════════
   MIREB WORKPLACE — RESPONSIVE COMPLET
   Mobile-first approach
   Breakpoints: 480 / 768 / 992 / 1200 / 1400
═══════════════════════════════════════════════════════ */

/* ── DESKTOP LARGE (>1400px) ───────────────────────── */
@media (max-width: 1400px) {
  .mireb-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── DESKTOP STANDARD (≤1200px) ───────────────────── */
@media (max-width: 1200px) {
  .mireb-sidebar { width: 220px; }
  .mireb-main   { margin-left: 220px; }
  .mireb-nav-label { font-size: 12px; }
}

/* ── TABLETTE (≤992px) ─────────────────────────────── */
@media (max-width: 992px) {
  /* Sidebar — masquée par défaut, slide-in au clic */
  .mireb-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%); z-index: 1001;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    width: 260px !important;
  }
  .mireb-sidebar.open { transform: translateX(0); }
  .mireb-sidebar-overlay { display: none; }
  .mireb-sidebar.open ~ .mireb-sidebar-overlay,
  .mireb-sidebar-overlay.visible { display: block; }

  .mireb-main  { margin-left: 0 !important; }
  .mireb-header { padding: 0 16px; height: 56px; position: sticky; top: 0; z-index: 100; }
  .mireb-content { padding: 16px; }

  /* Bouton hamburger visible */
  .mireb-sidebar-toggle { display: flex !important; }

  /* Grilles */
  .mireb-grid-2, .mireb-grid-3, .mireb-grid-60-40,
  .mireb-grid-cols-3, .mireb-grid-cols-4 { grid-template-columns: 1fr 1fr; }
  .mireb-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* ERP tabs — scroll horizontal */
  .erp-tabs-row, .crm-tabs-row {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .erp-tabs-row::-webkit-scrollbar,
  .crm-tabs-row::-webkit-scrollbar { display: none; }
  .erp-tab-btn, .crm-tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* Tables — scroll horizontal */
  .mireb-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Kanban CRM */
  .mireb-kanban-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mireb-kanban-col   { min-width: 240px; }

  /* POS (Point de vente) */
  .mireb-pos-layout { flex-direction: column; }
  .mireb-pos-products { border-right: none; border-bottom: 1px solid var(--mireb-border); }

  /* Modals */
  .mireb-modal-box {
    margin: 10px !important; max-width: calc(100vw - 20px) !important;
    max-height: 90vh; overflow-y: auto;
  }
  .mireb-modal-form-grid { grid-template-columns: 1fr !important; }
}

/* ── MOBILE LARGE (≤768px) ─────────────────────────── */
@media (max-width: 768px) {
  /* Layout */
  .mireb-content { padding: 12px; }
  .mireb-header  { padding: 0 12px; }

  /* Page header */
  .mireb-page-header  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mireb-page-actions { flex-wrap: wrap; gap: 6px; }
  .mireb-page-title   { font-size: 18px !important; }

  /* Grilles → 1 colonne */
  .mireb-grid-2, .mireb-grid-3, .mireb-grid-60-40,
  .mireb-grid-cols-3, .mireb-grid-cols-4,
  .mireb-stats-grid   { grid-template-columns: 1fr; }

  /* Stats cards — compactes */
  .mireb-stat-card  { padding: 14px 16px; }
  .mireb-stat-value { font-size: 24px; }
  .mireb-stat-icon  { width: 44px; height: 44px; font-size: 18px; }

  /* Header search masqué */
  .mireb-header-search { display: none; }
  .mireb-header-right  { gap: 8px; }

  /* Cards */
  .mireb-card { padding: 14px; }
  .mireb-card-header { flex-wrap: wrap; gap: 8px; }

  /* Tables — colonnes réduites */
  .mireb-table th, .mireb-table td { padding: 8px 10px; font-size: 12px; }
  .mireb-table th:nth-child(n+5),
  .mireb-table td:nth-child(n+5) { display: none; } /* masquer colonnes extra */

  /* Boutons d'actions table — icônes seules */
  .mireb-table .btn-text { display: none; }

  /* Générateur de pubs — colonnes */
  .mireb-ad-layout    { flex-direction: column; height: auto !important; }
  .mireb-ad-sidebar   { width: 100% !important; max-height: 340px; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--mireb-border); }
  .mireb-ad-canvas-area { flex: none; min-height: 320px; }
  .mireb-props-panel  { width: 100% !important; border-top: 1px solid var(--mireb-border); max-height: 220px; overflow-y: auto; }

  /* Drawer (panneau slide) */
  .mireb-drawer { width: 100% !important; right: -100%; }
  .mireb-drawer.open { right: 0; }

  /* Formulaires */
  .mireb-form-row-2 { grid-template-columns: 1fr !important; }

  /* Pagination */
  .mireb-pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .mireb-pagination button { min-width: 32px; padding: 6px 8px; font-size: 12px; }

  /* Tableau de présences */
  .mireb-att-table { font-size: 10px; }
  .mireb-att-table .name-col { min-width: 80px; max-width: 80px; font-size: 10px; }
  .mireb-att-dot   { width: 20px; height: 20px; font-size: 9px; }

  /* Canvas ads — zoom auto */
  .mireb-ad-canvas-wrapper { overflow: auto; }
  #mirebAdCanvas { max-width: 100%; height: auto !important; transform-origin: top left; }

  /* CRM Events grid */
  .mireb-events-grid { grid-template-columns: 1fr; }

  /* Settings tabs */
  .mireb-settings-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .mireb-settings-tab  { white-space: nowrap; flex-shrink: 0; }

  /* Boutique */
  .mireb-boutique-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .mireb-boutique-tab  { white-space: nowrap; flex-shrink: 0; }
}

/* ── MOBILE PETIT (≤480px) ─────────────────────────── */
@media (max-width: 480px) {
  .mireb-content { padding: 10px; }

  /* Stat cards — 2 en grille serrée */
  .mireb-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mireb-stat-card  { padding: 10px 12px; }
  .mireb-stat-value { font-size: 20px; }
  .mireb-stat-label { font-size: 10px; }
  .mireb-stat-icon  { display: none; }

  /* Boutons */
  .mireb-btn-lg { padding: 12px 18px; font-size: 14px; }
  .mireb-btn    { padding: 8px 12px; font-size: 12px; }

  /* Modal full-screen */
  .mireb-modal-box {
    margin: 0 !important; width: 100vw !important; max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important; min-height: 50vh;
    position: fixed !important; bottom: 0 !important; top: auto !important;
  }
  .mireb-modal { align-items: flex-end !important; }

  /* Tables — scroll et simplification */
  .mireb-table { font-size: 11px; }
  .mireb-table th, .mireb-table td { padding: 6px 8px; }
  .mireb-table th:nth-child(n+4),
  .mireb-table td:nth-child(n+4) { display: none; }

  /* ERP tabs — icônes seules */
  .erp-tab-btn .tab-label,
  .crm-tab-btn .tab-label { display: none; }

  /* Header compact */
  .mireb-header  { height: 50px; }
  .mireb-logo-text { display: none; }
  .mireb-user-name { display: none; }

  /* Page title */
  .mireb-page-title { font-size: 16px !important; }

  /* Kanban scroll */
  .mireb-kanban-board { gap: 8px; }
  .mireb-kanban-col   { min-width: 220px; }

  /* Forms */
  .mireb-input, .mireb-select { font-size: 14px; padding: 10px 12px; }

  /* Présences - scroll horizontal obligatoire */
  .mireb-att-table { min-width: 600px; }
}

/* ── PRINT (impression factures etc.) ──────────────── */
@media print {
  .mireb-sidebar, .mireb-header,
  .mireb-page-actions, .mireb-modal,
  .mireb-fab, .mireb-notifications { display: none !important; }
  .mireb-main   { margin: 0 !important; }
  .mireb-content { padding: 0 !important; }
  .mireb-invoice-preview { width: 100% !important; }
}

/* ── TOUCH — améliorer les interactions ────────────── */
@media (hover: none) and (pointer: coarse) {
  .mireb-btn   { min-height: 44px; }
  .mireb-input { min-height: 44px; font-size: 16px; } /* évite zoom iOS */
  .mireb-att-dot { width: 28px !important; height: 28px !important; }
  .mireb-nav-item > a { padding: 14px 16px !important; }
}

/* ── SIDEBAR TOGGLE bouton (toujours caché sur desktop) */
.mireb-sidebar-toggle { display: none; }
@media (max-width: 992px) {
  .mireb-sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    background: none; border: 1px solid var(--mireb-border);
    cursor: pointer; color: var(--mireb-dark); font-size: 16px;
    transition: background 0.15s;
  }
  .mireb-sidebar-toggle:hover { background: var(--mireb-light); }
}

/* ── OVERLAY fond sombre quand sidebar ouverte ─────── */
.mireb-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 999;
  backdrop-filter: blur(2px);
}