/* Keep page actions beside the title while the navigation is collapsed.
   The existing mobile action icons replace labels before the header gets crowded. */
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
  .app-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-md);
  }

  .app-page-header > :first-child { min-width: 0; }

  .app-page-header .app-page-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    margin-left: 0;
    gap: var(--space-xs);
  }

  .app-page-header > .app-mobile-action { grid-column: 2; grid-row: 1; }

  .app-page-header .app-mobile-action,
  .app-page-header .user-row-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0;
    border-radius: var(--radius-control);
  }

  .app-page-header .app-mobile-action-label,
  .app-page-header .user-actions-chevron { display: none; }

  .app-page-header .app-mobile-icon {
    display: block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .app-page-header .user-row-actions-toggle .app-mobile-icon {
    fill: currentColor;
    stroke-width: 3;
  }
}