/**
 * A2ZCommunications Quote & Invoice Manager - Responsive CSS
 * Desktop, Laptop, Tablet & Mobile Breakpoints
 */

/* ==========================================================================
   LAPTOPS & TABLETS (Max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* ==========================================================================
   TABLETS & MOBILES (Max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 240px;
  }

  .sidebar {
    transform: translateX(-100%);
  }

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

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

  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
  }

  .top-header {
    padding: 0 16px;
  }

  .main-content {
    padding: 16px;
  }

  .quick-actions-bar {
    flex-wrap: wrap;
  }

  .quick-actions-bar .btn {
    flex: 1 1 calc(50% - 6px);
  }

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

  .totals-container {
    flex-direction: column;
    gap: 16px;
  }

  .amount-words-box, .totals-card {
    max-width: 100%;
    width: 100%;
  }

  .doc-form-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .doc-form-meta {
    width: 100%;
    flex-direction: column;
  }
}

/* ==========================================================================
   SMALL MOBILES (Max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions-bar .btn {
    flex: 1 1 100%;
  }

  .page-app-title {
    font-size: 0.95rem;
  }

  .top-header {
    gap: 8px;
  }

  .header-actions .btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .action-btn-group {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}