@media (min-width: 1400px) {
  .main-content { padding: 28px 48px; }
  .chart-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .chart-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-card-wide { grid-column: span 2; }
  .pos-layout { grid-template-columns: 1fr 340px; }
}

@media (max-width: 1024px) {
  .sidebar { width: 210px; }
  .main-content { padding: 24px 26px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

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

  .sidebar {
    width: 240px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-overlay { display: block; }

  .main-content { padding: 76px 20px 28px; max-width: 100%; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-3 { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .chart-card-wide { grid-column: span 1; }

  .pos-layout { grid-template-columns: 1fr; }
  .pos-cart { position: static; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  .modal-form, .auth-form-grid { grid-template-columns: 1fr; }

  .page-header-row { flex-direction: column; gap: 12px; align-items: stretch; }
  .page-header-row .btn { align-self: flex-start; }

  .filter-form { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .main-content { padding: 74px 18px 26px; }
  .chart-grid { gap: 12px; }
  .chart-card { padding: 14px; }
  .data-table th, .data-table td { padding: 11px 12px; }
  .cart-items { max-height: 220px; }
}

@media (max-width: 600px) {
  .main-content { padding: 72px 14px 24px; }

  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-value { font-size: 17px; }

  .product-grid { grid-template-columns: 1fr; }

  .table-wrap { border-radius: 8px; }
  .data-table th, .data-table td { padding: 10px; font-size: 13px; }
  .actions-cell { flex-direction: column; gap: 6px; align-items: flex-start; }

  .modal-box { width: 96vw; }
  .modal-form { padding: 16px; }

  .auth-card, .auth-card-wide { padding: 24px 20px; width: 100%; }
  .auth-page { padding: 12px; }

  .receipt-paper { max-width: 100%; padding: 18px; }
  .receipt-actions { flex-direction: column; }
  .receipt-actions .btn { width: 100%; }

  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-form input, .filter-form select { width: 100%; }

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

@media (max-width: 480px) {
  .sidebar-brand .brand-name { font-size: 15px; }
  .sidebar-nav a { font-size: 13px; padding: 9px 10px; }

  .kpi-card { padding: 12px; }
  .kpi-label { font-size: 11px; }
  .kpi-value { font-size: 15px; }

  .btn { padding: 9px 14px; font-size: 13px; }
  .page-header h1 { font-size: 18px; }
  .page-subtitle { font-size: 12px; }

  .cart-item { font-size: 12px; }
  .pos-search { padding: 9px 12px; }
  .product-tile { padding: 10px; }
  .product-tile-name { font-size: 13px; }

  .modal-header { padding: 14px 16px; }
  .modal-header h2 { font-size: 15px; }
  .modal-form { grid-template-columns: 1fr; padding: 14px; gap: 12px; }

  .chart-card h3 { font-size: 13px; }
}

@media (max-width: 375px) {
  .main-content { padding: 68px 10px 20px; }
  .sidebar { width: 88vw; max-width: 260px; }

  .kpi-card { padding: 10px; }
  .kpi-value { font-size: 14px; }

  .data-table th, .data-table td { padding: 8px; font-size: 12px; }
  .badge { font-size: 10px; padding: 2px 7px; }

  .auth-brand .brand-name { font-size: 14px; }
  .auth-page h1 { font-size: 18px; }
  .auth-card, .auth-card-wide { padding: 18px 14px; }

  .receipt-paper { padding: 14px; font-size: 12px; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .modal-box { max-height: 92vh; }
  .sidebar { padding: 10px 0; }
  .sidebar-brand { padding: 0 16px 12px; }
  .cart-items { max-height: 140px; }
}