/* ─────────────────────────────────────────────────────────────────────
   Valrig Components
   Reusable vr-* components for future page migrations
   ───────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   PAGE HEADER
   ────────────────────────────────────────────────────────────────────── */

html.vr-scroll-restoring main {
  visibility: hidden;
}

.vr-page-container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

.vr-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--bs-body-color);
  line-height: 1;
}

.vr-brand__mark {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 32px;
}

.vr-brand__wordmark {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.055em;
}

.qpr-drawer-mobile-header .vr-brand {
  color: var(--bs-body-color);
}

#mobileDrawer {
  --bs-offcanvas-width: min(360px, 92vw);
  border-right-color: var(--vr-border-standard);
}

.qpr-drawer-mobile-header {
  align-items: stretch;
  background: var(--bs-body-bg);
  display: block;
  padding: 0.75rem 1rem;
}

.qpr-drawer-mobile-topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 40px;
}

.qpr-drawer-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--bs-secondary-color);
  display: inline-flex;
  flex: 0 0 40px;
  font-size: 1rem;
  height: 40px;
  justify-content: center;
  padding: 0;
  transition: background-color 120ms ease, color 120ms ease;
}

.qpr-drawer-close:hover {
  background-color: var(--vr-surface-hover);
  color: var(--bs-body-color);
}

.qpr-drawer-close:focus-visible {
  outline: 2px solid var(--vr-border-focus);
  outline-offset: 2px;
}

.qpr-drawer-user {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.75rem 0 0.65rem;
}

.vr-drawer-mobile-account {
  width: 100%;
}

.vr-drawer-mobile-user {
  align-items: center;
  background: transparent;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-md);
  color: var(--bs-body-color);
  display: flex;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
  width: 100%;
}

.vr-drawer-mobile-user:hover,
.vr-drawer-mobile-user:focus-visible {
  background: var(--vr-surface-hover);
  border-color: color-mix(in srgb, var(--bs-primary) 32%, var(--bs-border-color));
}

.vr-drawer-mobile-user__chevron {
  color: var(--bs-secondary-color);
  flex: 0 0 auto;
}

.vr-drawer-mobile-menu {
  width: 100%;
}

.qpr-drawer-user-details {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-context-button {
  font-size: inherit;
  text-decoration: none;
}

.vr-context-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

.vr-context-logo {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.3rem;
  flex: 0 0 1.1rem;
  align-items: center;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 750;
  justify-content: center;
  overflow: hidden;
}

.vr-context-logo__image,
.vr-context-logo__fallback {
  align-items: center;
  border-radius: inherit;
  display: flex;
  height: 100%;
  justify-content: center;
  object-fit: cover;
  width: 100%;
}

.vr-context-switch {
  font-size: 0.72rem;
  opacity: 0.65;
}

.vr-context-chevron,
.vr-user-menu__chevron {
  font-size: 0.65rem;
}

.vr-project-pill--split {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.vr-project-switch {
  align-items: center;
  align-self: stretch;
  border-left: 1px solid color-mix(in srgb, var(--bs-primary) 18%, transparent);
  border-radius: 0 999px 999px 0;
  display: inline-flex;
  font-size: 0.65rem;
  justify-content: center;
  min-width: 1.75rem;
  text-decoration: none;
}

.vr-project-switch:hover {
  filter: brightness(0.96);
}

.vr-navbar-attention {
  align-items: center;
  border-radius: 50%;
  color: var(--bs-body-color);
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 1.05rem;
  height: 38px;
  justify-content: center;
  position: relative;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.vr-navbar-attention:hover {
  background-color: var(--vr-surface-hover);
  color: var(--bs-primary);
}

.vr-navbar-attention__count {
  align-items: center;
  background-color: var(--bs-danger);
  border: 2px solid var(--vr-surface-elevated);
  border-radius: 999px;
  color: var(--bs-white);
  display: inline-flex;
  font-size: 0.58rem;
  font-weight: 700;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  min-width: 1rem;
  padding-inline: 0.18rem;
  position: absolute;
  right: -0.05rem;
  top: -0.05rem;
}

.qpr-mobile-project {
  align-items: center;
  color: var(--bs-body-color);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 650;
  gap: 0.4rem;
  margin-left: auto;
  max-width: min(46vw, 15rem);
}

.qpr-mobile-project i {
  color: var(--bs-primary);
  flex-shrink: 0;
}

.vr-drawer-breadcrumb {
  align-items: center;
  color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.4rem;
  min-height: 28px;
}

.vr-drawer-breadcrumb a,
.vr-drawer-breadcrumb span,
.vr-drawer-breadcrumb button {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.28rem;
  max-width: 11rem;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr-drawer-breadcrumb a:hover,
.vr-drawer-breadcrumb button:hover {
  color: var(--bs-body-color);
}

.vr-drawer-breadcrumb form {
  display: inline-flex;
  margin: 0;
  min-width: 0;
}

.vr-drawer-breadcrumb button {
  background: transparent;
  border: 0;
  font: inherit;
  padding: 0;
}

.vr-drawer-breadcrumb button:focus-visible,
.vr-drawer-breadcrumb a:focus-visible {
  border-radius: var(--vr-radius-sm);
  outline: 2px solid var(--vr-border-focus);
  outline-offset: 2px;
}

.vr-drawer-breadcrumb > i {
  font-size: 0.55rem;
  opacity: 0.55;
}

.vr-navbar-user-avatar {
  width: 30px;
  height: 30px;
  color: var(--vr-on-primary);
  font-size: 0.75rem;
}

.vr-user-menu {
  min-width: 230px;
}

.vr-user-menu__email {
  font-size: 0.76rem;
}

.vr-user-menu__section-label {
  font-size: 0.65rem;
}

.vr-drawer-user-avatar {
  background-color: var(--vr-primary-soft);
  color: var(--vr-primary-text);
  width: 36px;
  height: 36px;
  font-size: 0.78rem;
}

.vr-drawer-user-name {
  font-size: 0.875rem;
  line-height: 1.2;
}

.vr-drawer-user-email,
.vr-drawer-context-badge {
  font-size: 0.74rem;
}

.vr-drawer-context-action {
  font-size: 0.7rem;
}

.vr-drawer-context-separator {
  font-size: 0.6rem;
}

@media (max-width: 575.98px) {
  .vr-brand--compact-mobile .vr-brand__wordmark {
    display: none;
  }
}

/* Shared member and directory person cards. */
.vr-person-card {
  background-color: var(--vr-surface-elevated);
  border: 1px solid var(--vr-border-standard);
  border-radius: var(--vr-radius-card);
  box-shadow: var(--vr-shadow-sm);
}

.vr-role-menu {
  min-width: 15rem;
}

.vr-role-menu .dropdown-item small {
  line-height: 1.25;
}

.vr-page-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.vr-page-header__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.vr-page-header__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--bs-body-color);
}

.vr-page-header__description {
  margin: 0.5rem 0 0 0;
  font-size: 0.95rem;
  color: var(--bs-secondary-color);
}

.vr-page-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .vr-page-header__content {
    flex-direction: column;
  }

  .vr-page-header__actions {
    width: 100%;
    justify-content: stretch;
  }

  .vr-page-header__actions .btn {
    flex: 1 1 auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   SEARCH AND FILTER CONTROL
   ────────────────────────────────────────────────────────────────────── */

.vr-search {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  padding: 0 0.75rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vr-search:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.vr-search__icon {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--bs-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search submit icon-button — replaces a decorative span so the icon can
   natively submit its parent GET form. Sits at the leading edge of the
   control, visually indistinguishable from the old span at rest. */
.vr-search__submit {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--vr-radius-sm);
  color: var(--bs-secondary-color);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease;
}

.vr-search__submit:hover {
  color: var(--bs-primary);
  background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.vr-search__submit:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  color: var(--bs-primary);
}

.vr-search__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0.6rem;
  border: none;
  background: none;
  color: var(--bs-body-color);
  font-size: 0.9rem;
  padding: 0;
}

.vr-search__input::placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.7;
}

.vr-search__input:focus {
  outline: none;
}

.vr-search__action {
  position: relative;
  overflow: visible;
}

.vr-search__count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(35%, -35%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.18rem;
  border-radius: 999px;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--bs-body-bg);
  pointer-events: none;
}

.vr-search__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.vr-search__action {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.4rem;
  color: var(--bs-secondary-color);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.vr-search__action:hover {
  background-color: var(--vr-surface-hover);
  color: var(--bs-body-color);
}

/* ──────────────────────────────────────────────────────────────────────
   AVATAR
   ────────────────────────────────────────────────────────────────────── */

.vr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  flex-grow: 0;
}

.vr-avatar--person {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--vr-person-color, var(--bs-primary));
  color: var(--vr-on-primary);
}

