/* ==========================================================================
   DSB - responsive.css
   Breakpoints : 768px (tablette) et 480px (mobile)
   ========================================================================== */

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

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

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

  .page-content {
    padding: 16px;
  }

  .topbar {
    padding: 12px 16px;
  }

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

  .nav-label {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .page-title {
    font-size: 17px;
  }

  .user-menu-name {
    display: none;
  }

  .card {
    padding: 14px;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-actions {
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
  }

  .login-card {
    padding: 24px;
  }
}