/* Mobile: sidebar collapses, tabs go full width */
@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .panels {
    flex: 1;
    min-height: 0;
  }

  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .log-row {
    font-size: 0.65rem;
  }

  .tree-container {
    font-size: 0.7rem;
  }

  .state-form, .publish-form, .job-form {
    flex-wrap: wrap;
  }

  .state-input, .pub-input {
    min-width: 0;
    flex-basis: 100%;
  }
}

/* Tablet: narrower sidebar */
@media (min-width: 769px) and (max-width: 1023px) {
  .sidebar {
    width: 240px;
  }
}

/* Desktop wide: more generous sidebar */
@media (min-width: 1400px) {
  .sidebar {
    width: 320px;
  }

  .header-content {
    max-width: 1800px;
  }
}