header {
  background-color: var(--pico-background-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

nav,
nav.container > ul {
  background: var(--pico-primary-background) !important;
}

/* Icon button utility class, theme-adaptive (for settings, theme, etc.) */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--pico-primary-background);
  color: var(--pico-primary-text);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.icon-btn:hover:not(:disabled) {
  background: var(--pico-primary-hover-background, #e9ecef);
}
.icon-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



td.coa {
  display: flex; /* Make it a flex container */
  /* flex-direction: row; */ /* row is the default */
  align-items: center; /* Vertically center buttons if needed */
  gap: 8px; /* Add some space between buttons (adjust value as needed) */
  /* You might still need to adjust width if the table column itself is constrained */
  /* width: auto; */
}

/* You might also need to adjust the button styles specifically within this td */
td.coa button {
  display: inline-block; /* Override the block display */
  width: auto; /* Let buttons size based on content */
  /* You could use flex: 1; if you want them to fill space within the td equally */
  flex-shrink: 0; /* Prevent buttons from shrinking too much */
}