/* =========================================================
   TOE BEANS DESIGN SYSTEM
   STANDARD NAVIGATION

   Approved Navbar 1 design.

   This file is the reusable navbar source of truth.
   Experimental controls remain in ds-navbar-lab.css.
   ========================================================= */


/* =========================================================
   NAVBAR SURFACE

   Approved gradient:
   Accent -> Secondary -> Primary -> Primary Dark

   The Accent transitions into the greens early.
   ========================================================= */

.ds-navbar {
  width: 100%;
  margin: 0;
  padding: 0;

  background:
    linear-gradient(
      90deg,
      var(--ds-accent) 0%,
      var(--ds-secondary) 18%,
      var(--ds-primary) 48%,
      var(--ds-primary-dark) 100%
    );
}


/* =========================================================
   INNER WIDTH
   ========================================================= */

.ds-navbar-inner {
  width:
    min(
      var(--ds-content-width),
      calc(100% - 40px)
    );

  min-height:
    76px;

  margin:
    0 auto;

  padding:
    var(--ds-space-3)
    0;

  display:
    flex;

  align-items:
    center;
}


/* =========================================================
   NAVBAR SHELL
   ========================================================= */

.ds-navbar-shell {
  width:
    100%;

  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #ffffff;
}


/* =========================================================
   BRAND / TITLE
   ========================================================= */

.ds-navbar-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    14px;

  min-width:
    max-content;

  color:
    #ffffff;

  text-decoration:
    none;

  font-size:
    26px;

  font-weight:
    850;

  line-height:
    1;
}


.ds-navbar-brand:hover {
  color:
    #ffffff;

  text-decoration:
    none;
}