.vr-avatar--person.vr-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.vr-avatar--person.vr-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.vr-avatar--workspace {
  width: 44px;
  height: 44px;
  border-radius: var(--vr-radius-md);
  background-color: var(--vr-unit-color, var(--vr-avatar-workspace-bg));
  color: var(--vr-avatar-workspace-text);
}

.vr-avatar--workspace.vr-avatar--custom {
  color: #ffffff;
}

.vr-avatar--workspace.vr-avatar--sm {
  width: 28px;
  height: 28px;
  border-radius: 0.25rem;
}

.vr-avatar--workspace.vr-avatar--lg {
  width: 48px;
  height: 48px;
  border-radius: var(--vr-radius-md);
  font-size: 1.1rem;
}

.vr-avatar--workspace.vr-avatar--xl {
  width: 72px;
  height: 72px;
  border-radius: calc(var(--vr-radius-md) + 0.15rem);
  font-size: 1.45rem;
}

.vr-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.vr-avatar__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.vr-avatar__image.hidden {
  display: none;
}

.vr-drawer-project-context {
  align-items: center;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
}

.vr-drawer-organization-card {
  align-items: center;
  background: var(--vr-surface-secondary);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-md);
  color: var(--bs-body-color);
  display: flex;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.vr-drawer-organization-card:hover,
.vr-drawer-organization-card:focus-visible {
  background: var(--vr-surface-hover);
  border-color: color-mix(in srgb, var(--bs-primary) 32%, var(--bs-border-color));
}

.vr-context-logo--drawer-org {
  flex: 0 0 1.75rem;
  height: 1.75rem;
  width: 1.75rem;
}

.vr-drawer-organization-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.vr-drawer-organization-card__label {
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.vr-drawer-organization-card__name {
  font-size: 0.82rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr-drawer-organization-context + .vr-drawer-project-context {
  padding-top: 0.55rem !important;
}

.vr-drawer-project-context__switch {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.vr-drawer-project-context__switch .qpr-ctx-pill {
  flex: 1 1 auto;
  font-size: 0.9rem;
  min-height: 3rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
}

.vr-drawer-project-context__name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.vr-drawer-project-context__label {
  color: var(--bs-secondary-color);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.vr-drawer-project-context__switch .vr-context-logo {
  border-radius: 0.42rem;
  flex-basis: 1.65rem;
  font-size: 0.78rem;
  height: 1.65rem;
  width: 1.65rem;
}

.vr-drawer-project-context__switch .vr-project-switch {
  min-width: 2.4rem;
}

.vr-drawer-project-context__menu {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--bs-secondary-color);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.vr-drawer-project-context__menu:hover,
.vr-drawer-project-context__menu:focus-visible {
  background: var(--vr-surface-hover);
  color: var(--bs-body-color);
}

/* Workspace unit imagery tracks the height of the adjacent identity lines. */
.vr-unit-card .vr-avatar--workspace.vr-avatar--xl {
  flex: 0 0 64px;
  height: 64px;
  width: 64px;
}

/* ──────────────────────────────────────────────────────────────────────
   BADGES AND STATUSES
   ────────────────────────────────────────────────────────────────────── */

/* Generic badge (neutral) */
.vr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--vr-radius-md);
  white-space: nowrap;
}

/* Status badge with semantic mapping */
.vr-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.27rem 0.48rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--vr-radius-md);
  white-space: nowrap;
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

/* Status semantic colors */
.vr-status[data-status="draft"],
.vr-status[data-status="cancelled"],
.vr-status[data-status="expired"] {
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

.vr-status[data-status="awaiting-response"],
.vr-status[data-status="pending-review"],
.vr-status[data-status="waiting-on-you"] {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

.vr-status[data-status="opened"],
.vr-status[data-status="responded"],
.vr-status[data-status="reviewed"],
.vr-status[data-status="for-information"] {
  background-color: var(--vr-info-bg);
  color: var(--vr-info-text);
}

.vr-status[data-status="approved"],
.vr-status[data-status="completed"] {
  background-color: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-status[data-status="rejected"],
.vr-status[data-status="overdue"],
.vr-status[data-status="failed"] {
  background-color: var(--vr-danger-bg);
  color: var(--vr-danger-text);
}

/* Record workflow status extensions */
.vr-status[data-status="superseded"],
.vr-status[data-status="void"] {
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

.vr-status[data-status="awaiting-completion"],
.vr-status[data-status="awaiting-review"] {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

.vr-status[data-status="response-received"] {
  background-color: var(--vr-info-bg);
  color: var(--vr-info-text);
}

.vr-status[data-status="ready-for-next-action"] {
  background-color: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-status[data-status="revision-required"] {
  background-color: var(--vr-danger-bg);
  color: var(--vr-danger-text);
}

/* Meta badge (type/category, mostly neutral) */
.vr-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--vr-radius-sm);
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

/* Role badge (neutral) */
.vr-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--vr-radius-md);
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

/* Send Action: a final-step choice should remain clear in both themes. */
.vr-final-step {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-md);
  background: var(--bs-tertiary-bg);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vr-final-step.is-active {
  border-color: var(--vr-success-text);
  background: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-member-role--creator {
  background: #dcecff;
  border: 1px solid #8bbcf3;
  color: #123f71;
}

[data-bs-theme="dark"] .vr-member-role--creator {
  background: #163a5f;
  border-color: #477cae;
  color: #d9ecff;
}

/* Priority badge (restrained, high emphasis for urgent) */
.vr-priority {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.27rem 0.48rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--vr-radius-md);
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

.vr-priority[data-priority="high"] {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
  font-weight: 700;
}

.vr-priority[data-priority="urgent"] {
  background-color: var(--vr-danger-bg);
  color: var(--vr-danger-text);
  font-weight: 700;
}

/* Context chip (project/org reference, looks distinct but not like status) */
.vr-context {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 20px;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────────────────────────────
   THREE-DOT ACTION MENU
   ────────────────────────────────────────────────────────────────────── */

.vr-action-menu {
  position: relative;
  display: inline-flex;
}

.vr-action-menu__toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: var(--vr-radius-md);
  color: var(--bs-secondary-color);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
  font-size: 1.2rem;
  line-height: 1;
}

.vr-action-menu__toggle:hover {
  background-color: var(--vr-surface-hover);
  color: var(--bs-body-color);
}

.vr-action-menu__toggle:focus-visible {
  background-color: var(--vr-surface-hover);
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
   SEGMENTED NAVIGATION
   ────────────────────────────────────────────────────────────────────── */

.vr-segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  background-color: var(--vr-surface-tertiary);
  border: 1px solid var(--vr-border-standard);
  border-radius: var(--vr-radius-lg);
}

.vr-segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.4rem 1rem;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--vr-radius-md);
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.vr-segmented__item.active {
  background-color: var(--vr-surface-body);
  border-color: var(--vr-border-standard);
  color: var(--bs-body-color);
  font-weight: 700;
  box-shadow: var(--vr-shadow-sm);
}

.vr-segmented__item:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent);
  color: var(--bs-body-color);
}

.vr-segmented__item:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.vr-segmented__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Unified Action workspace controls. */
.vr-action-toolbar {
  position: sticky;
  top: var(--vr-navbar-height, 0);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background: color-mix(in srgb, var(--vr-surface-body) 94%, transparent);
  backdrop-filter: blur(12px);
}

.vr-action-relationships {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
}

.vr-action-filter-menu {
  width: min(330px, calc(100vw - 2rem));
}

@media (max-width: 575.98px) {
  .vr-action-toolbar {
    align-items: stretch;
  }

  .vr-action-toolbar > .vr-segmented,
  .vr-action-relationships {
    width: 100%;
  }

  .vr-action-toolbar > .vr-segmented .vr-segmented__item {
    flex: 1 1 0;
    text-align: center;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   LONG OPTION BUTTON
   ────────────────────────────────────────────────────────────────────── */

.vr-option-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-lg);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.vr-option-btn__title,
.vr-option-btn__subtitle {
  display: block;
}

.vr-option-btn:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  background-color: var(--vr-surface-hover);
  box-shadow: var(--vr-shadow-md);
}

.vr-option-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-color: var(--bs-primary);
}

.vr-option-btn__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--bs-secondary-color);
}

