/* responsive.css */

/* ── GLOBAL RESET (all breakpoints) ── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TABLET STYLES (max-width: 1024px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {

  /* Slightly smaller sidebar */
  .sidebar {
    width: 200px;
  }

  .main-wrapper {
    margin-left: 200px;
  }

  /* Stat cards 2 per row */
  .stats-grid {
    grid-template-columns:
      repeat(2, 1fr) !important;
  }

  /* Customer grid 2 per row */
  .customer-grid {
    grid-template-columns:
      repeat(2, 1fr) !important;
  }

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

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MOBILE STYLES (max-width: 768px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {

  /* ── SIDEBAR ── */

  /* Hide sidebar by default on mobile */
  .sidebar {
    transform: translateX(-100%);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: 200;
    width: 260px;
    max-width: 80vw;
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }

  /* Sidebar open state */
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 199;
  }

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

  /* Main content full width */
  .main-wrapper {
    margin-left: 0 !important;
  }

  /* ── TOPBAR ── */
  .topbar {
    padding: 0 var(--spacing-sm);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* Show hamburger menu button */
  .topbar__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 20px;
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
  }

  /* ── CONTENT ── */
  .content {
    padding: var(--spacing-sm) !important;
  }

  /* ── PAGE HEADER ── */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spacing-sm) !important;
  }

  .page-header .btn-group {
    width: 100%;
    flex-wrap: wrap;
  }

  .page-header .btn-group a,
  .page-header .btn-group button {
    flex: 1;
    text-align: center;
    min-width: 120px;
  }

  /* ── STAT CARDS ── */
  .stats-grid {
    grid-template-columns:
      repeat(2, 1fr) !important;
    gap: var(--spacing-sm) !important;
  }

  .stat-card {
    padding: var(--spacing-sm) !important;
  }

  .stat-card__number {
    font-size: 1.4rem !important;
  }

  /* ── CUSTOMER GRID → single column ── */
  .customer-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── TABLES ── */
  .table-wrapper,
  .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px;
  }

  /* ── FILTER BAR ── */
  .filter-bar {
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
  }

  .filter-bar__search {
    max-width: 100% !important;
    width: 100% !important;
  }

  .filter-bar__filters {
    width: 100%;
    flex-wrap: wrap;
  }

  .filter-select,
  .filter-date {
    flex: 1;
    min-width: 120px;
  }

  /* ── CARDS ── */
  .card {
    padding: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  /* ── CUSTOMER SUMMARY BAR ── */
  .customer-summary-bar {
    gap: var(--spacing-md) !important;
    padding: var(--spacing-sm) !important;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .summary-item {
    min-width: 80px;
  }

  /* ── FORMS ── */
  .form-row {
    flex-direction: column !important;
  }

  .form-group {
    width: 100% !important;
  }

  /* ── ACTION STRIP ── */
  .action-strip {
    flex-direction: column !important;
  }

  .action-btn {
    width: 100% !important;
  }

  /* ── TAB BAR ── */
  .tab-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

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

  /* ── BUTTONS ── */
  .btn-group {
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
  }

  /* ── TOPBAR USER INFO ── */
  .topbar__email {
    display: none !important;
  }

  /* ── TRANSACTION STAT CARDS ── */
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns:
      repeat(2, 1fr) !important;
  }

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
EXTRA SMALL DEVICES (max-width: 480px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {

  /* ── STAT CARDS single column ── */
  .stats-grid,
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* ── PAGE HEADER ── */
  .page-header h1 {
    font-size: 1.5rem !important;
  }

  .nav-list > li > a {
    font-size: 1rem;
  }

}