/*
 * The app header — `partials/app_header.html`.
 *
 * Shared verbatim by the catalog and public screens with different
 * right-hand content (see design_handoff_ilifu_software_catalog/README.md,
 * "Catalog" and "Public list"); this stylesheet is the one place that
 * layout is defined, so the two screens can never drift apart by accident.
 */

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: 12px var(--space-18);
  border-bottom: var(--border-width) solid var(--line);
  background: var(--panel);
}

/* The wordmark is a link home, but it must not read as one: `color: inherit`
   keeps the design's two-tone (700 brand, 500 product, --dim slash) instead
   of taking the global accent, and the hover underline is suppressed because
   underlining a wordmark looks like a mistake. The affordance is the pointer
   plus the brand word going accent on hover — an instant state change, which
   is the only kind this design allows. */
.app-header__wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--fs-15);
  white-space: nowrap;
  color: inherit;
}

.app-header__wordmark:hover {
  color: inherit;
  text-decoration: none;
}

.app-header__wordmark:hover .app-header__wordmark-brand {
  color: var(--accent);
}

.app-header__wordmark-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-header__wordmark-product {
  font-weight: 500;
}

.app-header__wordmark-slash {
  color: var(--dim);
}

.app-header__stats {
  font-size: var(--fs-11);
  color: var(--dim);
  padding-left: var(--space-6);
  white-space: nowrap;
}

.app-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-14);
  font-size: var(--fs-11-5);
}

/* The user block is the account menu's anchor, so it establishes the
   positioning context the menu drops out of. */
.app-header__user {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: var(--space-8);
  border-left: var(--border-width) solid var(--line);
}

/* `x-cloak` is set here as well as in admin.css: this header is on screens
   that stylesheet is not loaded by, and without the rule the menu flashes
   open on every page load before Alpine initialises. */
[x-cloak] {
  display: none !important;
}

.app-header__user-button {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.app-header__caret {
  color: var(--dim);
  font-size: var(--fs-10);
}

.app-header__menu {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: var(--space-7) 0;
  background: var(--panel2);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
}

.app-header__menu-heading {
  padding: var(--space-7) 12px;
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-table-head);
  color: var(--dim);
}

.app-header__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) 12px;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-11-5);
  color: var(--fg2);
  text-align: left;
  cursor: pointer;
}

.app-header__menu-item:hover,
.app-header__menu-item:focus-visible {
  background: var(--panel);
  color: var(--fg);
}

/* The tick column is always present, empty or not, so the labels stay on
   one vertical line whichever theme is active. */
.app-header__menu-tick {
  width: 1ch;
  color: var(--accent);
}

.app-header__menu-rule {
  margin: var(--space-7) 0;
  border: none;
  border-top: var(--border-width) solid var(--line);
}

.app-header__avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--accent2);
  border: var(--border-width) solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-10);
  color: var(--accent);
  flex: none;
}

.app-header__username {
  color: var(--fg2);
  white-space: nowrap;
}