/* ==========================================================================
   InvoiceGen Pro — Responsive Styles
   Breakpoints: 1366px, 1024px, 768px, 414px, 390px, 375px, 320px
   ========================================================================== */

/* Large Desktop (1920px - 1440px) */
@media (min-width: 1440px) {
  :root {
    --container-max: 1480px;
  }
}

/* Medium Desktop & Small Laptop (1025px - 1366px) */
@media (max-width: 1366px) {
  .generator-workspace {
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .invoice-sheet {
    padding: 36px;
  }
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
  .generator-workspace {
    grid-template-columns: 1fr;
  }

  .preview-sticky-wrap {
    position: static;
  }

  .invoice-preview-viewport {
    max-height: 800px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

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

/* Mobile & Small Tablet (Below 768px) */
@media (max-width: 768px) {
  /* Navigation */
  .mobile-menu-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    gap: 0.5rem;
    display: none;
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: 0.75rem 0.5rem;
  }

  /* View toggle tabs on mobile (Editor vs Live Preview) */
  .view-toggle-tabs {
    display: grid;
  }

  .generator-workspace.show-preview #editor-column {
    display: none;
  }

  .generator-workspace.show-editor #preview-column {
    display: none;
  }

  /* Toolbar adjustments */
  .quick-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .toolbar-group {
    justify-content: stretch;
  }

  .toolbar-group .btn {
    flex: 1;
  }

  /* Form layout */
  .editor-card {
    padding: 1.25rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

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

  /* Table on mobile: horizontal scroll with clear hint */
  .items-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }

  .items-table {
    min-width: 580px;
  }

  /* Customization box */
  .customization-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  /* Hero Section */
  .hero-compact {
    padding: 1.25rem 0 0.75rem;
  }

  .hero-compact h1 {
    font-size: 1.5rem;
  }

  .hero-compact p {
    font-size: 0.95rem;
  }

  .hero-badges {
    gap: 0.5rem;
  }

  /* Preview Viewport & Scaling */
  .invoice-preview-viewport {
    padding: 0.75rem;
    max-height: none;
    overflow-x: auto;
  }

  .invoice-sheet {
    padding: 24px 16px;
    font-size: 11px;
    min-width: 500px; /* enables readable horizontal scroll or scaled wrapper */
    transform-origin: top left;
  }

  .inv-header {
    margin-bottom: 18px;
  }

  .inv-title {
    font-size: 22px;
  }

  .inv-company-name {
    font-size: 16px;
  }

  .inv-bottom-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  /* Modals */
  .modal-content {
    max-height: 95vh;
  }

  .modal-body {
    padding: 1rem;
  }
}

/* Extra Small Phones (320px - 414px) */
@media (max-width: 414px) {
  .container {
    padding: 0 0.85rem;
  }

  .brand-logo {
    height: 32px;
  }

  .btn {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }

  .logo-upload-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .toast {
    max-width: calc(100vw - 32px);
    right: 16px;
    bottom: 16px;
  }
}