/* ==========================================================================
   NEO-BANKING MOBILE & RESPONSIVE DESIGN
   ========================================================================== */

/* Desktop Large Screens */
@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* Tablet Screens */
@media (max-width: 900px) {
  .hero-stats-row {
    grid-template-columns: 1fr 1fr;
  }

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

  .goals-container {
    grid-template-columns: 1fr;
  }
}

/* Mobile Screens (iPhone / Android Mobile Viewport) */
@media (max-width: 768px) {
  .app-container {
    padding: 0.85rem 1rem;
    padding-bottom: 6rem; /* Extra space for bottom bar */
  }

  /* Header adjustments for mobile */
  .app-header {
    padding: 0.75rem 1rem;
  }

  .user-info p {
    display: none; /* Keep header compact on mobile */
  }

  .header-controls .btn span {
    display: none; /* Icon-only header buttons on mobile */
  }

  .header-controls .btn {
    padding: 0.55rem;
    border-radius: var(--radius-full);
  }

  /* Hero Balance Mobile Styling */
  .hero-balance-card {
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius-lg);
  }

  .hero-balance-amount {
    font-size: 2.2rem;
  }

  .hero-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-top: 1rem;
  }

  .stat-pill strong {
    font-size: 1.05rem;
  }

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

  /* Panel Controls on Mobile */
  .panel-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem;
  }

  .search-box {
    width: 100%;
    min-width: unset;
  }

  .filters-group {
    width: 100%;
    justify-content: space-between;
  }

  .filter-item select {
    padding: 0.5rem 1.75rem 0.5rem 0.65rem;
    font-size: 0.8rem;
  }

  /* Cards Grid on Mobile */
  .accounts-grid {
    grid-template-columns: 1fr;
    padding: 0.85rem;
    gap: 0.85rem;
  }

  .account-card {
    padding: 1rem;
    border-radius: var(--radius-md);
  }

  /* Bottom Navigation Bar visible on mobile */
  .mobile-bottom-bar {
    display: flex;
  }

  /* Modal Slide-up Drawer on Mobile */
  .modal-overlay {
    align-items: flex-end;
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    padding: 1.35rem;
    animation: modalDrawerUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes modalDrawerUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

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

  .calc-summary-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .calc-summary-badge > div {
    text-align: left !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/* Small Mobile Phones (< 480px) */
@media (max-width: 480px) {
  .hero-balance-amount {
    font-size: 1.9rem;
  }

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