/* ============================================================
   VIDARIA 1.1 TOP NAV
   ------------------------------------------------------------
   Loaded when window.__VIDARIA_UI__ === true (mount via the
   conditional render in App.js). Tokens come from tokens.css.

   Naming: .vds-nav-* — never collides with the legacy
   .navbar-container set.
   ============================================================ */

.vds-nav {
  height: var(--nav-height);
  background-color: var(--vidaria-blue);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  box-shadow: var(--shadow-lg);
}

/* ── Brand (left) ── */
.vds-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  margin-right: var(--space-8);
  text-decoration: none;
  flex-shrink: 0;
  color: var(--white);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.vds-nav-brand:hover { opacity: 0.92; }
.vds-nav-logo {
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
/* Default Vidaria V-mark (shown when the account has no custom logo).
   Mirrors the mockup .nav-logo (20px) — paired with the wordmark. */
.vds-nav-mark {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.vds-nav-wordmark {
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Center: tab links ── */
.vds-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.vds-nav-links::-webkit-scrollbar { display: none; }

.vds-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-base), background var(--transition-base);
  border: none;
  background: none;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}
.vds-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--white);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}
.vds-nav-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
.vds-nav-link.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}
.vds-nav-link.is-active::after { transform: scaleX(1); }

/* Clients special pill style (matches mockup convention) */
.vds-nav-link--pill {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
}
.vds-nav-link--pill.is-active,
.vds-nav-link--pill:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
}
.vds-nav-link--pill::after { display: none; }

/* Currently-selected group breadcrumb (between brand and tabs).
   Per main plan §3.9: this is a LABEL only, not a switcher.
   Group selection happens in GroupDrawer. */
.vds-nav-groupcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  margin-right: var(--space-4);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vds-nav-groupcrumb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

/* ── Right: managed-account badge + user menu ── */
.vds-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.vds-nav-managed-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--warning);
  color: var(--warning-text);
  border-radius: var(--radius-md);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vds-nav-user-wrapper { position: relative; }

/* Multi-color ring around the avatar (user feedback
   2026-05-26: "the circle ring looks good though" — user
   likes the static multi-color ring; they don't want the
   inner initials to rotate. Earlier rev had a slow rotation
   + counter-rotation pair that caused initials to wobble on
   hover when one paused but the other didn't.

   Final: static conic-gradient ring, no animation at all. */
.vds-nav-user-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  padding: 2.5px;        /* visible ring width */
  background: conic-gradient(
      from 0deg,
      #2563eb 0deg,        /* vidaria-blue */
      #06b6d4 90deg,        /* cyan */
      #facc15 180deg,       /* amber */
      #f43f5e 270deg,       /* rose */
      #2563eb 360deg
  );
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}
.vds-nav-user-btn:hover { transform: scale(1.05); }

.vds-nav-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--vidaria-blue-light);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  /* Solid navbar-colored ring under the gradient so the avatar
     reads as a chip floating inside the gradient frame. */
  border: 2px solid var(--vidaria-nav-bg, #0c2545);
  overflow: hidden;
}
.vds-nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.vds-nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--white);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);
  overflow: hidden;
  display: none;
}
.vds-nav-dropdown.is-open { display: block; }

.vds-nav-dropdown-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-light);
  background: var(--gray-50);
}
.vds-nav-dropdown-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--gray-900);
}
.vds-nav-dropdown-email {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: 2px;
}

.vds-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border: none;
  width: 100%;
  background: none;
  text-align: left;
  text-decoration: none;
}
.vds-nav-dropdown-item:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}
.vds-nav-dropdown-item.is-danger { color: var(--danger); }
.vds-nav-dropdown-item.is-danger:hover { background: var(--danger-light); }
.vds-nav-dropdown-divider {
  border-top: var(--border-light);
  margin: var(--space-1) 0;
}

/* ============================================================
   RESPONSIVE — keep the whole nav on ONE row without clipping
   ------------------------------------------------------------
   Previously the brand wordmark + all 7 tabs + managed badge +
   avatar could overflow on narrower viewports (≤1280px) and the
   last tab (the Clients pill) was visually cut in half. We now
   progressively shed width:
     1. drop the wordmark (mark only),
     2. tighten link padding,
     3. collapse icon tabs to icon-only,
     4. hide the group breadcrumb / shrink the managed badge.
   The tab strip stays horizontally scrollable as a final
   fallback, with a soft right-edge fade so an overflow reads as
   "scroll for more" instead of a hard cut.
   ============================================================ */

/* Soft fade on the right edge of the scrollable tab strip. */
.vds-nav-links {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}

@media (max-width: 1280px) {
  .vds-nav { padding: 0 var(--space-4); }
  .vds-nav-brand { margin-right: var(--space-4); }
  .vds-nav-wordmark { display: none; }        /* mark only */
  .vds-nav-link { padding: var(--space-2) var(--space-2); }
}

@media (max-width: 1080px) {
  /* Collapse tabs that carry an icon down to icon-only. User-tab
     links (Officer / ShiftLeader) have no icon + no
     .vds-nav-link-text, so they keep their text and just scroll. */
  .vds-nav-link-text { display: none; }
  .vds-nav-link { gap: 0; padding: var(--space-2); }
  .vds-nav-link--pill { padding: var(--space-1) var(--space-2); }
  .vds-nav-groupcrumb { display: none; }
  .vds-nav-managed-badge { max-width: 140px; }
}

@media (max-width: 720px) {
  .vds-nav-managed-badge { display: none; }
  .vds-nav-brand { margin-right: var(--space-3); }
}