/* ── Responsive: tablet + mobile ── */

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

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

  .main {
    margin-left: 0;
    padding: 12px;
    padding-top: 56px;
    width: 100%;
    overflow-x: hidden;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-header h2 {
    font-size: 20px;
  }

  .page-header .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── Stats grid ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-card {
    padding: 12px 10px;
    border-left-width: 2px;
  }

  .stat-card .stat-value {
    font-size: 17px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .stat-card .stat-label {
    font-size: 12px;
  }

  /* ── Cards ── */
  .card {
    padding: 12px;
    border-radius: var(--radius);
  }

  .card-title {
    font-size: 14px;
  }

  /* ── Modals ── */
  .modal {
    width: 95%;
    padding: 16px;
    max-height: 90vh;
  }

  .modal-header h3 {
    font-size: 16px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

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

  .renta-panel {
    font-size: 12px;
  }

  /* ── Tables: remove forced min-width, enable responsive ── */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-container table {
    min-width: 0; /* overrides the old 600px min-width */
    width: 100%;
  }

  td, th {
    padding: 8px 6px;
    font-size: 12px;
  }

  .btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .btn-icon {
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  /* ── Dashboard: charts en colonne sur mobile ── */
  .dash-charts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Forcer les canvas Chart.js a respecter la largeur du conteneur */
  .dash-charts-grid .card {
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
  }

  .dash-charts-grid .card > div {
    max-width: 100%;
    overflow: hidden;
  }

  .dash-charts-grid canvas {
    max-width: 100% !important;
  }

  /* Dashboard table - cacher PVHT (3e) et Budget (6e) */
  .dash-table th:nth-child(3),
  .dash-table td:nth-child(3),
  .dash-table th:nth-child(6),
  .dash-table td:nth-child(6) {
    display: none;
  }

  /* ── Affaires table: cacher Chargé (3), Date (4), Budget (7) ── */
  #page-affaires table th:nth-child(3),
  #page-affaires table td:nth-child(3),
  #page-affaires table th:nth-child(4),
  #page-affaires table td:nth-child(4),
  #page-affaires table th:nth-child(7),
  #page-affaires table td:nth-child(7) {
    display: none;
  }

  /* ── BDC table: cacher N° BDC (2), Affaire (3), Date (7) ── */
  #page-bdc table th:nth-child(2),
  #page-bdc table td:nth-child(2),
  #page-bdc table th:nth-child(3),
  #page-bdc table td:nth-child(3),
  #page-bdc table th:nth-child(7),
  #page-bdc table td:nth-child(7) {
    display: none;
  }

  /* ── Pointages table: cacher Affaire (3), Jour (6), Semaine (7) ── */
  #page-pointages table th:nth-child(3),
  #page-pointages table td:nth-child(3),
  #page-pointages table th:nth-child(6),
  #page-pointages table td:nth-child(6),
  #page-pointages table th:nth-child(7),
  #page-pointages table td:nth-child(7) {
    display: none;
  }

  /* ── Filtres en colonne ── */
  #page-affaires .card:first-of-type > div,
  #page-bdc .card:first-of-type > div,
  #page-pointages .card:first-of-type > div {
    flex-direction: column;
  }

  #page-affaires .card:first-of-type input,
  #page-affaires .card:first-of-type select,
  #page-bdc .card:first-of-type input,
  #page-bdc .card:first-of-type select,
  #page-pointages .card:first-of-type input,
  #page-pointages .card:first-of-type select {
    width: 100%;
  }

  /* ── Résultats: sections empilées ── */
  #resultats-content .stats-grid {
    grid-template-columns: 1fr;
  }

  /* ── Suivi: filtres et tableaux ── */
  #suivi-content select {
    width: 100%;
    margin-bottom: 6px;
  }

  /* ── Paramètres: postes items ── */
  #parametres-content .poste-item,
  #parametres-content div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  #parametres-content input[style*="width:55px"] {
    width: 50px !important;
  }

  /* ── Tableau "Heures non productives" : passage en cards empilees ── */
  .np-table {
    display: block;
    border-radius: 6px;
    overflow: hidden;
  }
  .np-table thead {
    display: none;
  }
  .np-table tbody, .np-table tfoot {
    display: block;
  }
  .np-table tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    background: #fff;
  }
  .np-table tr.np-total {
    background: rgba(0, 0, 0, 0.02);
    border-top: 2px solid var(--border);
    border-bottom: none;
  }
  .np-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 12px !important;
    text-align: right !important;
    border: none;
    background: transparent !important;
  }
  .np-table td::before {
    content: attr(data-label);
    color: var(--text-light);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    margin-right: 12px;
    text-align: left;
  }
  /* Premiere cellule (nom du salarie) : pas de label, juste le nom en gros */
  .np-table tbody td:first-child,
  .np-table tfoot td:first-child {
    font-size: 13px;
    padding-bottom: 6px !important;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 4px;
  }
  .np-table tbody td:first-child::before,
  .np-table tfoot td:first-child::before {
    display: none;
  }
  /* Marge perdue : reste mise en avant meme en mode card */
  .np-table td.np-marge {
    background: #FFEBEE !important;
    border-radius: 4px;
    padding: 6px 12px !important;
    margin-top: 4px;
  }
}

/* ── Small mobile (< 480px) ── */
@media (max-width: 480px) {
  .main {
    padding: 8px;
    padding-top: 52px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .stat-card {
    padding: 10px 8px;
  }

  .stat-card .stat-value {
    font-size: 15px;
  }

  .stat-card .stat-label {
    font-size: 11px;
    letter-spacing: 0.3px;
  }

  .card {
    padding: 10px;
  }

  .card-title {
    font-size: 13px;
  }

  .page-header h2 {
    font-size: 17px;
  }

  /* ── Tables ultra compact ── */
  td, th {
    padding: 6px 4px;
    font-size: 11px;
  }

  /* Affaires: cacher aussi Statut (8) sur petit mobile */
  #page-affaires table th:nth-child(8),
  #page-affaires table td:nth-child(8) {
    display: none;
  }

  /* BDC: cacher aussi Fournisseur (5) */
  #page-bdc table th:nth-child(5),
  #page-bdc table td:nth-child(5) {
    display: none;
  }

  /* Pointages: cacher aussi Date (5) */
  #page-pointages table th:nth-child(5),
  #page-pointages table td:nth-child(5) {
    display: none;
  }

  /* ── Modals plein écran ── */
  .modal {
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 95vh;
    padding: 14px;
  }

  .modal-header h3 {
    font-size: 15px;
  }

  .modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .renta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* ── Dashboard objectif CA: empiler ── */
  #dash-charges-fixes > div:first-child {
    flex-direction: column !important;
    gap: 8px;
  }

  #dash-charges-fixes > div:first-child > div:last-child {
    text-align: left !important;
  }

  /* ── Boutons action: icônes seules (taille tap accessible) ── */
  .btn-icon {
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
  }

  .btn-icon i,
  .btn-icon svg {
    width: 16px;
    height: 16px;
  }

  /* ── Badges compacts ── */
  .badge {
    font-size: 9px;
    padding: 2px 5px;
  }

  /* ── Gauge compact ── */
  .progress-bar {
    height: 5px;
  }
}

/* ── Très petit mobile (< 360px) ── */
@media (max-width: 360px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .stat-card .stat-value {
    font-size: 18px;
  }

  .stat-card .stat-label {
    font-size: 11px;
  }

  td, th {
    padding: 5px 3px;
    font-size: 10px;
  }
}