/* Compact, readable navigation on phones, regardless of the desktop sidebar state. */
@media (max-width: 700px) {
  .sidebar,
  body.sidebar-collapsed .sidebar {
    position: relative;
    width: 100%;
    padding: 10px 16px 0;
    border-right: 0;
    border-bottom: 1px solid #41464c;
  }

  .sidebar-header,
  body.sidebar-collapsed .sidebar-header {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 36px;
    padding: 0;
  }

  .sidebar-header .brand,
  body.sidebar-collapsed .sidebar-header .brand {
    justify-content: flex-start;
    gap: 8px;
    font-size: 18px;
  }

  .sidebar-header .brand > span,
  body.sidebar-collapsed .sidebar-header .brand > span {
    display: inline-block !important;
  }

  .sidebar-toggle,
  body.sidebar-collapsed .sidebar-toggle {
    display: none;
  }

  .sidebar nav,
  body.sidebar-collapsed .sidebar nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 9px 0 0;
    padding: 0 0 8px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .sidebar nav button,
  body.sidebar-collapsed .sidebar nav button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #b8c2cc;
    background: transparent;
    font-size: 11px;
    line-height: 1.1;
    scroll-snap-align: start;
  }

  .sidebar nav button.active,
  body.sidebar-collapsed .sidebar nav button.active {
    border-color: #3777b8;
    color: #e8f3ff;
    background: #21466c;
  }

  .sidebar nav button .nav-icon,
  body.sidebar-collapsed .sidebar nav button .nav-icon,
  .sidebar nav button i {
    display: none !important;
  }

  .sidebar nav button .nav-label,
  body.sidebar-collapsed .sidebar nav button .nav-label {
    display: inline-block !important;
    width: auto;
    font-size: 11px;
  }

  .topbar {
    height: auto;
    min-height: 50px;
    padding: 7px 16px;
  }

  .top-actions {
    justify-content: flex-end;
    gap: 6px;
  }

  .top-actions #save-state {
    display: none;
  }

  .top-actions .icon-button,
  .top-actions .primary {
    white-space: nowrap;
    font-size: 11px;
  }
}