/* Sidebar account menu. Tokens come from assets/tokens.css. */

.sidebar-account {
  isolation: isolate;
  position: relative;
}

.sidebar-profile-shell {
  position: relative;
  width: 44px;
  height: 44px;
}

.sidebar-profile-icon,
.sidebar-profile-shell .auth-user-button {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
}

.sidebar-profile-icon {
  display: grid;
  place-items: center;
  background: hsl(var(--sidebar-raised));
  color: hsl(var(--accent-strong));
  box-shadow: inset 0 0 0 1px hsl(var(--sidebar-line));
}

.sidebar-profile-shell .auth-user-button {
  position: absolute;
  inset: 0;
  min-width: 44px;
  min-height: 44px;
}

.sidebar-account-trigger {
  display: grid;
  align-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
}

.sidebar-account-trigger strong,
.sidebar-account-trigger span {
  min-width: 0;
}

.sidebar-account-trigger:focus-visible,
.sidebar-account-menu button:focus-visible {
  outline: 2px solid hsl(var(--focus));
  outline-offset: 2px;
}

.sidebar-account-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: var(--z-drawer);
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: hsl(var(--sidebar-raised));
  box-shadow:
    0 20px 50px hsl(0 0% 0% / 0.3),
    inset 0 0 0 1px hsl(0 0% 100% / 0.12);
}

.sidebar-account-menu[hidden] {
  display: none;
}

.account-menu-header,
.sidebar-account-menu button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
}

.account-menu-header {
  padding: 0 8px 8px;
  border-bottom: 1px solid hsl(0 0% 100% / 0.12);
  color: hsl(var(--sidebar-ink-muted));
}

.account-menu-header strong,
.sidebar-account-menu span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-menu button {
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: hsl(var(--sidebar-ink));
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  text-align: left;
  touch-action: manipulation;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.account-menu-icon {
  width: 20px;
  height: 20px;
  color: hsl(var(--sidebar-ink-muted));
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.account-menu-separator {
  height: 1px;
  margin: 4px 0;
  background: hsl(0 0% 100% / 0.12);
}

.account-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  place-items: center;
  padding: 18px;
  background: hsl(var(--gs-pine-950) / 0.52);
}

.account-dialog-backdrop[hidden] {
  display: none;
}

.account-dialog {
  width: min(520px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  overflow: auto;
  border-radius: var(--radius-lg);
  background: hsl(var(--surface-raised));
  color: hsl(var(--ink));
  box-shadow: 0 28px 80px hsl(0 0% 0% / 0.34), 0 0 0 1px hsl(var(--line));
}

.account-dialog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 20px 20px 14px;
  border-bottom: 1px solid hsl(var(--line));
}

.account-dialog-header p,
.account-dialog-status {
  margin: 0;
  color: hsl(var(--ink-muted));
  font-size: 0.84rem;
}

.account-dialog-header h2 {
  margin: 2px 0 0;
  font-family: Montserrat, Lato, sans-serif;
  font-size: 1.42rem;
  line-height: 1.15;
}

.account-dialog-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: hsl(var(--surface-sunken));
  color: hsl(var(--ink-muted));
  cursor: pointer;
}

.account-dialog-close svg,
.account-profile-avatar svg {
  width: 20px;
  height: 20px;
}

.account-dialog-body,
.account-form {
  display: grid;
  gap: 14px;
}

.account-dialog-body {
  padding: 18px 20px 4px;
}

.account-form label {
  display: grid;
  gap: 7px;
  color: hsl(var(--ink-muted));
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-form input,
.account-form select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid hsl(var(--line-strong));
  border-radius: var(--radius-md);
  background: hsl(var(--surface-raised));
  color: hsl(var(--ink));
  font: inherit;
  font-size: 16px;
  text-transform: none;
}

.account-form input:focus-visible,
.account-form select:focus-visible,
.account-dialog-close:focus-visible {
  outline: 2px solid hsl(var(--focus));
  outline-offset: 2px;
}

.account-profile-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 4px;
}

.account-profile-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand));
}

.account-profile-card strong,
.account-profile-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-card span {
  color: hsl(var(--ink-muted));
}

.account-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-dialog-actions .dashboard-button,
.account-dialog-actions .dashboard-link {
  min-width: 132px;
  border: 0;
}

.account-dialog-status {
  min-height: 22px;
  padding: 8px 20px 18px;
}

body[data-ui-density="compact"] .sidebar-link,
body[data-ui-density="compact"] .sidebar-section-toggle {
  min-height: 38px;
}

body[data-ui-density="compact"] .sidebar-section-panel {
  gap: 2px;
  padding-bottom: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-account-trigger:hover,
  .sidebar-account-menu button:hover,
  .account-dialog-close:hover {
    background: hsl(0 0% 100% / 0.08);
  }
}

@media (max-width: 700px) {
  .account-dialog-backdrop {
    align-items: end;
    padding: 10px;
  }

  .account-dialog {
    max-height: calc(100vh - 20px);
  }
}