.ds-navbar-logo {
  display:
    block;

  width:
    56px;

  height:
    56px;

  object-fit:
    contain;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.ds-navbar-right {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    12px;

  min-width:
    0;
}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.ds-navbar-links {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    nowrap;

  gap:
    6px;
}


.ds-navbar-link {
  position:
    relative;

  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    8px 13px;

  border:
    0;

  background:
    transparent;

  color:
    #ffffff;

  text-decoration:
    none;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    color 120ms ease,
    background 120ms ease;
}


.ds-navbar-link:hover {
  background:
    var(--ds-primary);

  color:
    #ffffff;

  text-decoration:
    none;
}


/* =========================================================
   ACTIVE TAB

   Approved standard:
   - no box
   - no active pill
   - Accent text
   - matching Accent underline
   ========================================================= */













/* =========================================================
   NAVBAR TOOLS
   ========================================================= */

.ds-navbar-tools {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex:
    0 0 auto;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.ds-navbar-notifications {
  position:
    relative;
}


.ds-navbar-icon-button {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    50%;

  background:
    transparent;

  color:
    #ffffff;

  cursor:
    pointer;

  transition:
    background 120ms ease;
}


.ds-navbar-icon-button:hover,
.ds-navbar-icon-button[aria-expanded="true"] {
  background:
    var(--ds-primary);
}


.ds-navbar-icon-button .ds-icon {
  width:
    21px;

  height:
    21px;
}


/* =========================================================
   NOTIFICATION DROPDOWN
   ========================================================= */

.ds-navbar-notification-dropdown {
  position:
    absolute;

  top:
    calc(100% + 10px);

  right:
    0;

  z-index:
    40;

  width:
    260px;

  padding:
    16px;

  border:
    1px solid
    var(--ds-border);

  border-radius:
    var(--ds-radius-lg);

  background:
    var(--ds-surface);

  color:
    var(--ds-text);

  box-shadow:
    var(--ds-shadow-md);
}


.ds-navbar-notification-dropdown[hidden] {
  display:
    none;
}


.ds-navbar-notification-dropdown strong {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--ds-heading);
}


.ds-navbar-notification-dropdown p {
  margin:
    0;

  color:
    var(--ds-muted);

  font-size:
    13px;
}


/* =========================================================
   ACCOUNT MENU
   ========================================================= */

.ds-navbar-account {
  position:
    relative;
}


.ds-navbar-account
.ds-account-button {
  min-height:
    42px;

  cursor:
    pointer;
}


.ds-navbar-account
.ds-account-dropdown {
  position:
    absolute;

  top:
    calc(100% + 10px);

  right:
    0;

  z-index:
    50;

  margin-top:
    0;
}


.ds-navbar-account
.ds-account-dropdown[hidden] {
  display:
    none;
}


/* =========================================================
   APPROVED LIGHT-MODE ACCOUNT COLORS

   Outer account area -> Secondary
   Avatar circle      -> Primary Dark
   ========================================================= */

html[data-mode="light"]
.ds-navbar-account
.ds-account-button {
  background:
    var(--ds-secondary);
}


html[data-mode="light"]
.ds-navbar-account
.ds-account-button[aria-expanded="true"] {
  background:
    var(--ds-secondary);
}


html[data-mode="light"]
.ds-navbar-account
.ds-avatar {
  background:
    var(--ds-primary-dark);

  color:
    #ffffff;

  border-color:
    var(--ds-primary-dark);
}


/* =========================================================
   CHEVRON
   ========================================================= */

.ds-navbar-chevron {
  width:
    16px;

  height:
    16px;

  transition:
    transform 120ms ease;
}


.ds-navbar-account
.ds-account-button[aria-expanded="true"]
.ds-navbar-chevron {
  transform:
    rotate(180deg);
}


/* =========================================================
   ACCOUNT MENU ICONS
   ========================================================= */

.ds-navbar-account-icon {
  width:
    18px;

  height:
    18px;

  flex:
    0 0 auto;
}


.ds-navbar-logout {
  color:
    var(--ds-danger);
}


/* =========================================================
   THEME ICON STATE

   Light page:
   Moon -> Dark Mode

   Dark page:
   Sun -> Light Mode
   ========================================================= */

html[data-mode="light"]
.ds-navbar-theme-moon {
  display:
    block;
}


html[data-mode="light"]
.ds-navbar-theme-sun {
  display:
    none;
}


html[data-mode="dark"]
.ds-navbar-theme-moon {
  display:
    none;
}


html[data-mode="dark"]
.ds-navbar-theme-sun {
  display:
    block;
}


html[data-mode="dark"]
.ds-navbar-theme-sun[hidden] {
  display:
    block;
}


html[data-mode="light"]
.ds-navbar-theme-moon[hidden] {
  display:
    block;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */




/* =========================================================
   ACTIVE NAVIGATION TAB

   Approved design-system behavior:
   - no active pill
   - no filled active box
   - active text uses accent
   - 2px accent underline
   - active state remains stable on hover
   ========================================================= */

.ds-navbar-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.ds-navbar-link.is-active {
  background: transparent;
  color: var(--ds-accent);
}

.ds-navbar-link.is-active::after {
  background: var(--ds-accent);
}

.ds-navbar-link.is-active:hover {
  background: transparent;
  color: var(--ds-accent);
}



/* TOE BEANS NAVBAR INITIAL RENDER STABILITY START */


/* =========================================================
   NAVBAR INITIAL RENDER STABILITY

   The navbar itself always exists in the initial HTML.

   Authentication changes data/state only.
   It must never construct a second navbar.
   ========================================================= */


/* =========================================================
   ACCOUNT FOOTPRINT

   Reserve the exact layout area before authentication resolves.
   ========================================================= */

.ds-navbar-account {
  min-width:
    67px;

  min-height:
    42px;

  flex:
    0 0 auto;
}


.ds-navbar-account
.ds-account-button {
  min-width:
    67px;

  min-height:
    42px;
}


/*
   Keep the avatar geometry fixed so account initials cannot
   change the navbar width.
*/

.ds-navbar-account
.ds-avatar {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;
}


/* =========================================================
   AUTH LOADING

   IMPORTANT:

   visibility:hidden preserves the reserved space.

   Do NOT replace this with display:none.
   ========================================================= */

.ds-navbar[data-ds-navbar-auth-state="loading"]
.ds-navbar-account {
  visibility:
    hidden;

  pointer-events:
    none;
}


/* =========================================================
   AUTH READY
   ========================================================= */

.ds-navbar[data-ds-navbar-auth-state="ready"]
.ds-navbar-account {
  visibility:
    visible;

  pointer-events:
    auto;
}


/* =========================================================
   SIGNED OUT

   Reserved for the real website implementation.
   ========================================================= */

.ds-navbar[data-ds-navbar-auth-state="signed-out"]
.ds-navbar-account {
  visibility:
    visible;

  pointer-events:
    auto;
}


/* TOE BEANS NAVBAR INITIAL RENDER STABILITY END */

/* TOE BEANS STANDARD NAVBAR PRODUCTION SUPPORT START */


/* =========================================================
   PRODUCTION VISIBILITY
   ========================================================= */

.ds-navbar-signed-out {
  display:
    flex;

  align-items:
    center;

  gap:
    var(--ds-space-2);
}


.ds-navbar-signed-out[hidden],
.ds-navbar-account[hidden],
.ds-navbar-notifications[hidden],
.ds-navbar-switch-choices[hidden] {
  display:
    none;
}


.ds-navbar-notification-dropdown.hidden {
  display:
    none;
}


/* =========================================================
   NOTIFICATION BADGE
   ========================================================= */

.ds-navbar-notification-badge {
  position:
    absolute;

  top:
    1px;

  right:
    1px;

  min-width:
    17px;

  height:
    17px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 4px;

  border-radius:
    var(--ds-radius-pill);

  background:
    var(--ds-danger-solid);

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;
}


.ds-navbar-notification-badge.hidden {
  display:
    none;
}


/* =========================================================
   NOTIFICATION CONTENT
   ========================================================= */

.ds-navbar-notification-heading {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    var(--ds-space-3);

  margin-bottom:
    var(--ds-space-3);
}


.ds-navbar-notification-summary {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--ds-muted);

  font-size:
    12px;
}


.ds-navbar-notification-action {
  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--ds-primary);

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;
}


