/* ================================
   CodingEval Compiler - Mobile Overrides
=================================== */

@media (max-width: 968px) {
  /* Editor container stacks */
  .editor-container {
    grid-template-columns: 1fr !important;
    padding: 0 1rem !important;
    min-height: auto !important;
  }

  /* Sidebar floats as overlay */
  .sidebar {
    position: fixed !important;
    top: 3.25rem !important;
    left: 0.75rem !important;
    width: 260px !important;
    z-index: 120 !important;
  }

  .sidebar.collapsed {
    transform: translateX(-105%) !important;
  }

  /* Editor + output stack */
  .editor-wrapper {
    grid-template-columns: 1fr !important;
  }

  .output-panel {
    margin-top: 0.7rem !important;
    width: 100% !important;
  }

  /* Shorter editor */
  .editor-content {
    min-height: 360px !important;
    grid-template-columns: 1fr !important;
  }

  .line-numbers {
    display: none !important;
  }

  /* Status bar behaves like footer */
  .status-bar {
    position: relative !important;
    padding-inline: 1.2rem !important;
    font-size: 0.78rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  /* Navigation */
  .nav-container {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
  }

  .nav-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .nav-actions button,
  .nav-actions a {
    width: 100% !important;
    padding: 12px !important;
    font-size: 1rem !important;
  }

  /* Toolbar */
  .editor-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .toolbar-left,
  .toolbar-right {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .toolbar-btn,
  .btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 1rem !important;
  }

  /* Editor tabs */
  .editor-tabs {
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
  }

  .editor-tab {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  /* Output tabs stack */
  .output-tabs {
    flex-direction: column !important;
  }

  .output-tab {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(55, 65, 81, 0.95) !important;
  }

  .output-content {
    font-size: 0.85rem !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  /* Toast notifications */
  .toast {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 90% !important;
    font-size: 0.85rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}
/* ================================
   Orientation Handling
=================================== */

/* Portrait mode: stack editor and output */
@media screen and (orientation: portrait) {
  .editor-wrapper {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .output-panel {
    margin-top: 0.75rem !important;
    width: 100% !important;
  }

  .editor-content {
    grid-template-columns: 1fr !important;
  }

  .line-numbers {
    display: none !important;
  }

  .editor-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .toolbar-btn,
  .btn {
    width: 100% !important;
  }
}

/* Landscape mode: allow side-by-side layout */
@media screen and (orientation: landscape) {
  .editor-wrapper {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
    gap: 0.9rem !important;
  }

  .editor-content {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .line-numbers {
    display: block !important;
  }

  .editor-toolbar {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .toolbar-btn,
  .btn {
    width: auto !important;
  }
}