@import '/StationeersServerUI/static/css/variables.css';

/* Mobile adjustments */
@media (max-width: 768px) {
    main {
      padding: 20px;
      margin: 20px 0;
    }
  
    h1 { 
      font-size: 1.2rem; 
      margin-bottom: 20px;
    }
    
    h2 { 
      font-size: 1rem; 
    }
  
    #controls {
      grid-template-columns: 1fr;
    }
  
    button {
      width: 100%;
      font-size: 0.9rem;
      padding: 10px 20px;
    }
  
    #console, #detection-console {
      height: 200px;
    }
  
    .backup-item {
      flex-direction: column;
      padding: 12px;
      text-align: center;
    }
  
    .backup-item button {
      margin-top: 10px;
      width: 100%;
    }
    
    .tab-button {
      padding: 8px 12px;
      font-size: 0.8rem;
    }
    
    .endpoint-container {
      grid-template-columns: 1fr;
    }
    
    .channel-grid {
      grid-template-columns: 1fr;
    }
    
    .form-actions {
      flex-direction: column;
    }
    
    .form-actions button, 
    .form-actions input[type="submit"] {
      width: 100%;
    }
  }