/*
 * Aura Owner -- application shell (sidebar + top bar).
 * Layout rules only -- token *values* live in tokens.css and must never
 * be redefined here, only referenced via var(--aura-*).
 *
 * Sidebar collapsed/expanded state and theme are both restored before
 * first paint by a tiny inline script in layout/base.html's <head>,
 * which sets data-theme / data-sidebar on <html>. Both are presentation-
 * only client preferences stored in localStorage -- not a security
 * control, see base.html's inline script comment.
 *
 * RTL: every directional property below is a logical property
 * (inset-inline-*, margin-inline-*, border-inline-*, text-align: start)
 * so the shell mirrors automatically under dir="rtl" with no separate
 * RTL stylesheet, matching the pattern already established in
 * components.css / the old base.html responsive block.
 */

.aura-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.aura-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* ---------- Sidebar ---------- */

.aura-sidebar {
  flex: 0 0 var(--aura-sidebar-expanded);
  width: var(--aura-sidebar-expanded);
  background: var(--aura-color-surface-raised);
  border-inline-end: 1px solid var(--aura-color-border-default);
  display: flex;
  flex-direction: column;
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  overflow-y: auto;
  transition: width var(--aura-motion-base) var(--aura-ease-standard),
    flex-basis var(--aura-motion-base) var(--aura-ease-standard);
  z-index: var(--aura-z-sticky);
}

:root[data-sidebar="collapsed"] .aura-sidebar {
  flex-basis: var(--aura-sidebar-collapsed);
  width: var(--aura-sidebar-collapsed);
}

.aura-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aura-space-2);
  padding: var(--aura-space-4) var(--aura-space-3);
  border-block-end: 1px solid var(--aura-color-border-default);
  min-block-size: 56px;
}

.aura-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--aura-space-2);
  text-decoration: none;
  color: var(--aura-color-text-primary);
  font-weight: var(--aura-font-weight-semibold);
  overflow: hidden;
  min-width: 0;
}

.aura-sidebar__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--aura-radius-md);
  overflow: hidden;
}
.aura-sidebar__mark img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.aura-sidebar__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rail (icon-width) mode hides the text of every nav affordance. This
   rule also covers the department disclosure button now that
   .aura-nav-group__title is a <button> -- deliberately: a control the
   employee cannot read must not sit in the Tab order either, and
   display:none takes it out of both. Higher specificity than the
   .aura-nav-group__title base rule below, so source order is irrelevant. */
:root[data-sidebar="collapsed"] .aura-sidebar__name,
:root[data-sidebar="collapsed"] .aura-nav-group__title,
:root[data-sidebar="collapsed"] .aura-nav-link__text {
  display: none;
}

.aura-sidebar__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--aura-target-compact);
  block-size: var(--aura-target-compact);
  background: transparent;
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-text-secondary);
  cursor: pointer;
  padding: 0;
}
.aura-sidebar__toggle:hover { background: var(--aura-color-surface-muted); }
.aura-sidebar__toggle:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--aura-color-focus-ring);
  outline-offset: 2px;
}

.aura-sidebar__toggle-icon {
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  margin-inline-end: 3px;
  transition: transform var(--aura-motion-fast) var(--aura-ease-standard);
}
:root[data-sidebar="collapsed"] .aura-sidebar__toggle-icon {
  transform: rotate(225deg);
  margin-inline-end: 0;
  margin-inline-start: 3px;
}
:root[dir="rtl"] .aura-sidebar__toggle-icon { transform: rotate(225deg); }
:root[dir="rtl"][data-sidebar="collapsed"] .aura-sidebar__toggle-icon { transform: rotate(45deg); }

.aura-sidebar__nav {
  padding: var(--aura-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-3);
}

/* ---------- Department disclosures ----------
   Each group heading is a real <button> that shows/hides its own link
   list (layout/_sidebar.html). The typography below is carried over
   unchanged from the inert <div> heading this replaced -- only the box
   model and the interactive affordances are new, so collapsing the nav
   did not silently also restyle it. */

