/* The top bar, view switch and dialogs, shared by the application pages. */

[hidden] { display: none !important; }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; white-space: nowrap; }
.nav { display: flex; gap: var(--space-1); }
.nav a {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--surface-sunken); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.scope-field { display: flex; align-items: center; gap: var(--space-2); }
.scope-field label, .scope-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.scope select, .scope input { width: auto; }
.scope select { max-width: 190px; }
.user { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
.select { padding-right: var(--space-1); }

.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.segmented button {
  min-height: 30px; padding: 0 var(--space-3); border: 0; background: var(--surface);
  color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--border-strong); }
.segmented button:hover { background: var(--surface-sunken); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.segmented button:disabled { color: var(--text-muted); background: var(--surface-sunken); cursor: not-allowed; }

dialog {
  max-width: 480px; padding: var(--space-4); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-overlay);
}
dialog::backdrop { background: rgb(16 28 42 / 0.4); }
dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; }
dialog p { margin: 0 0 var(--space-3); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }


@media (max-width: 720px) { .user { margin-left: 0; } }