/* ============================================================
   YBT Management Software — Responsive Breakpoints
   Tablet (≤1024px), Mobile (≤768px), Small Mobile (≤480px)
   ============================================================ */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: var(--z-modal);
    box-shadow: var(--shadow-xl);
  }

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

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

  .main-wrapper {
    margin-left: 0 !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

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

  .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .col-span-2,
  .col-span-3 {
    grid-column: span 1 / span 1;
  }

  .pipeline-kanban-board {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
  }
}

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

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

  .global-search-container {
    display: none;
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4 {
    grid-column: span 1 / span 1 !important;
  }

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

  .page-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pipeline-kanban-board {
    grid-template-columns: 1fr;
  }

  .tabs-nav {
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .page-title {
    font-size: 1.25rem;
  }

  .kpi-value {
    font-size: 1.35rem;
  }

  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
  }
}