.aura-nav-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aura-space-2);
  inline-size: 100%;
  /* Comfortable pointer/touch target for what is now the primary way to
     reach anything in the product. */
  min-block-size: var(--aura-target-compact);
  padding-inline: var(--aura-space-2);
  padding-block: var(--aura-space-1);
  margin-block-end: var(--aura-space-1);
  /* Button reset -- the UA's button chrome and centred text would
     otherwise fight the nav's typographic scale. */
  background: none;
  border: none;
  border-radius: var(--aura-radius-sm);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  /* Unchanged from the previous heading treatment. */
  font-size: var(--aura-font-size-xs);
  font-weight: var(--aura-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aura-color-text-muted);
  /* Merge note (dept-nav UI): this heading used to be a plain <div> pinned
     with `position: sticky` + an opaque background, so it stayed readable
     while scrolling the flat ~25-link nav. It is now a disclosure <button>
     and that flat scroll is exactly what the disclosures removed, so the
     sticky treatment is dropped rather than carried over -- it would also
     have fought the button reset above (`background: none`) and the hover
     background below. The sibling padding/margin declarations dropped with
     it were duplicates: padding-inline/padding-block/margin-block-end are
     already set above. Every other production-only shell.css fix in this
     file (notably the nav-label wrapping AUDIT-fix) merged cleanly and is
     untouched. */
}
.aura-nav-group__title:hover {
  background: var(--aura-color-surface-muted);
  color: var(--aura-color-text-primary);
}
/* No :focus-visible rule here on purpose: the shared
   `button:focus-visible` treatment above already paints the shell's one
   canonical focus ring, and a second definition here would be a second
   thing to keep in sync. The border-radius above is what makes that
   shared outline hug this control's rounded box. */

.aura-nav-group__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron: two logical borders forming a corner, rotated so it reads as
   "v" when collapsed and "^" when expanded, driven purely off the
   button's own aria-expanded so the visual and the accessibility state
   can never disagree.

   The rotation is restated for RTL because the *box* mirrors (the
   inline-end border moves to the left) while the glyph's meaning must
   not: "this section opens downward" is not a directional affordance,
   unlike .aura-sidebar__toggle-icon above, which genuinely does point at
   the sidebar's edge and so should mirror. Without the RTL rotation the
   chevron would end up pointing sideways under dir="rtl". */
.aura-nav-group__chevron {
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: var(--aura-border-width-md) solid currentColor;
  border-block-end: var(--aura-border-width-md) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--aura-motion-fast) var(--aura-ease-standard);
}
.aura-nav-group__title[aria-expanded="true"] .aura-nav-group__chevron {
  transform: rotate(225deg);
}
:root[dir="rtl"] .aura-nav-group__chevron { transform: rotate(-45deg); }
:root[dir="rtl"] .aura-nav-group__title[aria-expanded="true"] .aura-nav-group__chevron {
  transform: rotate(135deg);
}

/* tokens.css already collapses --aura-motion-* to 0ms under reduced
   motion, so the transitions above are inert there. This states it
   outright anyway: a nav that rotates on every click is exactly the
   incidental motion the preference exists to switch off, and relying on
   a token indirection to honour an accessibility preference is a
   silent dependency. */
@media (prefers-reduced-motion: reduce) {
  .aura-nav-group__chevron { transition: none; }
}

.aura-nav-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* A collapsed department must be genuinely gone -- unreachable by Tab and
   unannounced by screen readers -- not merely clipped, so what is heard
   and what is focusable both match what is seen.
   This restatement is load-bearing: author styles beat the UA stylesheet
   regardless of specificity, so the `display: flex` directly above would
   otherwise override the UA's `[hidden] { display: none }` and leave
   every "hidden" link still visible and still Tab-reachable. */
.aura-nav-group__list[hidden] { display: none; }

