/* ==========================================================================
   INVOICEFLOW — RESPONSIVE STYLES (responsive.css)
   Mobile-first breakpoint rules, touch targets, and overflow safety.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Large Desktop (1280px and above)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .hero-title {
    font-size: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   2. Desktop & Tablet Landscape (992px to 1279px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

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

  .workspace-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

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

  .templates-grid > :nth-child(5) {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   3. Tablet Portrait (768px to 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site-header {
    height: 64px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-drawer {
    display: block;
  }

  .hero-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-trust-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-guarantee {
    justify-content: center;
  }

  .hero-visual {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  /* Invoice Generator Tablet */
  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .preview-panel {
    position: static;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   4. Mobile Devices (Under 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --header-height: 64px;
  }

  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .section-title {
    font-size: 1.75rem;
  }

  .section-description {
    font-size: 1rem;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1.0625rem;
  }

  .benefits-grid,
  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

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

  .templates-grid > :nth-child(5) {
    grid-column: span 1;
  }

  .seo-text-columns {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .seo-content-card {
    padding: var(--space-6);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  /* Invoice Generator Mobile View Switcher */
  .mobile-view-tabs {
    display: flex;
  }

  /* When tabs are active on mobile */
  .workspace-grid[data-mobile-view="editor"] .preview-panel {
    display: none;
  }

  .workspace-grid[data-mobile-view="preview"] .editor-panel {
    display: none;
  }

  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Prevent iOS Safari auto-zoom on input focus */
  .form-input,
  .form-textarea,
  .select-control {
    font-size: 16px;
    min-height: 44px;
  }

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

  .generator-toolbar {
    padding: var(--space-3) var(--space-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .toolbar-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
  }

  .autosave-status {
    align-self: flex-start;
  }

  /* --------------------------------------------------------------------------
     Mobile Line Items Card Transformation (max-width: 767px)
     Eliminates horizontal scrolling by turning table rows into card grids.
     -------------------------------------------------------------------------- */
  .items-table-container {
    overflow-x: visible;
  }

  .items-table {
    min-width: 0;
    width: 100%;
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }

  .items-table thead {
    display: none;
  }

  .items-table tbody {
    display: block;
    width: 100%;
  }

  .editor-item-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .editor-item-row td {
    display: block;
    width: 100%;
    padding: 0;
  }

  .editor-item-row .col-desc {
    grid-column: span 2;
  }

  .editor-item-row .col-qty {
    grid-column: span 1;
  }

  .editor-item-row .col-rate {
    grid-column: span 1;
  }

  .editor-item-row .col-tax {
    grid-column: span 1;
  }

  .editor-item-row .col-discount {
    grid-column: span 1;
  }

  .editor-item-row .col-amount {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .editor-item-row .col-actions {
    grid-column: span 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .editor-item-row .item-amount-display {
    text-align: left;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary-700);
    padding: 0.375rem 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .editor-item-row .item-qty-input,
  .editor-item-row .item-rate-input,
  .editor-item-row .item-tax-input,
  .editor-item-row .item-disc-input {
    font-variant-numeric: tabular-nums;
  }

  .item-mobile-label {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-600);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Accessible Touch Targets (Minimum 44x44px) */
  .btn-add-item {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .btn-remove-item {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-tab-btn {
    min-height: 44px;
  }

  .btn-zoom {
    min-width: 44px;
    min-height: 44px;
  }

  .color-swatch-btn {
    min-width: 38px;
    min-height: 38px;
  }

  .preview-viewport {
    padding: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-paper {
    padding: 24px 16px;
    font-size: 0.8125rem;
    min-height: auto;
  }

  .invoice-paper-header {
    flex-direction: column;
    gap: var(--space-4);
  }

  .template-corporate .invoice-paper-header {
    margin: -24px -16px var(--space-4) -16px;
    padding: 16px 14px;
    border-radius: 0;
  }

  .paper-invoice-meta {
    text-align: left;
  }

  .paper-meta-table {
    margin-left: 0;
  }

  .paper-parties-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .paper-footer-notes {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .paper-totals-box {
    width: 100%;
  }

  /* Mobile buttons */
  .btn-lg {
    width: 100%;
  }

  /* Modal Mobile Responsiveness */
  .modal-card {
    padding: var(--space-4);
    max-width: 95vw;
  }

  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
  }

  .modal-actions .btn {
    width: 100%;
  }

  /* Numbering Settings Box Mobile */
  .numbering-settings-box .form-grid-3 {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   5. Small Mobile (Under 380px) — Ultra-Compact Hardening (320px - 380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.875rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-mockup-wrapper {
    padding: var(--space-4);
  }

  .mockup-parties {
    grid-template-columns: 1fr;
  }

  .invoice-paper {
    padding: 16px 10px;
  }

  .paper-items-table th,
  .paper-items-table td {
    padding: var(--space-2) 4px;
    font-size: 0.75rem;
  }

  .paper-items-table .paper-item-desc {
    max-width: 120px;
    word-break: break-word;
  }

  .editor-item-row {
    padding: var(--space-3);
  }
}