.vr-option-btn__content {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-option-btn__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-body-color);
  line-height: 1.2;
}

.vr-option-btn__subtitle {
  margin: 0.3rem 0 0 0;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  line-height: 1.3;
}

/* ──────────────────────────────────────────────────────────────────────
   REUSABLE CARDS
   ────────────────────────────────────────────────────────────────────── */

.vr-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vr-card--interactive {
  cursor: pointer;
}

.vr-card--interactive:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  box-shadow: var(--vr-shadow-md);
}

.vr-card--interactive:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* KPI card (with accent bar) */
.vr-kpi-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.25rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  border-left: 4px solid var(--bs-primary);
  box-shadow: var(--vr-shadow-sm);
  transition: box-shadow 160ms ease;
}

.vr-kpi-card:hover {
  box-shadow: var(--vr-shadow-md);
}

.vr-kpi-card__label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

.vr-kpi-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bs-body-color);
}

/* Person card */
.vr-person-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vr-person-card:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  box-shadow: var(--vr-shadow-md);
}

.vr-person-card__avatar {
  flex-shrink: 0;
}

.vr-person-card__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.vr-person-card__role {
  margin: 0;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.vr-member-role {
  align-items: center;
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 999px;
  color: var(--bs-primary-text-emphasis);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 650;
  gap: 0.2rem;
  line-height: 1.2;
  padding: 0.25rem 0.55rem;
}

.vr-member-role__remove {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  font-size: 0.72rem;
  justify-content: center;
  line-height: 1;
  margin-right: -0.18rem;
  padding: 0;
}

/* Workspace card (org/project) */
.vr-workspace-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vr-workspace-card:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  box-shadow: var(--vr-shadow-md);
}

.vr-workspace-card__avatar {
  flex-shrink: 0;
}

.vr-workspace-card__content {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-workspace-card__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr-workspace-card__description {
  margin: 0.3rem 0 0 0;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* File card */
.vr-file-card {
  display: flex;
  flex-direction: column;
  padding: 0.7rem;
  position: relative;
  overflow: visible;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vr-file-card:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  box-shadow: var(--vr-shadow-md);
}

.vr-file-card__thumbnail {
  width: 100%;
  height: 120px;
  background-color: var(--vr-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vr-file-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr-file-card__icon {
  font-size: 2.5rem;
  color: var(--bs-secondary-color);
  opacity: 0.4;
}

.vr-file-card__body {
  padding: 0.5rem 0 0 0;
  min-width: 0;
}

.vr-file-card__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-body-color);
}

.vr-file-card__meta {
  margin: 0.3rem 0 0 0;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* Empty state */
.vr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.vr-empty-state__icon {
  font-size: 3rem;
  opacity: 0.3;
}

.vr-empty-state__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.vr-empty-state__description {
  margin: 0;
  font-size: 0.9rem;
  max-width: 400px;
}

.vr-empty-state__action {
  margin-top: 0.5rem;
}

/* ──────────────────────────────────────────────────────────────────────
   FILE UPLOAD SHELL
   ────────────────────────────────────────────────────────────────────── */

.vr-upload {
  display: flex;
  flex-direction: column;
}

.vr-upload__input {
  display: none;
}

.vr-upload__dropzone {
  position: relative;
  padding: 2rem;
  background-color: var(--vr-surface-secondary);
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--vr-radius-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.vr-upload__dropzone:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  background-color: var(--vr-surface-hover);
}

.vr-upload__dropzone:focus-within {
  border-color: var(--bs-primary);
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.25);
}

.vr-upload__dropzone.drag-over {
  border-color: var(--bs-primary);
  background-color: color-mix(in srgb, var(--bs-primary) 5%, transparent);
}

.vr-upload__icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--bs-secondary-color);
}

.vr-upload__text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.vr-upload__hint {
  margin: 0.5rem 0 0 0;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.vr-upload__details {
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-lg);
  display: none;
}

.vr-upload__details.active {
  display: block;
}

.vr-upload__file-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-body-color);
  word-break: break-word;
}

.vr-upload__file-size {
  margin: 0.3rem 0 0 0;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.vr-upload__progress {
  margin-top: 0.75rem;
  height: 4px;
  background-color: var(--vr-surface-secondary);
  border-radius: 2px;
  overflow: hidden;
}

.vr-upload__progress-bar {
  height: 100%;
  background-color: var(--bs-primary);
  border-radius: 2px;
  transition: width 400ms ease;
}

.vr-upload__actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.vr-upload__action {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  border: none;
  border-radius: var(--vr-radius-md);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.vr-upload__action--remove {
  background-color: var(--vr-danger-bg);
  color: var(--vr-danger-text);
}

.vr-upload__action--remove:hover {
  background-color: var(--vr-danger-border);
}

.vr-upload__action--retry {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

.vr-upload__action--retry:hover {
  background-color: var(--vr-warning-border);
}

.vr-upload--disabled .vr-upload__dropzone {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.vr-upload--error .vr-upload__dropzone {
  border-color: var(--vr-danger-border);
  background-color: var(--vr-danger-bg);
}

.vr-upload--success .vr-upload__progress-bar {
  background-color: var(--bs-success);
}


/* Sectioned record forms */

.vr-form-stack {
  display: grid;
  gap: 1rem;
}

.vr-form-section {
  overflow: hidden;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--vr-border-standard);
  border-radius: var(--vr-radius-card);
}

.vr-form-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: var(--vr-surface-tertiary);
  border-bottom: 1px solid var(--vr-border-standard);
}

.vr-form-section__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-form-section__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.vr-form-section__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--vr-radius-md);
  color: var(--bs-secondary-color);
  cursor: pointer;
  font-size: 1.1rem;
  transition: color 160ms ease, background-color 160ms ease;
}

