/* Shared MusicGen header baseline for dashboard, logs, calendar, project, and engine pages. */
:root {
  --dv-header-ink: var(--ink, #050505);
  --dv-header-white: var(--white, #ffffff);
  --dv-header-purple: var(--lavender-deep, #008a78);
  --dv-header-soft: rgba(255, 255, 255, 0.88);
  --dv-header-line: rgba(5, 5, 5, 0.16);
  --dv-header-shadow: 0 14px 34px rgba(9, 6, 20, 0.12);
}

.dashboard-nav,
.project-nav,
.quickgen-log-nav,
.balance-history-nav,
.calendar-nav,
.shell > .nav,
.lyrical-nav,
.topbar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(320px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 22px;
  background: var(--dv-header-soft);
  box-shadow: var(--dv-header-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dashboard-brand-actions,
.brand-stack,
.quickgen-log-account,
.balance-history-nav-actions,
.calendar-brand-actions,
.topbar-actions,
.nav-actions,
.lyrical-actions {
  min-width: 0;
}

.dashboard-brand-actions,
.brand-row,
.calendar-brand-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.dashboard-nav-actions,
.project-nav-links,
.quickgen-log-account,
.balance-history-nav-actions,
.nav-actions,
.lyrical-actions,
.topbar-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
}

.dashboard-nav .brand-mark,
.project-nav .brand-mark,
.calendar-nav .brand-mark,
.quickgen-log-nav > a:first-child,
.balance-history-nav > a:first-child,
.shell > .nav > a:first-child,
.lyrical-brand,
.topbar .brand-mark {
  min-width: 0;
  margin: 0;
}

.quickgen-log-nav > a:first-child,
.balance-history-nav > a:first-child,
.shell > .nav > a:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--dv-header-ink);
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
}

.dv-header-logo-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: min(340px, 100%);
  min-height: 64px;
  text-decoration: none;
}

.dv-header-logo {
  display: block;
  width: min(390px, 100%);
  height: 64px;
  object-fit: contain;
  object-position: left center;
}

.dashboard-link-button,
.dashboard-logs-menu > summary,
.project-tab,
.project-nav-links .outline-button,
.quickgen-dashboard-link,
.quickgen-logout-button,
.quickgen-account-chip,
.quickgen-wallet-chip,
.balance-history-nav a,
.calendar-nav .nav-link,
.shell > .nav .nav-link,
.shell > .nav .button,
.lyrical-actions .outline-button,
.topbar .dashboard-return,
.topbar .topbar-status {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--dv-header-ink);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--dv-header-ink);
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
}

.dashboard-link-button:hover,
.project-tab:hover,
.project-nav-links .outline-button:hover,
.quickgen-dashboard-link:hover,
.balance-history-nav a:hover,
.calendar-nav .nav-link:hover,
.shell > .nav .nav-link:hover,
.lyrical-actions .outline-button:hover,
.topbar .dashboard-return:hover {
  border-color: var(--dv-header-purple);
  color: var(--dv-header-purple);
}

.project-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.creator-wallet-chip,
.quickgen-wallet-chip {
  justify-content: center;
}

.creator-wallet-history-link,
.quickgen-wallet-history-link {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .dashboard-nav,
  .project-nav,
  .quickgen-log-nav,
  .balance-history-nav,
  .calendar-nav,
  .shell > .nav,
  .lyrical-nav,
  .topbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dashboard-nav,
  .project-nav,
  .quickgen-log-nav,
  .balance-history-nav,
  .calendar-nav,
  .shell > .nav,
  .lyrical-nav,
  .topbar {
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
  }

  .dashboard-brand-actions,
  .brand-row,
  .calendar-brand-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
  }

  .dashboard-brand-actions .brand-mark,
  .brand-row .brand-mark,
  .calendar-brand-actions .brand-mark {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .dv-header-logo-link {
    justify-self: center;
    margin-inline: auto;
  }

  .dv-header-logo {
    width: min(260px, 76vw);
    height: 54px;
    object-position: center;
  }

  .dashboard-nav-actions,
  .project-nav-links,
  .quickgen-log-account,
  .balance-history-nav-actions,
  .nav-actions,
  .lyrical-actions,
  .topbar-actions,
  .project-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .dashboard-nav-actions,
  .project-nav-links,
  .quickgen-log-account,
  .balance-history-nav-actions,
  .nav-actions,
  .lyrical-actions,
  .topbar-actions,
  .project-tabs {
    grid-template-columns: 1fr;
  }
}

