/* ==========================================================================
   HOLYSTOCK - Responsive Breakpoints
   ==========================================================================
   Mobile-first overrides for tablet (768px) and phone (480px) viewports.
   ========================================================================== */

/* --- Tablet & Small Desktop (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-charts {
    grid-template-columns: 1fr;
  }

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

/* --- Tablet (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Hide desktop sidebar, show mobile bottom nav */
  .sidebar {
    transform: translateX(-100%);
  }

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

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

  .bottom-nav {
    display: block;
  }

  .main-content {
    margin-left: 0;
    padding: var(--space-6);
    padding-bottom: calc(var(--space-16) + var(--space-4)); /* room for bottom nav */
  }

  /* Stack stat cards vertically */
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Show card view, hide table view */
  .inventory-table-wrapper {
    display: none;
  }

  .inventory-cards {
    display: flex;
  }

  /* Modal full-width on mobile */
  .modal {
    width: 95%;
    padding: var(--space-6);
  }

  /* Page header */
  .page-header .page-title {
    font-size: var(--text-2xl);
  }

  /* Toolbar stacking */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-left {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .toolbar-left .search-bar {
    width: 100%;
  }

  .toolbar-left .filter-select {
    flex: 1;
    min-width: calc(50% - var(--space-3));
  }

  .toolbar-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .toolbar-right .btn {
    flex: 1;
    justify-content: center;
  }

  /* Inventory footer stacking */
  .inventory-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .inventory-footer-left {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .pagination-controls {
    justify-content: center;
  }

  /* Settings */
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Bottom nav - truncate long labels */
  .bottom-nav .nav-item span {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  /* Toast repositioning */
  .toast-container {
    top: auto;
    bottom: calc(var(--space-16) + var(--space-4));
    right: var(--space-4);
    left: var(--space-4);
  }

  .toast {
    width: 100%;
  }

  /* Invoice review modal on tablets */
  .ir-scroll {
    max-height: 50vh;
  }

  .ir-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .ir-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .ir-select,
  .ir-input {
    min-height: 36px;
  }

  .ir-cell-skip input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}

/* --- Phone (max-width: 480px) --- */
@media (max-width: 480px) {
  .main-content {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-16) + var(--space-4));
  }

  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  /* Larger touch targets */
  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
  }

  .sidebar-nav .nav-item {
    min-height: 44px;
  }

  .bottom-nav .nav-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Bottom nav - smaller text on phones */
  .bottom-nav .nav-item span {
    max-width: 52px;
    font-size: 0.65rem;
  }

  /* Simplify stat cards */
  .stat-card {
    padding: var(--space-4);
  }

  .stat-card .stat-value {
    font-size: var(--text-2xl);
  }

  /* Inventory cards */
  .inventory-card .card-details {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* Filter selects full width on small phones */
  .toolbar-left .filter-select {
    min-width: 100%;
  }

  /* Inventory card badge smaller */
  .inventory-card .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  /* Page header */
  .page-header .page-title {
    font-size: var(--text-xl);
  }

  /* Analytics */
  .analytics-summary {
    grid-template-columns: 1fr;
  }

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

  .chart-card {
    padding: var(--space-4);
  }

  .chart-card canvas {
    max-height: 220px;
  }

  /* Invoice review modal on phones */
  .modal.modal-wide {
    padding: var(--space-4);
  }

  .ir-scroll {
    max-height: 45vh;
  }

  .ir-table {
    min-width: 780px;
  }

  .ir-input--qty {
    width: 50px;
  }

  .ir-input--price {
    width: 62px;
  }
}