.aura-nav-link {
  display: flex;
  align-items: center;
  gap: var(--aura-space-2);
  padding: 0.3rem var(--aura-space-2);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-text-secondary);
  text-decoration: none;
  font-size: var(--aura-font-size-sm);
  line-height: 1.3;
  /* AUDIT-fix: several real nav labels ("Operational Management
     Dashboard", "Operational Finance Dashboard", "Activation Reviews")
     are wider than the 260px expanded sidebar (--aura-sidebar-expanded)
     minus padding -- nowrap+ellipsis was silently clipping them mid-word
     ("Operational Manage..."). Collapsed mode is unaffected: .aura-nav-
     link__text is display:none there, so wrapping never applies to the
     icon-only rail. */
  white-space: normal;
}
.aura-nav-link__text { overflow-wrap: break-word; }
.aura-nav-link:hover { background: var(--aura-color-surface-muted); color: var(--aura-color-text-primary); }
.aura-nav-link.is-active {
  background: var(--aura-color-brand-primary-soft);
  color: var(--aura-color-brand-primary);
  font-weight: var(--aura-font-weight-medium);
  border-inline-start: 3px solid var(--aura-color-brand-primary);
  padding-inline-start: calc(var(--aura-space-2) - 3px);
}

/* Mobile: sidebar becomes an off-canvas panel toggled by the top-bar
   menu button (sidebar.js adds/removes .aura-sidebar--open). */
@media (max-width: 1024px) {
  .aura-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
    box-shadow: var(--aura-shadow-lg);
  }
  :root[dir="rtl"] .aura-sidebar { transform: translateX(100%); }
  .aura-sidebar.aura-sidebar--open,
  /* Must restate the open rule for RTL: the closed rule above is
     :root[dir="rtl"] .aura-sidebar (specificity 0,3,0) and so beat the
     plain open rule (0,2,0) -- in Arabic the panel could never slide in
     or out ("the side panel does not fold in Arabic"). */
  :root[dir="rtl"] .aura-sidebar.aura-sidebar--open { transform: translateX(0); }
  .aura-sidebar__toggle { display: none; }
  /* Stacking: the off-canvas panel is an overlay, so it sits on the overlay
     layer (above sticky table heads, which share --aura-z-sticky and, being
     later in the DOM, used to paint over it). The top bar goes one step
     higher so its menu button stays reachable to close the panel. Modals
     (300) and the toast/palette layers remain above both. */
  .aura-sidebar { z-index: var(--aura-z-overlay); }
}
@media (min-width: 1025px) {
  .aura-topbar__menu-btn { display: none; }
}

/* ---------- Top bar ---------- */

.aura-shell__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aura-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--aura-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aura-space-4);
  padding: var(--aura-space-3) var(--aura-space-5);
  background: var(--aura-color-surface-raised);
  border-block-end: 1px solid var(--aura-color-border-default);
  min-block-size: 56px;
}

/* Phone/tablet: one step above the off-canvas panel (z-overlay) so its menu
   button stays tappable to close the panel. Declared after the base rule on
   purpose -- equal specificity, later wins. */
@media (max-width: 1024px) {
  .aura-topbar { z-index: calc(var(--aura-z-overlay) + 1); }
}

.aura-topbar__start {
  display: flex;
  align-items: center;
  gap: var(--aura-space-3);
  min-width: 0;
}

.aura-topbar__menu-btn {
  flex: 0 0 auto;
  inline-size: var(--aura-target-compact);
  block-size: var(--aura-target-compact);
  background: transparent;
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-text-secondary);
  cursor: pointer;
}

.aura-topbar__heading { min-width: 0; }
.aura-topbar__brand {
  display: block;
  font-size: var(--aura-font-size-xs);
  color: var(--aura-color-text-muted);
  text-decoration: none;
}
.aura-topbar__title {
  margin: 0;
  font-size: var(--aura-font-size-xl);
  font-weight: var(--aura-font-weight-semibold);
  color: var(--aura-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aura-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--aura-space-2);
  flex-wrap: nowrap;
  min-inline-size: 0;
}

/* Phone/small-tablet: the end cluster (search, theme switch, language
   switch, staff name + role badge) is intrinsically ~565px wide. With
   flex-wrap:nowrap above it could not shrink or wrap, so on a 375px
   viewport it forced the document to 593px and the whole page could be
   panned 218px sideways -- measured on a real device-width run, on every
   page, not just the dashboard. The sidebar was NOT the cause (verified by
   removing it from the layout and re-measuring: still 593px).
   Allowing both rows to wrap keeps every control reachable rather than
   hiding any of them, which matters because the language switcher lives
   here and this product ships Arabic. */