/* Compact professional header pass: keep nav actions text-sized instead of equal oversized tiles. */
.dashboard-nav,
.project-nav,
.quickgen-log-nav,
.balance-history-nav,
.calendar-nav,
.shell > .nav,
.lyrical-nav,
.topbar {
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
}

.dashboard-brand-actions,
.brand-row,
.calendar-brand-actions {
  gap: 7px;
  flex-wrap: nowrap;
}

.dashboard-nav .brand-mark,
.project-nav .brand-mark,
.calendar-nav .brand-mark,
.topbar .brand-mark {
  width: clamp(190px, 18vw, 310px);
  height: clamp(42px, 4.1vw, 62px);
  flex: 0 1 auto;
}

.dashboard-nav-actions,
.project-nav-links,
.quickgen-log-account,
.balance-history-nav-actions,
.nav-actions,
.lyrical-actions,
.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.dashboard-link-button,
.dashboard-logs-menu > summary,
.project-tab,
.project-nav-links .outline-button,
.quickgen-dashboard-link,
.quickgen-logout-button,
.quickgen-account-chip,
.quickgen-wallet-chip,
.balance-history-nav a,
.calendar-nav .nav-link,
.shell > .nav .nav-link,
.shell > .nav .button,
.lyrical-actions .outline-button,
.topbar .dashboard-return,
.topbar .topbar-status {
  width: auto;
  min-height: 31px;
  border-width: 1.5px;
  padding: 0 10px;
  font-size: clamp(0.58rem, 0.62vw, 0.68rem);
  letter-spacing: 0;
  white-space: nowrap;
}

.creator-wallet-chip,
.quickgen-wallet-chip {
  min-height: 31px;
  border-color: #050505 !important;
  color: #fff !important;
  background: #050505 !important;
  box-shadow: 0 8px 20px rgba(5, 5, 5, 0.16);
}

.creator-wallet-chip svg,
.quickgen-wallet-chip svg {
  color: #fff;
  fill: currentColor;
}

.creator-wallet-history-link,
.quickgen-wallet-history-link {
  width: 31px;
  min-width: 31px;
  height: 31px;
  border-color: #050505 !important;
  color: #fff !important;
  background: #050505 !important;
}

.creator-wallet-history-link svg,
.quickgen-wallet-history-link svg {
  fill: #fff !important;
}

.dashboard-logs-menu {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
}

.dashboard-nav,
.project-nav,
.calendar-nav,
.quickgen-log-nav,
.balance-history-nav,
.shell > .nav,
.topbar {
  position: relative;
  z-index: 12000;
  overflow: visible;
  isolation: isolate;
}

.dashboard-nav-actions,
.project-nav-links,
.nav-actions,
.quickgen-log-account,
.balance-history-nav-actions,
.lyrical-actions,
.topbar-actions {
  position: relative;
  z-index: 12010;
  overflow: visible;
}

.dashboard-logs-menu > summary {
  list-style: none;
  cursor: pointer;
}

.dashboard-logs-menu > summary::-webkit-details-marker {
  display: none;
}

.dashboard-logs-menu > summary::after {
  content: "▾";
  margin-left: 8px;
  font-size: 0.7rem;
}

.dashboard-logs-menu[open] {
  z-index: 12020;
}

