/* ==========================================================================
   Responsive Breakpoints

   Mobile: < 640px
   Tablet: 640px - 1024px
   Desktop: > 1024px
   ========================================================================== */

/* ==========================================================================
   Tablet and below (< 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .modal--xl {
    max-width: 90%;
  }
}

/* ==========================================================================
   Mobile (< 640px)
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --header-height: 56px;
  }

  /* Layout */
  .app-header {
    padding: 0 var(--spacing-4);
  }

  .app-header__logo {
    font-size: var(--font-size-lg);
  }

  .app-nav {
    padding: 0 var(--spacing-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-nav__list {
    padding-bottom: var(--spacing-2);
  }

  .app-nav__link {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
  }

  .app-nav__link span {
    display: none;
  }

  .app-main {
    padding: var(--spacing-4);
  }

  /* Typography */
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }

  /* Page Header */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header__actions {
    width: 100%;
  }

  .page-header__actions .btn {
    flex: 1;
  }

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

  .grid--auto-fit {
    grid-template-columns: 1fr;
  }

  /* Cards */
  .card__header,
  .card__body,
  .card__footer {
    padding: var(--spacing-4);
  }

  /* Forms */
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .form-inline .form-group {
    width: 100%;
  }

  .input-group {
    flex-direction: column;
  }

  .input-group .form-input {
    border-radius: var(--radius-lg);
  }

  .input-group__addon {
    border: 1px solid var(--color-gray-300);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* Tables */
  .table th,
  .table td {
    padding: var(--spacing-2) var(--spacing-3);
  }

  /* Modal */
  .modal-backdrop {
    padding: var(--spacing-2);
    align-items: flex-end;
  }

  .modal {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .modal__header,
  .modal__body,
  .modal__footer {
    padding: var(--spacing-4);
  }

  .modal__footer {
    flex-direction: column;
  }

  .modal__footer .btn {
    width: 100%;
  }

  /* Toast */
  .toast-container {
    left: var(--spacing-4);
    right: var(--spacing-4);
    bottom: var(--spacing-4);
  }

  .toast {
    max-width: 100%;
  }

  /* Stat Cards */
  .stat-card__value {
    font-size: var(--font-size-xl);
  }

  /* Dropzone */
  .dropzone {
    padding: var(--spacing-6);
  }

  .dropzone__icon {
    width: 40px;
    height: 40px;
  }

  /* Cost Breakdown */
  .cost-breakdown__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
  }

  .cost-breakdown__value {
    font-size: var(--font-size-lg);
  }

  /* Empty State */
  .empty-state {
    padding: var(--spacing-8) var(--spacing-4);
  }

  .empty-state__icon {
    width: 48px;
    height: 48px;
  }

  /* Buttons */
  .btn--lg {
    padding: var(--spacing-3) var(--spacing-4);
  }

  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   Show only on mobile
   ========================================================================== */

.show-mobile {
  display: none !important;
}

@media (max-width: 640px) {
  .show-mobile {
    display: flex !important;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .app-header,
  .app-nav,
  .btn,
  .modal-backdrop,
  .toast-container {
    display: none !important;
  }

  .app-main {
    padding: 0;
  }

  .card {
    box-shadow: none;
    border: 1px solid #000;
  }
}