@media (max-width: 900px) {
  .aura-topbar {
    flex-wrap: wrap;
    row-gap: var(--aura-space-2);
  }
  .aura-topbar__end {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .aura-topbar__end > * {
    flex: 0 1 auto;
    min-inline-size: 0;
  }
}

/* Visually-present, inert placeholders for two future milestones
   (global search / Ctrl+K command palette, quick-create). Real
   <button disabled> so they are announced as disabled to assistive
   tech, are not keyboard-focusable in the tab order, and need no JS
   click handler that would otherwise have to do nothing convincingly. */
.aura-topbar__stub {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-1);
  background: var(--aura-color-surface-muted);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-text-muted);
  font-size: var(--aura-font-size-sm);
  padding: 0.4rem 0.6rem;
  cursor: not-allowed;
}
.aura-topbar__stub--icon { padding-inline: 0.5rem; }
.aura-topbar__stub kbd {
  font-family: var(--aura-font-mono);
  font-size: var(--aura-font-size-xs);
  background: var(--aura-color-surface-raised);
  border: 1px solid var(--aura-color-border-default);
  border-radius: 4px;
  padding: 0 4px;
}

/* Real (not a stub) command palette trigger, Stage C -- reuses
   .aura-topbar__stub's box/kbd visual shape but overrides the disabled
   cursor/color styling above since this control is now genuinely
   interactive (real click handler + global Ctrl+K/Cmd+K in
   command-palette.js), unlike the still-inert quick-create stub next
   to it. */
.aura-command-palette-trigger {
  cursor: pointer;
  color: var(--aura-color-text-secondary);
}
.aura-command-palette-trigger:hover,
.aura-command-palette-trigger:focus-visible {
  border-color: var(--aura-color-brand-primary);
  color: var(--aura-color-text-primary);
}

/* Real (not a stub) permission-aware Attention Center indicator -- a
   derived, real-time count, never a persisted "unread" badge. Renders
   at zero too (a real "nothing needs you" state), and gets the
   .has-items accent only once there is real, current data behind it. */
.aura-topbar__attention {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-1);
  background: var(--aura-color-surface-muted);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-text-secondary);
  font-size: var(--aura-font-size-sm);
  padding: 0.4rem 0.6rem;
  text-decoration: none;
}
.aura-topbar__attention:hover, .aura-topbar__attention:focus-visible {
  border-color: var(--aura-color-brand-primary);
  color: var(--aura-color-text-primary);
}
.aura-topbar__attention-count {
  font-weight: var(--aura-font-weight-semibold);
  font-size: var(--aura-font-size-xs);
}
.aura-topbar__attention.has-items {
  background: var(--aura-color-warning-soft);
  border-color: var(--aura-color-warning);
  color: var(--aura-color-warning);
}

/* Website demo-request badge (static/js/website-leads-badge.js). Ships with
   the [hidden] attribute and appears only once a poll returns a count above
   zero. The display rule would otherwise override the UA's
   [hidden] { display: none } -- same trap as .aura-nav-group__list[hidden]. */
.aura-topbar__website-leads {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-1);
  background: var(--aura-color-warning-soft);
  border: 1px solid var(--aura-color-warning);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-warning);
  font-size: var(--aura-font-size-sm);
  padding: 0.4rem 0.6rem;
  text-decoration: none;
}
.aura-topbar__website-leads[hidden] { display: none; }
.aura-topbar__website-leads:hover, .aura-topbar__website-leads:focus-visible {
  border-color: var(--aura-color-brand-primary);
  color: var(--aura-color-text-primary);
}
.aura-topbar__website-leads-count {
  font-weight: var(--aura-font-weight-semibold);
  font-size: var(--aura-font-size-xs);
}

/* Step 1: sales waiting for this manager's confirmation (top bar + the
   Sales to confirm menu link), kept fresh by static/js/count-badge.js.
   Rendered with the real count and [hidden] at zero -- the display rules
   below would otherwise override [hidden], the same trap as above. Brand
   blue, not warning amber: a waiting sale is work, not a problem. */