.dashboard-logs-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 12030;
  min-width: 178px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 2px solid var(--dv-header-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--dv-header-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dashboard-log-option {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dv-header-line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--dv-header-ink);
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.dashboard-log-option:hover {
  border-color: var(--dv-header-purple);
  color: var(--dv-header-purple);
}

@media (max-width: 980px) {
  .dashboard-nav,
  .project-nav,
  .quickgen-log-nav,
  .balance-history-nav,
  .calendar-nav,
  .shell > .nav,
  .lyrical-nav,
  .topbar {
    grid-template-columns: 1fr;
  }

  .dashboard-nav-actions,
  .project-nav-links,
  .quickgen-log-account,
  .balance-history-nav-actions,
  .nav-actions,
  .lyrical-actions,
  .topbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .dashboard-brand-actions,
  .brand-row,
  .calendar-brand-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
    flex-wrap: wrap;
  }

  .dashboard-nav-actions,
  .project-nav-links,
  .quickgen-log-account,
  .balance-history-nav-actions,
  .nav-actions,
  .lyrical-actions,
  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-link-button,
  .dashboard-logs-menu > summary,
  .project-tab,
  .project-nav-links .outline-button,
  .quickgen-dashboard-link,
  .quickgen-logout-button,
  .quickgen-account-chip,
  .quickgen-wallet-chip,
  .balance-history-nav a,
  .calendar-nav .nav-link,
  .shell > .nav .nav-link,
  .shell > .nav .button,
  .lyrical-actions .outline-button,
  .topbar .dashboard-return,
  .topbar .topbar-status {
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .dashboard-nav,
  .project-nav,
  .quickgen-log-nav,
  .balance-history-nav,
  .calendar-nav,
  .shell > .nav,
  .lyrical-nav,
  .topbar {
    max-width: 100%;
    overflow: visible;
  }

  .dashboard-link-button,
  .dashboard-logs-menu > summary,
  .project-tab,
  .project-nav-links .outline-button,
  .quickgen-dashboard-link,
  .quickgen-logout-button,
  .quickgen-account-chip,
  .quickgen-wallet-chip,
  .balance-history-nav a,
  .calendar-nav .nav-link,
  .shell > .nav .nav-link,
  .shell > .nav .button,
  .lyrical-actions .outline-button,
  .topbar .dashboard-return,
  .topbar .topbar-status {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 0.7rem;
    line-height: 1.12;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .dashboard-brand-actions,
  .brand-row,
  .calendar-brand-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .dashboard-brand-actions .brand-mark,
  .brand-row .brand-mark,
  .calendar-brand-actions .brand-mark {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(260px, 76vw);
    height: 54px;
    background-position: center;
  }

  .creator-wallet-chip,
  .quickgen-wallet-chip {
    justify-self: end;
  }

  .creator-wallet-history-link,
  .quickgen-wallet-history-link {
    justify-self: end;
  }
}

/* Final mobile dashboard header override: keep the logo centered, logout compact,
   and nav buttons readable without circular wrapping. */
@media (max-width: 640px) {
  .dashboard-brand-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .dashboard-brand-actions .brand-mark {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(224px, 70vw);
    height: 42px;
    margin-inline: auto;
    background-position: center;
  }

  .global-logout-button,
  #logoutButton {
    justify-self: start;
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    min-height: 30px;
    padding-inline: 8px;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  .dashboard-nav-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-link-button,
  .dashboard-logs-menu > summary {
    min-height: 36px;
    border-radius: 16px;
    padding-inline: 8px;
    font-size: clamp(0.52rem, 2.4vw, 0.64rem);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 420px) {
  .global-logout-button,
  #logoutButton {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    font-size: 0.56rem;
  }

  .dashboard-link-button,
  .dashboard-logs-menu > summary {
    font-size: clamp(0.48rem, 2.75vw, 0.58rem);
  }
}