/* Mobile responsiveness for SGL Tools */
@media screen and (max-width: 768px) {
  /* Nav bar: horizontal scroll */
  nav, .nav, header nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
  }
  nav a, .nav a, header a {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Pipeline/Ideas columns: stack vertically */
  .pipeline-columns, .columns-container, [style*="display:flex"][style*="gap"] {
    flex-direction: column !important;
    overflow-x: visible !important;
  }
  .pipeline-columns > div, .column, .kanban-column {
    min-width: 100% !important;
    width: 100% !important;
  }

  /* Board: horizontal scroll */
  .board-columns, #board-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards: full width */
  .card, .pipeline-card, .idea-card, .kanban-card {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Monitor panels: stack */
  .monitor-grid, .grid {
    grid-template-columns: 1fr !important;
  }

  /* Modals: full screen */
  .modal, .modal-content, [class*="modal"] {
    width: 95vw !important;
    max-width: 95vw !important;
    height: auto !important;
    max-height: 90vh !important;
    margin: 2vh auto !important;
    left: 2.5vw !important;
  }

  /* Form inputs: full width */
  input, select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Touch targets */
  button, a, .btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* General spacing */
  body {
    padding: 0 8px;
    font-size: 14px;
  }
  h1, h2 { font-size: 1.3em; }

  /* Hide non-essential on mobile */
  .activity-panel, .sidebar-right {
    display: none;
  }

  /* Export buttons: smaller on mobile */
  [class*="export"], .export-btn {
    font-size: 11px;
    padding: 6px 10px;
  }
}