/* Dashboard Layout Styles */

/* The bar declares its own height rather than growing to its contents, because
   the sidebar hangs off the bottom of it from a fixed position and can only
   land there if the number is known. */
:root {
  --header-height: 80px;
}

.dashboard-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  height: var(--header-height);
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-bottom: 1px solid var(--theme-border-strong);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.02) 100%),
    rgba(15, 31, 56, 0.9);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand .logo {
  font-weight: var(--font-weight-black);
  font-size: 1.25rem;
  letter-spacing: -0.2px;
  position: relative;
  color: var(--theme-text);
  text-decoration: none;
}

.nav-brand .logo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 36%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

/* The identity sits behind a rule at the end of the bar and is itself the
   trigger for the menu holding the account destinations. */
.nav-menu {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-user-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-lg);
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-fast);
}

.nav-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.user-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
}

.user-org {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.72);
}

.user-name,
.user-org {
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-elevated);
  color: #ffffff;
  transition: var(--transition-fast);
}

/* The box lifts rather than lighting up: it is a disclosure, not the call to
   action on the bar. */
.nav-user-trigger:hover .nav-user-chevron {
  background: rgb(from var(--color-primary) r g b / 0.28);
}

.nav-user-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The chevron is the only thing reporting the menu's state, so it turns with
   it rather than sitting still under an open panel. */
.nav-user-trigger[aria-expanded="true"] .nav-user-chevron svg {
  transform: rotate(180deg);
}

.nav-user-chevron svg {
  transition: var(--transition-fast);
}

/* ---- the menu ----
   A white card hanging off a navy bar. Every colour inside it is named from
   the --light-* ramp rather than the --theme-* one: these nodes sit inside
   .dark-bg, so --theme-text resolves to white here and would put white text
   on the white card. */
.user-menu {
  position: absolute;
  top: calc(100% + var(--spacing-md));
  right: 0;
  width: 288px;
  background: var(--light-bg);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.45);
  z-index: 200;
}

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

/* The one part of the card that keeps the bar's ground, so the identity reads
   as the bar continuing rather than as the first row of the list. */
/* Name and email on the left, the cog opposite them, and the organization
   across the foot: two columns over one row, so the cog sits against the pair
   rather than above the rule. */
.user-menu-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-section);
}

.user-menu-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Squared off against the two lines beside it, so it reads as their companion
   rather than as an afterthought pinned to the corner. It carries its own faint
   ground at rest: a bare icon on a panel reads as decoration, and this one is
   the way out of the menu. */
.user-menu-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-md);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  transition: var(--transition-fast);
}

.user-menu-settings:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.user-menu-settings:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.user-menu-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
}

.user-menu-email {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-org {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.user-menu-org-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-role {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.user-menu-items {
  padding: var(--spacing-xs);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 10px;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--light-text);
  text-decoration: none;
  transition: var(--transition-fast);
}

.user-menu-item svg {
  flex-shrink: 0;
  color: var(--light-accent);
}

.user-menu-item:hover {
  background: var(--light-bg-subtle);
}

/* Sign out is set apart on its own ground: it is the one item that ends the
   session rather than going somewhere. */
.user-menu-foot {
  background: var(--light-bg-subtle);
  border-top: 1px solid var(--light-border);
}

.user-menu-foot form {
  margin: 0;
}

.user-menu-signout {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 11px var(--spacing-lg);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--light-text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
}

.user-menu-signout:hover {
  color: var(--light-danger);
}

.dashboard-main {
  min-height: calc(100vh - var(--header-height));
  background: var(--theme-bg-muted);
}

.flash-messages {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-2xl) 0;
}

.flash-messages:empty {
  display: none;
}

.flash-message {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid;
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.flash-dismiss {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1.25em;
  line-height: 1;
  padding: 0 var(--spacing-xs);
  opacity: 0.7;
}

.flash-dismiss:hover {
  opacity: 1;
}

.flash-notice {
  background: rgba(74, 158, 255, 0.1);
  border-color: rgba(74, 158, 255, 0.3);
  color: var(--color-primary-light);
}

.flash-alert {
  background: rgba(255, 74, 74, 0.1);
  border-color: rgba(255, 74, 74, 0.3);
  color: #ff6a6a;
}

@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  .dashboard-nav {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  /* One row down to the narrowest width. The bar used to stack because the name
     and the sign-out button were two things to spread apart; it is one control
     now, so stacking cost a whole row and left the account on the left. */
  .nav-user {
    max-width: 50vw;
  }

  .user-name,
  .user-org {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}