/* =============================================================================
   VizaAI — Responsive & Mobile Adaptations (responsive.css)
   ============================================================================= */

@import url('./variables.css');

/* ── 1. Large Tablets & Small Laptops (max-width: 1024px) ── */
@media (max-width: 1024px) {
  .container {
    max-width: 960px;
  }

  .grid-layout {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
  }

  .sidebar {
    width: 200px;
  }

  .main-content-with-sidebar {
    margin-left: 200px;
  }

  .card-stat-number {
    font-size: var(--text-2xl);
  }
}

/* ── 2. Tablets & Mobile Devices (max-width: 768px) ── */
@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .navbar {
    padding: 0 var(--space-4);
    height: 60px;
  }

  /* Sidebar transitions to Off-canvas Overlay on Mobile */
  .sidebar {
    width: 280px;
    height: 100vh;
    top: 0;
    left: -280px;
    z-index: 1000;
    transition: var(--transition-default);
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open {
    left: 0;
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: var(--backdrop-blur);
    z-index: 999;
    display: none;
  }

  .sidebar-overlay.active {
    display: block;
  }

  .main-content-with-sidebar {
    margin-left: 0;
    padding-top: 70px;
  }

  /* Grid turns single column */
  .grid-layout {
    grid-template-columns: 1fr;
  }

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

  /* Chat Bubbles expand */
  .chat-bubble-user, .chat-bubble-ai {
    max-width: 90%;
  }

  .chat-container {
    height: calc(100vh - 120px);
    border-radius: 0;
  }

  /* Modal turns into bottom sheet */
  .modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: auto;
  }

  .toast-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }

  .toast {
    min-width: 100%;
  }
}

/* ── 3. Small Smartphones (max-width: 480px) ── */
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  .btn {
    width: 100%;
  }

  .btn-inline {
    width: auto;
  }

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

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .input-field, .input-select {
    padding: var(--space-3);
  }
}