/* ==================== Mobile Responsive ==================== */

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

  .sidebar-overlay {
    display: block;
    pointer-events: none;
  }

  .sidebar-overlay.active {
    pointer-events: auto;
  }

  .sidebar-left {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 260px;
    padding-top: 16px;
  }

  .sidebar-left.mobile-open {
    transform: translateX(0);
  }

  .app-container {
    height: calc(100vh - 56px);
  }

  .view-container {
    padding: 16px;
  }

  /* ASR module mobile adjustments */
  .asr-layout {
    flex-direction: column;
  }

  .asr-sidebar {
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
  }

  .asr-main {
    min-height: 40vh;
  }
}

@media (max-width: 480px) {
  .global-header {
    padding: 0 12px;
  }

  .header-controls {
    gap: 8px;
  }

  #quotaDisplay {
    display: none;
  }

  .view-container {
    padding: 12px;
  }
}