.accessRequestsShell {
  display: grid;
  gap: 16px;
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 20px 16px 56px;
}

.accessRequestsHero {
  margin: 0;
}

.accessRequestTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.accessRequestTabs .active {
  border-color: rgba(37, 99, 235, 0.35);
  background: #eff6ff;
  color: var(--blue-strong);
}

.accessRequestList {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.accessRequestCard,
.emptyState {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
}

.accessRequestTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.accessRequestTop h3 {
  margin: 0;
  font-size: 20px;
}

.accessRequestTop p {
  margin: 5px 0 0;
  color: var(--muted);
}

.accessStatus {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 850;
  text-transform: capitalize;
}

.accessStatus.approved {
  background: #ecfdf3;
  color: #067647;
}

.accessStatus.rejected {
  background: #fef3f2;
  color: #b42318;
}

.accessFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.accessFacts div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: #f8fbff;
}

.accessFacts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.accessFacts dd {
  margin: 4px 0 0;
  color: #1d2939;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.mutedText {
  color: var(--muted);
  font-weight: 650;
}

.accessDecision {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: #f8fbff;
  color: #344054;
}

.accessDecision strong,
.accessDecision span {
  display: block;
}

.accessDecision p {
  margin: 8px 0 0;
}

.accessActions,
.decisionActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.decisionDialog {
  width: min(560px, calc(100% - 24px));
  border: 0;
  border-radius: 22px;
  padding: 0;
  box-shadow: var(--shadow);
}

.decisionForm {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.decisionDialog::backdrop {
  background: rgba(18, 24, 38, 0.46);
}

@media (max-width: 640px) {
  .accessRequestTop,
  .accessActions,
  .decisionActions {
    align-items: stretch;
    flex-direction: column;
  }
}