/* Comprehensive Mobile & Desktop Responsive Design System */

/* Show/Hide Helpers for Mobile vs Desktop */
.mobile-only-toggle {
  display: none !important;
}

@media (max-width: 1024px) {
  .app-sidebar {
    width: 220px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .grid-3, .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .mobile-only-toggle {
    display: flex !important;
  }

  /* Header adjustments on Mobile */
  .site-header {
    padding: 0 0.85rem;
    gap: 0.5rem;
  }
  
  .brand-logo span {
    font-size: 1.05rem;
  }

  .header-nav {
    display: none; /* Collapsed on mobile, accessible via drawer */
  }

  /* Off-canvas Mobile Sidebar Drawer */
  .app-body, .app-layout {
    flex-direction: column;
  }

  .app-sidebar {
    position: fixed;
    top: 64px;
    left: -280px;
    width: 260px;
    height: calc(100vh - 64px);
    z-index: 400;
    transition: left 0.3s ease;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--color-border);
  }

  .app-sidebar.mobile-open {
    left: 0;
  }

  .sidebar-backdrop {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 64px);
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 390;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .app-main, .app-content {
    padding: 1rem 0.75rem;
  }

  /* Form & Card Grids on Mobile */
  .grid-2, .grid-3, .grid-4, .card-grid, .dashboard-stats {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Responsive Tables */
  .table-container, .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 1rem;
  }

  .data-table {
    min-width: 600px; /* Enable smooth horizontal scroll for wide data tables */
  }

  /* Footer adjustments */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* Risk meter mobile stack */
  .risk-meter {
    flex-direction: column;
    text-align: center;
  }

  /* Vendor Analysis Tab Grid on Mobile */
  .vendor-grid-container {
    grid-template-columns: 1fr !important;
  }
  .vendor-grid-col2 {
    border-left: none !important;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 480px) {
  .brand-logo span {
    display: none; /* Show icon only on extra small mobile */
  }

  .card {
    padding: 1rem;
  }

  .btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.825rem;
  }
}