/**
 * CRM JLS Studio — Responsive (Mobile-first)
 */

/* Tablette portrait */
@media (max-width: 1024px) {
  .app-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45;
    display: none;
  }

  .sidebar-overlay.active {
    display: block;
  }

  .hamburger-btn {
    display: flex;
  }

  .search-trigger {
    min-width: 180px;
  }

  .kanban-board {
    padding-bottom: var(--space-6);
  }

  .kanban-column {
    min-width: 260px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .app-content {
    padding: var(--space-4);
  }

  .app-header {
    padding: 0 var(--space-4);
  }

  .search-trigger {
    display: none;
  }

  .header-greeting {
    display: none;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .kpi-card {
    padding: var(--space-3);
  }

  .kpi-value {
    font-size: var(--text-xl);
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .page-title {
    font-size: var(--text-xl);
  }

  /* Kanban horizontal scroll */
  .kanban-board {
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    min-width: 85vw;
    max-width: 85vw;
  }

  /* Tables */
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal plein écran mobile */
  .modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  /* Cards layout */
  .card-body {
    padding: var(--space-4);
  }

  /* Boutons tap-friendly */
  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .nav-item {
    min-height: 44px;
    padding: var(--space-3);
  }

  /* Toast */
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
  }

  .toast {
    max-width: 100%;
  }

  /* Tabs scroll */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Filter */
  .filter-row {
    flex-wrap: wrap;
  }
}

/* Hamburger button (caché desktop) */
.hamburger-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  font-size: var(--text-lg);
}

.hamburger-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Compact mode */
[data-density="compact"] .data-table td,
[data-density="compact"] .data-table th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

[data-density="compact"] .kanban-card {
  padding: var(--space-2) var(--space-3);
}

[data-density="compact"] .kpi-card {
  padding: var(--space-3);
}