DataScope26/WEB

1.my-invites {2  width: 100%;3  /* Match company invites container: remove centering max-width so content spans full page width */4  margin: 0;5  padding: 5rem 5.4375rem 5rem;6}7 8.my-invites__header {9  display: flex;10  justify-content: space-between;11  align-items: flex-start;12  gap: 1.5rem;13  margin-bottom: 1.5rem;14}15 16.my-invites__eyebrow {17  margin: 0 0 0.5rem;18  color: var(--green);19  text-transform: uppercase;20  font-size: 0.75rem;21  letter-spacing: 0.12em;22  font-weight: 700;23}24 25.my-invites__title {26  margin: 0;27  font-size: clamp(2rem, 4vw, 2.5rem);28  color: var(--color-text);29}30 31.my-invites__sub {32  margin: 0.625rem 0 0;33  color: var(--muted);34  line-height: 1.6;35  max-width: 40rem;36}37 38.my-invites__card {39/* Match company invites container styles for consistent visual weight */40background: var(--surface);41border: 0.0625rem solid var(--color-border);42border-radius: 1.5rem;43box-shadow: var(--shadow-soft);44padding: 1.75rem;45}46 47.my-invites__list {48/* Use same list layout as company invites for consistent spacing */49display: flex;50flex-direction: column;51gap: 0.75rem;52margin-top: 1.25rem;53}54 55 56.my-invite-card {57background: var(--surface-2);58border: 0.0625rem solid var(--color-border);59border-radius: 1rem;60padding: 1.125rem 1.25rem;61min-height: 4.25rem; /* ensure similar vertical density */62display: flex;63flex-direction: column;64justify-content: center;65}66.my-invite-card__top {67  display: flex;68  justify-content: space-between;69  gap: 1rem;70  align-items: flex-start;71}72 73.my-invite-card__company {74  margin: 0;75  color: var(--green);76  font-size: 0.75rem;77  text-transform: uppercase;78  letter-spacing: 0.08em;79  font-weight: 700;80}81 82.my-invite-card__title {83  margin: 0.5rem 0 0;84  font-size: 1.2rem;85  color: var(--color-text);86}87 88.my-invite-card__status {89  display: inline-flex;90  min-width: 6.875rem;91  align-items: center;92  justify-content: center;93  border-radius: 62.4375rem;94  padding: 0.5rem 0.75rem;95  font-size: 0.8rem;96  font-weight: 700;97}98 99.my-invite-card__status--accepted {100  background: rgba(46, 232, 138, 0.12);101  color: var(--green);102}103 104.my-invite-card__status--pending {105  background: var(--color-border-soft);106  color: var(--muted);107}108 109.my-invite-card__status--declined {110  background: var(--color-danger);111  color: #ffffff;112}113 114.my-invite-card__meta {115  display: flex;116  gap: 0.75rem;117  flex-wrap: wrap;118  margin-top: 0.75rem;119  color: var(--muted);120  font-size: 0.82rem;121}122 123.my-invite-card__actions {124  display: flex;125  gap: 0.75rem;126  margin-top: 1.125rem;127  flex-wrap: wrap;128}129 130.my-invite-card__btn {131  padding: 0.625rem 1rem;132}133 134.my-invite-card__btn:hover:not(:disabled) {135  transform: translateY(-0.0625rem);136}137 138.my-invite-card__btn:disabled {139  opacity: 0.65;140  cursor: wait;141}142 143.my-invites__empty {144  min-height: 11.25rem;145  display: flex;146  align-items: center;147  justify-content: center;148  color: var(--muted);149  text-align: center;150  padding: 1.25rem;151}152 153@media (max-width: 40rem) {154  .my-invites {155    padding: 1.5rem 1rem 3rem;156  }157 158  .my-invites__header {159    margin-bottom: 1.125rem;160  }161 162  .my-invite-card__top {163    flex-direction: column;164  }165 166  .my-invite-card__status {167    min-width: auto;168  }169}170