.ds-navbar-notification-list {
  max-height:
    330px;

  overflow-y:
    auto;
}


.ds-navbar-notification-empty {
  color:
    var(--ds-muted);

  font-size:
    13px;
}


.ds-navbar-notification-item {
  width:
    100%;

  display:
    grid;

  gap:
    4px;

  padding:
    var(--ds-space-3);

  border:
    0;

  border-top:
    1px solid
    var(--ds-border);

  background:
    transparent;

  color:
    var(--ds-text);

  text-align:
    left;

  cursor:
    pointer;
}


.ds-navbar-notification-item:hover {
  background:
    var(--ds-surface-alt);
}


.ds-navbar-notification-item span,
.ds-navbar-notification-item small {
  display:
    block;
}


.ds-navbar-notification-item small {
  color:
    var(--ds-muted);
}


/* =========================================================
   SWITCH ACCOUNT
   ========================================================= */

.ds-navbar-switch-choices {
  padding:
    0
    var(--ds-space-2)
    var(--ds-space-2);
}


.ds-navbar-switch-choices
.ds-account-item {
  font-size:
    13px;
}


.ds-navbar-switch-copy {
  display:
    grid;

  gap:
    2px;
}


.ds-navbar-switch-copy strong {
  color:
    var(--ds-heading);
}


.ds-navbar-switch-copy small {
  color:
    var(--ds-muted);

  font-weight:
    500;
}


/* TOE BEANS STANDARD NAVBAR PRODUCTION SUPPORT END */

/* TOE BEANS LIGHT ACCOUNT DROPDOWN FOREGROUND START */


/* =========================================================
   LIGHT MODE ACCOUNT DROPDOWN

   The navbar itself uses white text because it sits on the
   brand gradient.

   In Light Mode, the account dropdown uses the light surface,
   so explicitly restore the normal design-system foreground
   tokens inside that surface.

   Dark Mode is intentionally left alone.
   ========================================================= */

html[data-mode="light"]
.ds-navbar-account-dropdown {
  color:
    var(--ds-text);
}


html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-account-header {
  color:
    var(--ds-text);
}


html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-account-header strong {
  color:
    var(--ds-heading);
}


html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-account-header span {
  color:
    var(--ds-muted);
}


html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-account-item {
  color:
    var(--ds-text);
}


html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-account-item:visited {
  color:
    var(--ds-text);
}


html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-account-item:hover {
  color:
    var(--ds-heading);
}


html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-navbar-logout,
html[data-mode="light"]
.ds-navbar-account-dropdown
.ds-navbar-logout:visited {
  color:
    var(--ds-danger);
}


/* TOE BEANS LIGHT ACCOUNT DROPDOWN FOREGROUND END */

/* TOE BEANS NAVBAR FIRST PAINT STATE START */


/* =========================================================
   FIRST-PAINT SESSION STATE

   The state is placed on <html> synchronously in <head>,
   before stylesheet rendering.

   This means the correct navbar geometry exists on frame 1.
   ========================================================= */


/* ---------------------------------------------------------
   DEFAULT SAFETY

   If no valid state exists for any reason, account-specific
   controls are not exposed.
   --------------------------------------------------------- */

.ds-navbar-signed-out,
.ds-navbar-notifications,
.ds-navbar-account {
  display:
    none;
}


/* ---------------------------------------------------------
   SIGNED OUT
   --------------------------------------------------------- */

html[data-tb-navbar-session="signed-out"]
.ds-navbar-signed-out {
  display:
    flex;
}


/* ---------------------------------------------------------
   INDIVIDUAL ACCOUNT
   --------------------------------------------------------- */

html[data-tb-navbar-session="user"]
.ds-navbar-notifications,
html[data-tb-navbar-session="user"]
.ds-navbar-account {
  display:
    block;
}


/* ---------------------------------------------------------
   ORGANIZATION ACCOUNT
   --------------------------------------------------------- */

html[data-tb-navbar-session="partner"]
.ds-navbar-notifications,
html[data-tb-navbar-session="partner"]
.ds-navbar-account {
  display:
    block;
}


/*
   The notification/account controls have stable geometry
   before site-navbar.js populates their data.
*/

html[data-tb-navbar-session="user"]
.ds-navbar-account,
html[data-tb-navbar-session="partner"]
.ds-navbar-account {
  min-width:
    67px;

  min-height:
    42px;
}


html[data-tb-navbar-session="user"]
.ds-navbar-notifications,
html[data-tb-navbar-session="partner"]
.ds-navbar-notifications {
  min-width:
    42px;

  min-height:
    42px;
}



/* TOE BEANS NAVBAR FIRST PAINT STATE END */