/* ============================================
   Birkly Admin — Topbar, breadcrumb title, page chrome (P56)
   ============================================

   LOCKED PATTERN (P56-D2): breadcrumb-as-title.
   Pages emit .page-header > .page-header-left > .breadcrumbs; the last
   segment is <span class="current"> and IS the page title. No page <h1>.
   moveBreadcrumbsToTopbar() hoists it into #admin-topbar-breadcrumbs and
   collapses the emptied source row via .page-header--hoisted-empty.
   breadcrumb-truncate.js adds .breadcrumb-segment / .breadcrumb-ellipsis.

   Changed under the brief: the title is typed once, in the topbar slot
   (it previously inherited 1.5rem from .breadcrumbs AND 0.9375rem from
   .admin-topbar-breadcrumbs and resolved by cascade accident). The topbar
   control group is rebuilt without its ~40 !important declarations, and the
   header alias soup (.content-header, .header-actions, .page-actions,
   .header-content, .collection-actions-bar, .plugin-actions-split) collapses
   into .main-actions-bar + .section-header.
   ============================================ */

/* Same height as the sidebar brand area, so the rule under the bar meets the
   top edge of the first nav panel in every density */
.admin-topbar {
  position: relative;
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: calc(var(--chrome-row) + var(--s-4));
  margin: 0 0 var(--s-5);
  padding: 0;
  background: none;
}

/* Dotted rule under the flat bar */
.admin-topbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--line-strong) 1px, transparent 1px);
  background-size: 3px 1px;
}

.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.admin-topbar > .sidebar-toggle { display: none; }

.admin-topbar-spacer { display: none; }

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* ============================================
   Breadcrumb — the page title
   ============================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: var(--text-3);
  font-size: var(--size-page-title);
  line-height: var(--lh-page-title);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-title);
}

.breadcrumbs a,
.breadcrumb-item {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.breadcrumbs a:hover,
.breadcrumb-item:hover { color: var(--text); }

.breadcrumbs .separator {
  color: var(--text-3);
  flex-shrink: 0;
}

/* The title segment */
.breadcrumbs .current {
  color: var(--text);
  font-weight: var(--weight-semibold);
  min-width: 0;
}

/* Topbar slot — the single place the title size is declared after hoisting */
.admin-topbar-breadcrumbs {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.admin-topbar-breadcrumbs:not(.breadcrumbs) { display: none; }

.admin-topbar-breadcrumbs.breadcrumbs { display: flex; }

.admin-topbar-breadcrumbs .breadcrumb-segment {
  flex-shrink: 0;
  min-width: 0;
}

.admin-topbar-breadcrumbs.breadcrumbs--segment-ellipsis .breadcrumb-segment--current {
  flex-shrink: 1;
  min-width: 3ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-topbar-breadcrumbs .breadcrumb-ellipsis {
  flex-shrink: 0;
  color: var(--text-3);
  cursor: default;
  user-select: none;
}

.admin-topbar-breadcrumbs.breadcrumbs--collapsed .breadcrumb-segment:not(.breadcrumb-segment--current) {
  flex-shrink: 0;
}

/* ============================================
   Topbar controls — segmented square group
   theme · search · notifications · account
   ============================================ */
.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control);
  height: var(--control);
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.topbar-icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.topbar-icon-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.topbar-control-group {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
}

.topbar-control-group > .theme-switcher-wrap,
.topbar-control-group > .theme-switcher-dropdown,
.topbar-control-group > .notifications-wrapper,
.topbar-control-group > .topbar-user-menu {
  position: relative;
  display: inline-flex;
}

.topbar-control-group .user-menu-trigger,
.topbar-control-group .theme-switcher-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control);
  height: var(--control);
  min-width: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--text-2);
  box-shadow: none;
  cursor: pointer;
}

.topbar-control-group .theme-switcher-trigger:hover { background: var(--surface-2); color: var(--text); }

.topbar-control-group .birkly-icon { display: block; margin: 0; }

/* Compact trigger only — keep name/role/email visible in the open panel. */
.topbar-control-group .user-menu-trigger .user-menu-info,
.topbar-control-group .user-menu-trigger .user-menu-chevron,
.topbar-user-menu .user-menu-trigger .user-menu-info,
.topbar-user-menu .user-menu-trigger .user-menu-chevron {
  display: none;
}

/* Avatar: a 28px ink square with 6px corners */
.topbar-control-group .user-menu-trigger-face,
.topbar-user-menu .user-menu-trigger .user-menu-trigger-face {
  position: static;
  box-sizing: border-box;
  width: var(--nav-row);
  height: var(--nav-row);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  object-fit: cover;
}

.topbar-control-group .user-menu-trigger-face.user-avatar-initials,
.topbar-user-menu .user-menu-trigger .user-menu-trigger-face.user-avatar-initials,
.topbar-user-menu .user-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-control-group .dropdown-menu {
  inset-block-start: calc(100% + var(--s-2));
  inset-block-end: auto;
}

/* Topbar user menu outside the group */
.topbar-user-menu.dropdown { position: relative; }

.topbar-user-menu .dropdown-trigger.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control);
  height: var(--control);
  padding: 0;
  gap: 0;
  border: none;
  border-radius: var(--r);
  background: transparent;
  overflow: hidden;
  line-height: 1;
}

.user-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: var(--bg);
  font-size: var(--size-caption);
  font-weight: var(--weight-semibold);
}

