/* REF-7115 [SHOW BUILD] — Site-wide Standard / Advanced view switch styles.
   Loaded on every authenticated page alongside view-mode.js.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Global visibility rules ───────────────────────────────────────────────── */

/* Elements only shown in Advanced; JS sets display:none in Standard */
body[data-view-mode="standard"] [data-vm="advanced"] {
  display: none !important;
}

/* Always-hidden elements (neither Standard nor Advanced) */
[data-vm="hide"] {
  display: none !important;
}

/* ── Standard | Advanced pill toggle ────────────────────────────────────────── */

#globalViewModeToggle {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #f8fafc;
  flex-shrink: 0;
  margin-right: 8px;
}

.vm-pill-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  color: #64748b;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid #cbd5e1;
}

.vm-pill-btn:last-child {
  border-right: none;
}

.vm-pill-btn.active {
  background: #1e40af;
  color: #fff;
}

.vm-pill-btn:hover:not(.active) {
  background: #e2e8f0;
  color: #1e293b;
}

/* ── Mobile: collapse the pill label on very narrow screens ─────────────────── */
@media (max-width: 480px) {
  .vm-pill-btn {
    padding: 4px 7px;
    font-size: 0.72rem;
  }
}