.vr-form-section__toggle:hover {
  color: var(--bs-body-color);
  background-color: var(--vr-surface-hover);
}

.vr-form-section__toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  color: var(--bs-body-color);
}

.vr-form-section__toggle .bi {
  transition: transform 220ms ease;
}

.vr-form-section__toggle[aria-expanded="false"] .bi {
  transform: rotate(180deg);
}

.vr-form-section__title {
  margin: 0;
  color: var(--bs-body-color);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.vr-form-section__description {
  margin: 0.25rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.825rem;
  line-height: 1.4;
}

.vr-form-section__body {
  padding: 1.25rem;
}

.vr-form-actions {
  padding-top: 0.25rem;
}

@media (max-width: 575.98px) {
  .vr-form-section__header,
  .vr-form-section__body {
    padding: 1rem;
  }

  .vr-form-section__header {
    flex-wrap: wrap;
  }
}

.vr-record-type {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem 0.35rem 0.45rem;
  white-space: nowrap;
  border: 1px solid color-mix(
    in srgb,
    var(--bs-primary) 35%,
    var(--bs-border-color)
  );
  border-radius: var(--vr-radius-md);
  background-color: color-mix(
    in srgb,
    var(--bs-primary) 12%,
    var(--bs-body-bg)
  );
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
}

/* .vr-record-type::before {
  content: "";
  width: 0.22rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--bs-primary);
} */

/* ──────────────────────────────────────────────────────────────────────
   FILTER MENU
   ────────────────────────────────────────────────────────────────────── */

.vr-filter-menu {
  min-width: 280px;
}

/* ──────────────────────────────────────────────────────────────────────
   DATA TABLE
   Shared table wrapper for list pages (Records, Actions, Contacts, etc.)
   ────────────────────────────────────────────────────────────────────── */

   .vr-data-table .table > thead {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--vr-surface-tertiary);
  --bs-table-border-color: var(--bs-border-color);
}

.vr-data-table {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  overflow: visible;
}

.vr-data-table .table-responsive {
  border-radius: var(--vr-radius-card);
}

/* Record title cell — constrain width so truncation activates */
.vr-data-table__col-record {
  max-width: 0;
  width: 35%;
}

.vr-data-table__primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-body-color);
  font-size: 0.9rem;
  font-weight: 500;
}

.vr-data-table__secondary {
  display: block;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

/* Record lists reveal row actions on intent while keeping them keyboard accessible. */
@media (min-width: 768px) {
  [data-vr-active-rows] .vr-row-actions .vr-action-menu__toggle {
    opacity: 0;
    pointer-events: none;
  }

  [data-vr-active-rows] [data-vr-active-row]:hover .vr-row-actions .vr-action-menu__toggle,
  [data-vr-active-rows] [data-vr-active-row]:focus-within .vr-row-actions .vr-action-menu__toggle,
  [data-vr-active-rows] [data-vr-active-row].is-active .vr-row-actions .vr-action-menu__toggle {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Register-style Log table: only the system columns remain anchored. */
.vr-log-table .table-responsive {
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color)) var(--vr-surface-secondary);
  scrollbar-width: thin;
}

.vr-log-table .table-responsive::-webkit-scrollbar {
  height: 10px;
}

.vr-log-table .table-responsive::-webkit-scrollbar-track {
  background: var(--vr-surface-secondary);
  border-radius: 999px;
}

.vr-log-table .table-responsive::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
  border: 2px solid var(--vr-surface-secondary);
  border-radius: 999px;
}

.vr-log-table table {
  width: max-content;
  min-width: 100%;
}

.vr-log-table th,
.vr-log-table td {
  vertical-align: top;
}

.vr-log-table__reference,
.vr-log-table__actions {
  position: sticky;
  z-index: 2;
  background-color: var(--vr-surface-elevated);
  background-clip: padding-box;
}

.vr-log-table tbody tr:hover .vr-log-table__reference,
.vr-log-table tbody tr:focus-within .vr-log-table__reference,
.vr-log-table tbody tr:hover .vr-log-table__actions,
.vr-log-table tbody tr:focus-within .vr-log-table__actions {
  background-color: var(--vr-surface-hover);
}

.vr-log-table thead .vr-log-table__reference,
.vr-log-table thead .vr-log-table__actions {
  z-index: 3;
  background-color: var(--vr-surface-tertiary);
}

.vr-log-table__reference {
  left: 0;
  min-width: 9rem;
  box-shadow: 1px 0 0 var(--bs-border-color);
}

.vr-log-table__actions {
  right: 0;
  width: 2.75rem;
  min-width: 2.75rem;
  padding-inline: 0.25rem;
  box-shadow: -1px 0 0 var(--bs-border-color);
}

.vr-log-table__actions .vr-action-menu__toggle {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

/* Shared pending state for normal POST forms. */
.vr-form-submit-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bs-body-bg) 68%, transparent);
  backdrop-filter: blur(1.5px);
  color: var(--bs-body-color);
  font-weight: 600;
}

/* Preserve selectable unit-card geometry while its project/org token loads. */
.vr-unit-card.vr-submit-surface {
  overflow: hidden;
}

.vr-unit-card.vr-submit-surface > form,
.vr-unit-card.vr-submit-surface > .vr-unit-card__actions {
  filter: blur(1.5px);
  opacity: 0.72;
  pointer-events: none;
}

.vr-log-table__status {
  min-width: 10rem;
}

.vr-log-table__field {
  min-width: 12rem;
  max-width: 18rem;
}

.vr-log-table__field--tiny { min-width: 6rem; max-width: 8rem; }
.vr-log-table__field--small { min-width: 9rem; max-width: 12rem; }
.vr-log-table__field--large { min-width: 16rem; max-width: 24rem; }
.vr-log-table__field--wide { min-width: 22rem; max-width: 34rem; }

.vr-log-table__field:not(.vr-log-table__field--wrap) .vr-log-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr-log-value--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ──────────────────────────────────────────────────────────────────────
   LIST CARD
   Compact record card for mobile list views
   ────────────────────────────────────────────────────────────────────── */

.vr-list-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
}