.topbar-user-menu .dropdown-menu.user-menu-dropdown {
  inset-block-start: calc(100% + var(--s-2));
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-width: 17rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(32rem, calc(100vh - 5rem));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ============================================
   User menu panel
   ============================================ */
.user-menu-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-block-end: 1px solid var(--line);
  min-width: 0;
}

/* Fixed circular slot — keeps initials/photo centered and unclipped. */
.topbar-user-menu .user-menu-avatar,
.user-menu-header .user-menu-avatar {
  position: relative;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--text);
}

.topbar-user-menu .user-menu-panel-face,
.user-menu-header .user-menu-panel-face {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.topbar-user-menu .user-menu-panel-face.user-avatar-initials,
.user-menu-header .user-menu-panel-face.user-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: var(--bg);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.user-menu-header .user-menu-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

.user-menu-info { flex: 1 1 auto; min-width: 0; }

.user-menu-name {
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-email {
  font-size: var(--size-small);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-role {
  font-size: var(--size-caption);
  color: var(--text-3);
  text-transform: capitalize;
}

.user-menu-items { padding: var(--s-1); }

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--control);
  padding: var(--s-2) var(--s-3);
  border: none;
  border-radius: var(--r);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--size-body);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}

.user-menu-item:hover { background: var(--surface-2); }

.user-menu-item svg {
  flex-shrink: 0;
  width: var(--icon);
  height: var(--icon);
  color: var(--text-3);
}

.user-menu-divider {
  height: 1px;
  margin: var(--s-1) 0;
  background: var(--line);
}

.user-menu-language { padding: var(--s-2) var(--s-3); }

.user-menu-logout { color: var(--danger); }
.user-menu-logout svg { color: var(--danger); }
.user-menu-logout:hover { background: var(--danger-soft); }

/* ============================================
   Page chrome (brief §8.1)
   ============================================ */
.page,
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: var(--page-max);
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}

.page--narrow { max-width: var(--page-max-narrow); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--chrome-row);
  margin-block-end: var(--s-4);
  min-width: 0;
}

/* Collapsed by the hoist once the breadcrumb has moved to the topbar */
.page-header--hoisted-empty {
  display: none;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.page-header-left {
  flex: 1 1 auto;
  min-width: 0;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

/* ============================================
   Page toolbar — left: primary actions, right: search/filters/view
   One canonical class; the former aliases all map onto it.
   ============================================ */
.main-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  margin-block-end: var(--s-4);
  min-width: 0;
  flex-wrap: wrap;
}

.main-actions-left,
.main-actions-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-width: 0;
}

.main-actions-right { margin-inline-start: auto; }

/* No main action in the bar: the remaining controls start on the left. */
.main-actions-bar:not(:has(:is(.btn-primary, .button.is-main, a.btn-primary))) .main-actions-right {
  margin-inline-start: 0;
}

/* Sticky variant — one per page.
   Shadow only while stuck (JS toggles .is-stuck via a sentinel). */
.main-actions-bar-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.main-actions-bar--sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  padding-block: var(--s-3);
  background: var(--bg);
  box-shadow: none;
  transition: box-shadow var(--dur-2) var(--ease);
}

.main-actions-bar--sticky.is-stuck {
  box-shadow: none;
}

/* ============================================
   Section header — title row inside a page or card
   ============================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  min-width: 0;
}

.section-header h2,
.section-header h3 {
  margin: 0;
  font-size: var(--size-title-l);
  font-weight: var(--weight-semibold);
}

.section-title {
  margin: 0;
  font-size: var(--size-title-l);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title);
  color: var(--text);
}

.section-description {
  margin: 0;
  width: 100%;
  max-width: var(--measure-md);
  font-size: var(--size-small);
  color: var(--text-2);
  line-height: 1.5;
}

/* ============================================
   Back link
   ============================================ */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control);
  padding-inline: var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--size-small);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}

.back-button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.back-button::before {
  content: "←";
  font-weight: var(--weight-medium);
}

/* ============================================
   Responsive shell
   ============================================ */
@media (max-width: 1023px) {
  .admin-topbar {
    height: var(--chrome-row);
    padding-block: 0;
    flex-wrap: nowrap;
    gap: var(--s-2);
    align-items: center;
    max-width: 100%;
    min-width: 0;
  }

  .admin-topbar > .sidebar-toggle {
    order: 0;
    position: relative;
    z-index: var(--z-raised);
    display: inline-flex;
    flex-shrink: 0;
    width: var(--control);
    height: var(--control);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .admin-topbar-actions {
    order: 2;
    margin-inline-start: auto;
    gap: var(--s-2);
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .admin-topbar-left {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
}

/* Phone: one row — menu, breadcrumb (truncates from the left), notifications.
   Search, theme and account live in the drawer. */
@media (max-width: 767px) {
  .developer-mode-badge { display: none; }

  .admin-topbar {
    flex-wrap: nowrap;
    height: var(--chrome-row);
    min-height: 0;
    padding-block: 0;
    margin-block-end: var(--s-4);
  }

  .admin-topbar :is(.admin-visit-project-btn, .theme-switcher-wrap, #topbar-search-btn, .topbar-user-menu) { display: none; }
  .admin-topbar .admin-topbar-actions { width: auto; flex: 0 0 auto; gap: 0; }


  .page-header {
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .main-actions-bar { align-items: stretch; }
  .main-actions-right { margin-inline-start: 0; }
}