/* Shared app-shell UI primitives for root tools pages. */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
  margin-right: 6px;
}

.topbar a,
.brand a {
  color: #fff;
  text-decoration: none;
}

.topbar a:hover,
.brand a:hover {
  color: var(--orange);
}

.brand .brand-title {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: var(--brand-title-size, 14px);
  color: #fff;
  white-space: nowrap;
  text-transform: uppercase;
}

.btn {
  background: var(--surface-color);
  color: var(--coffee-bean);
  border: 1px solid rgba(34, 9, 1, 0.25);
  border-radius: 10px;
  padding: var(--app-btn-pad-y, 9px) var(--app-btn-pad-x, 12px);
  cursor: pointer;
  font-size: var(--app-btn-font-size, 14px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover {
  background: #fff;
  border-color: var(--rusty-spice);
  color: var(--coffee-bean);
}

.btn.primary {
  background: var(--rusty-spice);
  border-color: var(--coffee-bean);
  color: #fff;
  font-weight: 650;
}

.btn.primary:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--coffee-bean);
}

.btn.danger {
  background: rgba(98, 23, 8, 0.08);
  border-color: var(--dark-garnet);
  color: var(--dark-garnet);
}

.btn.danger:hover {
  background: rgba(98, 23, 8, 0.14);
  border-color: var(--coffee-bean);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.spacer {
  flex: 1;
}

.status {
  font-size: var(--app-status-font-size, 13px);
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: var(--app-status-max-width, 42vw);
}