.aura-topbar__sales-waiting {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-1);
  background: var(--aura-color-brand-primary-soft);
  border: 1px solid var(--aura-color-brand-primary);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-brand-primary);
  font-size: var(--aura-font-size-sm);
  padding: 0.4rem 0.6rem;
  text-decoration: none;
}
.aura-topbar__sales-waiting[hidden] { display: none; }
.aura-topbar__sales-waiting:hover, .aura-topbar__sales-waiting:focus-visible {
  border-color: var(--aura-color-brand-primary-hover);
  color: var(--aura-color-text-primary);
}
.aura-topbar__sales-waiting-count {
  font-weight: var(--aura-font-weight-semibold);
  font-size: var(--aura-font-size-xs);
}
.aura-nav-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.4rem;
  margin-inline-start: auto;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--aura-color-brand-primary);
  color: #FFFFFF;
  font-size: var(--aura-font-size-xs);
  font-weight: var(--aura-font-weight-semibold);
  line-height: 1.4;
}
.aura-nav-link__count[hidden] { display: none; }

/* Step 1: the phone-notifications card (licensing/_push_optin.html) and the
   row a notification opened. */
.aura-push-card[hidden], .aura-push-card [hidden] { display: none; }
.aura-push-card__state--on { color: var(--aura-color-success); font-weight: var(--aura-font-weight-semibold); }
tr.is-highlighted > td { background: var(--aura-color-brand-primary-soft); }

.aura-theme-switch {
  display: inline-flex;
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  overflow: hidden;
}
.aura-theme-switch__btn {
  background: var(--aura-color-surface-raised);
  color: var(--aura-color-text-secondary);
  border: none;
  border-inline-start: 1px solid var(--aura-color-border-default);
  padding: 0.35rem 0.6rem;
  font-size: var(--aura-font-size-xs);
  cursor: pointer;
}
.aura-theme-switch__btn:first-child { border-inline-start: none; }
.aura-theme-switch__btn[aria-pressed="true"] {
  background: var(--aura-color-brand-primary-soft);
  color: var(--aura-color-brand-primary);
  font-weight: var(--aura-font-weight-medium);
}

.aura-lang-switch {
  display: inline-flex;
  gap: 2px;
}
.aura-lang-switch a {
  color: var(--aura-color-text-secondary);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: var(--aura-radius-sm);
  font-size: var(--aura-font-size-xs);
}
.aura-lang-switch a:hover { background: var(--aura-color-surface-muted); }
.aura-lang-switch a[aria-current="true"] {
  background: var(--aura-color-brand-primary-soft);
  color: var(--aura-color-brand-primary);
  font-weight: var(--aura-font-weight-medium);
}

.aura-role-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: var(--aura-radius-full);
  background: var(--aura-color-surface-muted);
  color: var(--aura-color-text-secondary);
  font-size: var(--aura-font-size-xs);
  font-weight: var(--aura-font-weight-medium);
}

.aura-profile-menu { position: relative; }
.aura-profile-menu > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--aura-space-2);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--aura-radius-sm);
  border: 1px solid var(--aura-color-border-default);
}
.aura-profile-menu > summary::-webkit-details-marker { display: none; }
.aura-profile-menu > summary:hover { background: var(--aura-color-surface-muted); }
.aura-profile-menu__name {
  font-size: var(--aura-font-size-sm);
  color: var(--aura-color-text-primary);
  max-inline-size: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aura-profile-menu__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--aura-space-2));
  min-inline-size: 180px;
  background: var(--aura-color-surface-overlay);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-md);
  box-shadow: var(--aura-shadow-md);
  padding: var(--aura-space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: var(--aura-z-dropdown);
}
.aura-profile-menu__panel a {
  color: var(--aura-color-text-primary);
  text-decoration: none;
  font-size: var(--aura-font-size-sm);
  padding: 0.4rem 0.5rem;
  border-radius: var(--aura-radius-sm);
}
.aura-profile-menu__panel a:hover { background: var(--aura-color-surface-muted); }
.aura-profile-menu__logout { margin: 0; }
.aura-profile-menu__logout-btn {
  width: 100%;
  text-align: start;
  background: none;
  color: var(--aura-color-danger);
  border: none;
  padding: 0.4rem 0.5rem;
  border-radius: var(--aura-radius-sm);
  font-size: var(--aura-font-size-sm);
  cursor: pointer;
}
.aura-profile-menu__logout-btn:hover { background: var(--aura-color-danger-soft); }