.vr-list-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.vr-list-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.vr-list-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bs-body-color);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-list-card__description {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.vr-list-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.vr-list-card__actions {
  flex-shrink: 0;
  overflow: visible;
}

.vr-log-card__fields {
  display: grid;
  gap: 0.55rem;
}

.vr-log-card__field {
  display: grid;
  grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.vr-log-card__field dt {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 600;
}

.vr-log-card__field dd {
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.vr-log-card__details {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 0.5rem;
}

.vr-log-card__details summary {
  color: var(--bs-primary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.vr-log-card__less,
.vr-log-card__details[open] .vr-log-card__more {
  display: none;
}

.vr-log-card__details[open] .vr-log-card__less {
  display: inline;
}

/* ──────────────────────────────────────────────────────────────────────
   RECORD TYPE PICKER
   Reusable picker component used in the New Record modal and full page.
   ────────────────────────────────────────────────────────────────────── */

.vr-type-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vr-type-picker__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vr-type-picker__search-bar {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-type-picker__count {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.vr-type-picker__groups {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.vr-type-picker__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vr-type-picker__group-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.vr-type-picker__group-subtitle {
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bs-secondary-color);
}

.vr-type-picker__meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.vr-type-picker__empty {
  padding: 2rem 1rem;
}

/* ──────────────────────────────────────────────────────────────────────
   FORM CONTAINER AND GRID
   Centered form layout and two-column field grid for migrated forms.
   ────────────────────────────────────────────────────────────────────── */

.vr-form-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.vr-form-grid {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vr-form-field {
  min-width: 0;
}

.vr-form-field--half {
  grid-column: span 1;
}

.vr-form-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
  .vr-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vr-form-field--half,
  .vr-form-field--full {
    grid-column: 1;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   PAGE HEADER EXTENSIONS (eyebrow + meta row)
   ────────────────────────────────────────────────────────────────────── */

.vr-page-header__eyebrow {
  margin: 0 0 0.35rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
}

.vr-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* ──────────────────────────────────────────────────────────────────────
   READINESS BADGE
   ────────────────────────────────────────────────────────────────────── */

.vr-readiness {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--vr-radius-md);
}

.vr-readiness[data-ready="true"] {
  background-color: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-readiness[data-ready="false"] {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

/* ──────────────────────────────────────────────────────────────────────
   DETAIL PAGE LAYOUT
   ────────────────────────────────────────────────────────────────────── */

.vr-detail-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  gap: 1.5rem;
  align-items: start;
}

.vr-detail-main,
.vr-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .vr-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   DETAIL SECTION
   ────────────────────────────────────────────────────────────────────── */

.vr-detail-section {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  overflow: visible;
}

.vr-detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background-color: var(--vr-surface-tertiary);
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: calc(var(--vr-radius-card) - 1px) calc(var(--vr-radius-card) - 1px) 0 0;
}

.vr-detail-section__title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bs-secondary-color);
}

.vr-detail-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

.vr-detail-section__body {
  padding: 1.25rem;
}

.vr-detail-section__body--scroll {
  padding: 1.25rem;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ──────────────────────────────────────────────────────────────────────
   PRESERVE LINE BREAKS
   ────────────────────────────────────────────────────────────────────── */

.vr-preserve-lines {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ──────────────────────────────────────────────────────────────────────
   DEFINITION GROUPS (custom fields)
   ────────────────────────────────────────────────────────────────────── */

.vr-definition-groups {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vr-definition-group + .vr-definition-group {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1rem;
  margin-top: 1rem;
}

.vr-definition-group__title {
  margin: 0.85rem 0 0.75rem 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  background-color: var(--vr-surface-tertiary);
  border-radius: var(--vr-radius-sm);
}

.vr-definition-group:first-child .vr-definition-group__title {
  margin-top: 0;
}

.vr-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
}

@media (max-width: 575.98px) {
  .vr-definition-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vr-definition-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.vr-definition-item--full {
  grid-column: 1 / -1;
}

.vr-definition-item__label {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  margin: 0;
}

.vr-definition-item__value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bs-body-color);
  margin: 0;
  word-break: break-word;
}

/* ──────────────────────────────────────────────────────────────────────
   COST DISPLAY
   ────────────────────────────────────────────────────────────────────── */

.vr-cost-display {
  grid-column: 1 / -1;
}

.vr-cost-display .table-responsive {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-md);
  overflow-x: auto;
}

.vr-cost-display__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.vr-cost-display__summary .vr-cost-total {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bs-body-color);
}

/* ──────────────────────────────────────────────────────────────────────
   FILE GRID AND ATTACHMENT UPLOAD (compact variant)
   ────────────────────────────────────────────────────────────────────── */

.vr-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.vr-attachment-upload {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.vr-attachment-upload__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vr-attachment-upload__preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
}

.vr-attachment-upload__thumb {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vr-surface-secondary);
  border-radius: var(--vr-radius-sm);
  overflow: hidden;
}

.vr-attachment-upload__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr-file-card--removing {
  opacity: 0;
  transition: opacity 300ms ease;
}

/* ──────────────────────────────────────────────────────────────────────
   ATTACHMENT ASYNC UPLOAD
   ────────────────────────────────────────────────────────────────────── */

/* Error alert inside the attachment modal */
[data-qpr-attachment-error]:not(.d-none) {
  font-size: 0.875rem;
  word-break: break-word;
}

/* Prevent horizontal overflow from long filenames in newly added cards */
[data-qpr-attachment-item] .vr-file-card__name {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Narrow-screen modal usability */
@media (max-width: 575.98px) {
  [data-qpr-attachment-modal] .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  [data-qpr-attachment-modal] .modal-footer .btn {
    flex: 1 1 auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   EMPTY STATE — COMPACT VARIANT
   ────────────────────────────────────────────────────────────────────── */

.vr-empty-state--compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.vr-empty-state--compact .vr-empty-state__icon {
  font-size: 2rem;
  opacity: 0.3;
}

/* ──────────────────────────────────────────────────────────────────────
   RELATED RECORD GROUPS
   ────────────────────────────────────────────────────────────────────── */

.vr-related-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vr-related-group__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
}

.vr-related-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vr-related-record {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.625rem 0.75rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-md);
  text-decoration: none;
  color: var(--bs-body-color);
  transition: border-color 160ms ease, background-color 160ms ease;
  font-size: 0.875rem;
}

.vr-related-record:hover {
  background-color: var(--vr-surface-hover);
  border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
  color: var(--bs-body-color);
}

.vr-related-record:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.vr-related-record__identity {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.vr-related-record__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.vr-related-record__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.vr-related-record__arrow {
  flex-shrink: 0;
  color: var(--bs-secondary-color);
  opacity: 0.5;
}

@media (max-width: 575.98px) {
  .vr-related-record {
    flex-wrap: wrap;
  }

  .vr-related-record__title {
    white-space: normal;
    order: 3;
    flex-basis: 100%;
  }

  .vr-related-record__meta {
    order: 4;
    flex-basis: 100%;
  }

  .vr-related-record__arrow {
    order: 5;
    margin-left: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   PROPERTY LIST (sidebar)
   ────────────────────────────────────────────────────────────────────── */

.vr-property-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vr-property-list__item {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  align-items: baseline;
  min-width: 0;
}

.vr-property-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vr-property-list__label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin: 0;
}

.vr-property-list__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bs-body-color);
  margin: 0;
  word-break: break-word;
  min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   TIMELINE
   ────────────────────────────────────────────────────────────────────── */

.vr-timeline {
  border-left: 2px solid var(--bs-border-color);
  margin-left: 14px;
  padding-left: 0;
}

.vr-timeline__item {
  display: flex;
  gap: 0.75rem;
  padding-left: 0.5rem;
  margin-bottom: 1rem;
  position: relative;
}

.vr-timeline__item:last-child {
  margin-bottom: 0;
}

.vr-timeline__marker {
  margin-left: -30px;
  flex-shrink: 0;
}

.vr-timeline__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border: 2px solid var(--bs-body-bg);
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
}

/* Event type icon states */
.vr-timeline__icon[data-event-type="created"],
.vr-timeline__icon[data-event-type="approved"],
.vr-timeline__icon[data-event-type="approve"],
.vr-timeline__icon[data-event-type="completed"] {
  background-color: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-timeline__icon[data-event-type="edited"],
.vr-timeline__icon[data-event-type="status_changed"],
.vr-timeline__icon[data-event-type="sent"] {
  background-color: var(--vr-info-bg);
  color: var(--vr-info-text);
}

.vr-timeline__icon[data-event-type="reject"],
.vr-timeline__icon[data-event-type="rejected"],
.vr-timeline__icon[data-event-type="revision_requested"],
.vr-timeline__icon[data-event-type="voided"] {
  background-color: var(--vr-danger-bg);
  color: var(--vr-danger-text);
}

.vr-timeline__icon[data-event-type="opened"] {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

.vr-timeline__icon[data-event-type="linked"] {
  background-color: var(--vr-info-bg);
  color: var(--vr-info-text);
}

.vr-timeline__content {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-timeline__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vr-timeline__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin: 0;
}

.vr-timeline__actor {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin: 0;
}

.vr-timeline__time {
  font-size: 0.73rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.vr-timeline__notes {
  margin: 0.35rem 0 0 0;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
  .vr-timeline__time {
    white-space: normal;
    width: 100%;
    flex-basis: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   END OF COMPONENTS
   ────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   FORM SECTION STATUS (progress indicator in section header)
   ────────────────────────────────────────────────────────────────────── */

.vr-form-section__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--vr-radius-md);
  white-space: nowrap;
  line-height: 1.3;
  flex-shrink: 0;
}

.vr-form-section__status:empty {
  display: none;
}

.vr-form-section__status[data-state="complete"] {
  background-color: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-form-section__status[data-state="missing"] {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

.vr-form-section__status[data-state="error"] {
  background-color: var(--vr-danger-bg);
  color: var(--vr-danger-text);
}

/* ──────────────────────────────────────────────────────────────────────
   FLOATING FORM BAR — two-group layout
   Applied as additional class on .qpr-floating-savebar for edit forms.
   ────────────────────────────────────────────────────────────────────── */

.qpr-floating-savebar.vr-floating-form-bar {
  left: 1.5rem;
  justify-content: space-between;
  border-radius: 1rem;
  gap: 0.75rem;
}

.vr-floating-form-bar__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
}

.vr-floating-form-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Ensure dropdown menus from the savebar clear it */
.qpr-floating-savebar .dropdown-menu {
  z-index: 1050;
}

@media (max-width: 767.98px) {
  .qpr-floating-savebar.vr-floating-form-bar {
    left: 0.75rem;
    border-radius: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .vr-floating-form-bar__progress {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .vr-floating-form-bar__actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   REQUIRED PROGRESS INDICATOR (in floating bar)
   ────────────────────────────────────────────────────────────────────── */

.vr-required-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--bs-secondary-color);
  background-color: var(--vr-neutral-bg);
  min-width: 7rem;
  justify-content: center;
}

.vr-required-progress[data-state="complete"] {
  background-color: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-required-progress[data-state="missing"] {
  background-color: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

/* ──────────────────────────────────────────────────────────────────────
   SECTION NAVIGATOR MENU
   ────────────────────────────────────────────────────────────────────── */

.vr-section-nav__menu {
  min-width: 280px;
  max-width: 360px;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem;
}

.vr-section-nav__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: normal;
  padding: 0.55rem 0.75rem;
  border-radius: var(--vr-radius-md);
  text-align: left;
  width: 100%;
  word-break: break-word;
}

.vr-section-nav__identity {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  min-width: 0;
}

.vr-section-nav__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bs-body-color);
  line-height: 1.3;
}

.vr-section-nav__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.1rem;
}

.vr-section-nav__metric {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.vr-section-nav__metric + .vr-section-nav__metric::before {
  content: "·";
  margin-right: 0.15rem;
  color: var(--bs-secondary-color);
  opacity: 0.5;
}

.vr-section-nav__metric[data-state="complete"] {
  color: var(--vr-success-text);
}

.vr-section-nav__metric[data-state="error"] {
  color: var(--vr-danger-text);
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────────────
   SECTION TARGETED HIGHLIGHT (navigator jump)
   ────────────────────────────────────────────────────────────────────── */

.vr-form-section--targeted {
  box-shadow: 0 0 0 2px var(--bs-primary), var(--vr-shadow-md);
  transition: box-shadow 600ms ease;
}

/* ──────────────────────────────────────────────────────────────────────
   COST INPUT WIDGET — table + modal design
   ────────────────────────────────────────────────────────────────────── */

.vr-cost-input {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--vr-border-standard);
  border-radius: var(--vr-radius-card);
  overflow: visible;
}

.vr-cost-input__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background-color: var(--vr-surface-tertiary);
  border-bottom: 1px solid var(--vr-border-standard);
  border-radius: calc(var(--vr-radius-card) - 1px) calc(var(--vr-radius-card) - 1px) 0 0;
}

.vr-cost-input__title-area {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-cost-input__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.vr-cost-input__empty {
  padding: 1.5rem 1.25rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.vr-cost-input__summary {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--vr-border-standard);
  background-color: var(--vr-surface-elevated);
  border-radius: 0 0 calc(var(--vr-radius-card) - 1px) calc(var(--vr-radius-card) - 1px);
}

.vr-cost-input .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vr-cost-input .dropdown-menu {
  z-index: 1055;
}

/* ──────────────────────────────────────────────────────────────────────
   FILE CARD ACTIONS OVERLAY
   Three-dot menu positioned over the top-right of the thumbnail area.
   ────────────────────────────────────────────────────────────────────── */

.vr-file-card__actions {
  position: absolute;
  top: calc(0.7rem + 0.3rem);   /* card padding + inner margin */
  right: calc(0.7rem + 0.3rem);
  z-index: 10;
  display: inline-flex;
}

/* Override toggle size and add a themed surface for visibility over images */
.vr-file-card__actions .vr-action-menu__toggle {
  width: 28px;
  height: 28px;
  font-size: 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-sm);
  box-shadow: var(--vr-shadow-sm);
  opacity: 0.82;
  transition: opacity 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.vr-file-card:hover .vr-file-card__actions .vr-action-menu__toggle,
.vr-file-card__actions .vr-action-menu__toggle:hover,
.vr-file-card__actions .vr-action-menu__toggle:focus-visible {
  opacity: 1;
}

.vr-file-card__actions .vr-action-menu__toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Ensure the dropdown itself is never clipped by the card border */
.vr-file-card__actions .dropdown-menu {
  z-index: 1060;
}

/* ──────────────────────────────────────────────────────────────────────
   DASHBOARD GRID AND SECTIONS
   ────────────────────────────────────────────────────────────────────── */

.vr-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 991.98px) {
  .vr-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .vr-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.vr-dashboard-section {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  overflow: visible;
}

.vr-dashboard-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background-color: var(--vr-surface-tertiary);
  border-radius: calc(var(--vr-radius-card) - 1px) calc(var(--vr-radius-card) - 1px) 0 0;
}

.vr-dashboard-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background-color: var(--vr-neutral-bg);
  color: var(--vr-neutral-text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

/* Section wraps the data table; the table itself handles its own border-radius */
.vr-dashboard-section .vr-data-table {
  border: none;
  border-radius: 0 0 calc(var(--vr-radius-card) - 1px) calc(var(--vr-radius-card) - 1px);
}

.vr-dashboard-section .vr-data-table .table-responsive {
  border-radius: 0 0 calc(var(--vr-radius-card) - 1px) calc(var(--vr-radius-card) - 1px);
}

/* Compact horizontal project activity strip. */
.vr-activity-strip {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 0.85rem 0.35rem;
}

.vr-activity-strip__item {
  align-items: flex-start;
  color: var(--bs-body-color);
  display: flex;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.35rem 0.85rem;
}

.vr-activity-strip__item + .vr-activity-strip__item {
  border-left: 1px solid var(--bs-border-color);
}

.vr-activity-strip__item:hover .vr-activity-strip__message {
  color: var(--bs-primary);
}

.vr-activity-strip__icon {
  align-items: center;
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 50%;
  color: var(--bs-primary-text-emphasis);
  display: inline-flex;
  flex: 0 0 2rem;
  height: 2rem;
  justify-content: center;
}

.vr-activity-strip__icon[data-tone="success"] {
  background: var(--vr-success-bg);
  border-color: color-mix(in srgb, var(--vr-success-text) 38%, transparent);
  color: var(--vr-success-text);
}

.vr-activity-strip__icon[data-tone="warning"] {
  background: var(--vr-warning-bg);
  border-color: color-mix(in srgb, var(--vr-warning-text) 38%, transparent);
  color: var(--vr-warning-text);
}

.vr-activity-strip__icon[data-tone="danger"] {
  background: var(--vr-danger-bg);
  border-color: color-mix(in srgb, var(--vr-danger-text) 38%, transparent);
  color: var(--vr-danger-text);
}

.vr-activity-strip__icon[data-tone="info"] {
  background: var(--vr-info-bg);
  border-color: color-mix(in srgb, var(--vr-info-text) 38%, transparent);
  color: var(--vr-info-text);
}

.vr-activity-strip__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vr-activity-strip__message {
  display: -webkit-box;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vr-activity-strip__detail,
.vr-activity-strip__time {
  color: var(--bs-secondary-color);
  font-size: 0.64rem;
  line-height: 1.35;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr-dashboard-section--activity .vr-dashboard-section__header h2 {
  font-size: 0.82rem;
}

.vr-dashboard-section--activity .vr-dashboard-section__header {
  padding-block: 0.7rem;
}

@media (max-width: 1199.98px) {
  .vr-activity-strip {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }

  .vr-activity-strip__item {
    flex: 0 0 min(16rem, 78vw);
    scroll-snap-align: start;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   WORK LIST
   Identity and meta cells for action queue rows
   ────────────────────────────────────────────────────────────────────── */

.vr-work-list {
  display: flex;
  flex-direction: column;
}

.vr-work-list__identity {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--bs-body-color);
}

.vr-work-list__meta {
  display: block;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}

/* ──────────────────────────────────────────────────────────────────────
   STANDALONE HEADER
   ────────────────────────────────────────────────────────────────────── */

.vr-standalone-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.5rem 1.25rem;
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  min-height: 3rem;
  gap: 0.5rem;
  z-index: 1030;
}

/* Brand */
.vr-standalone-header__brand {
  color: var(--bs-body-color);
  flex-shrink: 0;
}

.vr-standalone-header__brand:hover {
  color: var(--bs-body-color);
}

/* Breadcrumb / context */
.vr-standalone-header__context {
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}

.vr-standalone-header__crumb-sep {
  font-size: 0.6rem;
  flex-shrink: 0;
}

.vr-standalone-header__context-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30ch;
}

/* User menu trigger */
.vr-standalone-header__user {
  color: var(--bs-body-color);
  flex-shrink: 0;
  line-height: 1;
}

.vr-standalone-header__user:hover,
.vr-standalone-header__user:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
}

.vr-standalone-header__user:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Dropdown panel */
.vr-standalone-header__menu {
  min-width: 230px;
}

.vr-standalone-header__email {
  font-size: 0.76rem;
}

.vr-standalone-header__section-label {
  font-size: 0.65rem;
}

/* Mobile: preserve room for the current context. */
@media (max-width: 575.98px) {
  .vr-standalone-header__context {
    font-size: 0.8rem;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   WORKSPACE SHELL
   ────────────────────────────────────────────────────────────────────── */

.vr-workspace-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-tertiary-bg);
}

.vr-workspace-main {
  flex: 1 1 auto;
  padding: 2.5rem 1.25rem;
}

.vr-workspace-main--wide {
  max-width: none;
  padding-inline: clamp(1rem, 2.2vw, 2.5rem);
  width: 100%;
}

.vr-workspace-hero {
  align-items: center;
  background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-body-bg));
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: var(--vr-radius-card);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 1.5rem;
}

.vr-workspace-onboarding,
.vr-workspace-section {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  padding: 1.25rem;
}

.vr-workspace-section__header {
  align-items: center;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  justify-content: space-between;
  margin: -0.15rem 0 0.85rem;
  padding: 0 0 0.85rem;
}

.vr-workspace-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
}

@media (max-width: 991.98px) {
  .vr-workspace-grid { grid-template-columns: 1fr; }
}

.vr-quick-start-layout {
  align-items: stretch;
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
  min-height: 28rem;
}

.vr-quick-start-illustration {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.vr-quick-start-illustration__img {
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: left center;
  position: absolute;
  top: 0;
  width: 100%;
}

.vr-quick-start-card {
  flex: 0 1 42rem;
  width: 100%;
}

@media (max-width: 575.98px) {
  .vr-workspace-hero { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1.1rem; }
}

@media (max-width: 575.98px) {
  .vr-workspace-main {
    padding: 1.25rem 0.875rem;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   UNIT LIST AND CARDS (organizations + projects)
   ────────────────────────────────────────────────────────────────────── */

.vr-unit-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Card shell — provides border, radius, hover shadow */
.vr-unit-card {
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  overflow: visible;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vr-unit-card:hover,
.vr-unit-card:focus-within {
  border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  box-shadow: var(--vr-shadow-md);
}

.vr-unit-card:hover {
  background-color: var(--vr-surface-hover);
}

.vr-unit-card:hover .vr-unit-card__primary,
.vr-unit-card:hover .vr-unit-card__actions {
  background-color: transparent;
}

/* The form inside takes remaining space */
.vr-unit-card > form {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Primary action — full-width submit button, reset browser defaults */
.vr-unit-card__primary {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 5.4rem;
  padding: 0.875rem 1rem;
  background: none;
  border: none;
  border-radius: var(--vr-radius-card);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background-color 160ms ease;
}

.vr-unit-card__primary:hover {
  background-color: var(--vr-surface-hover);
}

.vr-unit-card__primary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  border-radius: var(--vr-radius-card);
}

/* Identity row: avatar + text block */
.vr-unit-card__identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Text block beside avatar */
.vr-unit-card__info {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-unit-card__name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--bs-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.vr-unit-card__description {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--bs-secondary-color);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.vr-unit-card__parent {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges: Current / role / project-count */
.vr-unit-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

/* Roles and Shared-with-you — below identity, not far-right */
.vr-unit-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.3rem;
}

.vr-unit-card__access {
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  font-weight: 600;
}

.vr-unit-card__tail {
  align-items: flex-end;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 5.25rem;
}

.vr-unit-card__current {
  background: var(--vr-success-bg);
  border: 1px solid color-mix(in srgb, var(--vr-success-text) 25%, transparent);
  border-radius: 999px;
  color: var(--vr-success-text);
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 0.3rem;
  padding: 0.2rem 0.45rem;
}

/* Open-hint chevron */
.vr-unit-card__open-hint {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.72;
  transition: color 160ms ease, opacity 160ms ease;
}

.vr-unit-card__open-hint i {
  font-size: 1.25rem;
  line-height: 1;
}

.vr-unit-card__primary:hover .vr-unit-card__open-hint {
  color: var(--bs-primary);
  opacity: 1;
}

.vr-unit-count {
  font-size: 0.7rem;
}

/* Secondary actions column (edit button, etc.) */
.vr-unit-card__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem 0.5rem 0;
  gap: 0.35rem;
}

.vr-unit-card__edit {
  white-space: nowrap;
}

.vr-unit-profile-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.vr-unit-profile-summary span,
.vr-unit-profile-summary a {
  align-items: center;
  color: var(--bs-secondary-color);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.3rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.vr-action-field-control {
  align-items: center;
  background: var(--vr-surface-secondary);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
}

@media (max-width: 575.98px) {
  .vr-unit-card__primary {
    padding: 0.75rem 0.875rem;
  }

  .vr-unit-card .vr-avatar--workspace.vr-avatar--xl {
    flex-basis: 56px;
    height: 56px;
    width: 56px;
  }

  .vr-unit-card__tail {
    min-width: 2rem;
  }

  .vr-unit-card__tail .vr-unit-card__open-hint span {
    display: none;
  }

  .vr-unit-card__actions {
    padding-right: 0.5rem;
  }

  .vr-unit-card__edit {
    font-size: 0;
    padding-inline: 0.55rem;
  }

  .vr-unit-card__edit i {
    font-size: 0.8rem;
    margin-right: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   ORGANIZATION HEADER
   Identity header used on the organization dashboard page.
   ────────────────────────────────────────────────────────────────────── */

.vr-organization-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.vr-organization-hero {
  background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-body-bg) 72%);
  border-radius: var(--vr-radius-card);
}

.vr-organization-hero__inner,
.vr-organization-content {
  max-width: none;
  width: 100%;
}

.vr-organization-hero__inner {
  padding-block: 0.35rem;
}

.vr-organization-header__identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.vr-organization-header__details {
  flex: 1 1 auto;
  min-width: 0;
}

.vr-organization-header__details h4 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 56ch;
}

.vr-organization-header__details p {
  display: -webkit-box;
  max-width: 78ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vr-organization-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.vr-organization-kpis {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vr-organization-kpi {
  align-items: center;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem 1rem;
}

.vr-organization-kpi__icon {
  align-items: center;
  background: var(--bs-primary-bg-subtle);
  border-radius: 50%;
  color: var(--bs-primary-text-emphasis);
  display: inline-flex;
  flex: 0 0 2.25rem;
  height: 2.25rem;
  justify-content: center;
}

.vr-organization-kpi__icon[data-tone="warning"] {
  background: var(--vr-warning-bg);
  color: var(--vr-warning-text);
}

.vr-organization-kpi__icon[data-tone="info"] {
  background: var(--vr-info-bg);
  color: var(--vr-info-text);
}

.vr-organization-kpi__icon[data-tone="success"] {
  background: var(--vr-success-bg);
  color: var(--vr-success-text);
}

.vr-organization-kpi > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vr-organization-kpi__label {
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.vr-organization-kpi strong {
  font-size: 1.25rem;
  line-height: 1.2;
}

.vr-organization-projects {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-card);
  padding: 1rem;
}

.vr-organization-projects__header {
  align-items: flex-end;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding: 0 0.25rem 0.85rem;
}

.vr-organization-project-toolbar {
  align-items: center;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, auto) minmax(9rem, auto) auto auto;
  margin-bottom: 0.85rem;
}

.vr-organization-project-toolbar__search {
  align-items: center;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vr-radius-md);
  display: flex;
  gap: 0.55rem;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
}

.vr-organization-project-toolbar__search i {
  color: var(--bs-secondary-color);
}

.vr-organization-project-toolbar__search input {
  background: transparent;
  border: 0;
  color: var(--bs-body-color);
  font-size: 0.8rem;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.vr-pagination {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.vr-organization-projects .vr-unit-card__primary {
  min-height: 4.25rem;
}

@media (max-width: 575.98px) {
  .vr-organization-header {
    flex-direction: column;
    gap: 1rem;
  }

  .vr-organization-header__actions {
    width: 100%;
  }

  .vr-organization-hero {
    margin-inline: 0.75rem !important;
  }

  .vr-pagination {
    justify-content: space-between;
  }
}

@media (max-width: 991.98px) {
  .vr-organization-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vr-organization-project-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .vr-organization-project-toolbar__search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .vr-organization-kpis {
    grid-template-columns: 1fr;
  }

  .vr-organization-project-toolbar {
    grid-template-columns: 1fr;
  }

  .vr-organization-project-toolbar__search {
    grid-column: auto;
  }
}


/* Compact Record-list descriptions: smaller column, three readable lines. */
.vr-record-description {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1.3;
}

.vr-record-description__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.vr-record-table__status-cell,
.vr-record-table__priority-cell {
  white-space: nowrap;
}

.vr-record-table__status-cell {
  padding-right: 0.7rem !important;
}

.vr-record-table__priority-cell {
  padding-left: 0.7rem !important;
}

@media (min-width: 1200px) {
  .vr-record-table table { min-width: 960px; table-layout: fixed; }
  .vr-record-table__reference { width: 13%; }
  .vr-record-table__record,
  .vr-record-table .vr-data-table__col-record { width: 21%; }
  .vr-record-table__description { width: 16%; }
  .vr-record-table__type { width: 23%; }
  .vr-record-table__status { width: 12%; }
  .vr-record-table__priority { width: 10%; }
  .vr-record-table__actions { width: 5%; }
  .vr-record-table__type-cell .vr-data-table__secondary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .vr-record-table {
    margin-right: 2.65rem;
  }

  .vr-record-table .table-responsive {
    overflow: visible;
  }

  .vr-record-table table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
  }

  .vr-record-table__reference { width: 17%; }
  .vr-record-table__record,
  .vr-record-table .vr-data-table__col-record { width: 25%; }
  .vr-record-table__description,
  .vr-record-table .vr-record-description { display: none; }
  .vr-record-table__type { width: 24%; }
  .vr-record-table__status { width: 18%; }
  .vr-record-table__priority { width: 16%; }
  .vr-record-table__actions {
    padding: 0 !important;
    width: 0;
  }

  .vr-record-table td.vr-row-actions {
    overflow: visible;
    padding: 0 !important;
    position: relative;
    width: 0;
  }

  .vr-record-table td.vr-row-actions .vr-action-menu {
    position: absolute;
    right: -2.65rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }

  .vr-record-table td.vr-row-actions .vr-action-menu__toggle {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 0;
    border-radius: 0 var(--vr-radius-md) var(--vr-radius-md) 0;
    min-height: 2.5rem;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 2.65rem;
  }
}
/* Project company cards keep dense company lists easy to scan. */
.vr-company-card__chevron {
  transition: transform 160ms ease;
}

[aria-expanded="true"] > .vr-company-card__chevron {
  transform: rotate(180deg);
}