/* ---------- Main content ---------- */

.aura-main {
  flex: 1 1 auto;
  max-width: var(--aura-content-max-width);
  width: 100%;
  margin-inline: auto;
  padding: var(--aura-space-5);
}

.aura-main--unauthenticated {
  max-width: var(--aura-content-narrow);
  margin-block-start: var(--aura-space-8);
}

/* Phone (<= 640px): the top bar keeps only the menu button + page title.
   sidebar.js reparents .aura-topbar__end (theme, counters, language, role
   chip, profile menu) into .aura-sidebar__tools inside the menu, so the one
   element and its handlers/ids are reused, not duplicated. */
.aura-sidebar__tools { display: none; }
@media (max-width: 640px) {
  .aura-topbar__brand { display: none; }
  .aura-sidebar__tools {
    display: block;
    padding: var(--aura-space-3);
    border-block-start: 1px solid var(--aura-color-border-default);
    margin-block-start: auto;
  }
  .aura-sidebar__tools .aura-topbar__end {
    flex-direction: column;
    align-items: stretch;
    gap: var(--aura-space-3);
  }
  .aura-sidebar__tools .aura-topbar__end > * { justify-content: center; }
  .aura-sidebar__tools .aura-topbar__stub-label { display: inline; }
  .aura-sidebar__tools .aura-topbar__stub kbd { display: none; }
  .aura-sidebar__tools .aura-profile-menu__name { max-inline-size: none; }
  /* Inside the scrolling menu a floating panel would be clipped: flow it. */
  .aura-sidebar__tools .aura-profile-menu__panel {
    position: static;
    margin-block-start: var(--aura-space-2);
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .aura-main { padding-inline: var(--aura-space-3); }
  .aura-topbar { padding-inline: var(--aura-space-3); }
  .aura-topbar__stub-label { display: none; }
  .aura-topbar__stub kbd { display: none; }
  .aura-profile-menu__name { max-inline-size: 90px; }
}

/* ---------- "Add to home screen" hint (static/js/pwa.js) ----------
   Ships [hidden]; pwa.js reveals it on a phone that can install the app.
   The display rule would otherwise beat the UA's [hidden] { display: none }
   -- same trap as .aura-topbar__website-leads[hidden] above. The
   display-mode block is the second, CSS-only guarantee that the hint never
   appears inside the installed app, even if the script misjudges. */
.aura-install-hint {
  position: fixed;
  inset-inline: var(--aura-space-3);
  inset-block-end: calc(var(--aura-space-3) + env(safe-area-inset-bottom, 0px));
  z-index: var(--aura-z-toast);
  display: flex;
  align-items: center;
  gap: var(--aura-space-3);
  max-inline-size: 32rem;
  margin-inline: auto;
  padding: var(--aura-space-3) var(--aura-space-4);
  background: var(--aura-color-surface-overlay);
  color: var(--aura-color-text-primary);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-lg);
  box-shadow: var(--aura-shadow-lg);
  font-size: var(--aura-font-size-base);
}
.aura-install-hint[hidden],
.aura-install-hint [hidden] { display: none; }
.aura-install-hint__text { flex: 1 1 auto; margin: 0; }
.aura-install-hint__install { flex: 0 0 auto; white-space: nowrap; }
.aura-install-hint__dismiss {
  flex: 0 0 auto;
  inline-size: var(--aura-target-comfortable);
  block-size: var(--aura-target-comfortable);
  border: 0;
  border-radius: var(--aura-radius-full);
  background: transparent;
  color: var(--aura-color-text-secondary);
  font-size: var(--aura-font-size-xl);
  line-height: 1;
  cursor: pointer;
}
.aura-install-hint__dismiss:hover { background: var(--aura-color-surface-muted); }
.aura-install-hint__dismiss:focus-visible {
  outline: 2px solid var(--aura-color-focus-ring);
  outline-offset: 2px;
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .aura-install-hint { display: none !important; }
}