.inbox-page-heading {
  margin-bottom: var(--space-4);
}

.inbox-page-heading p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--target-size-touch);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.inbox-filter-bar {
  margin: 0 0 var(--space-6);
}

.inbox-filter-bar .search-field {
  flex: 1 1 20rem;
  width: auto;
  min-width: 16rem;
  max-width: 28rem;
}

.inbox-filter-bar .filter-bar__segments {
  flex: 0 1 auto;
}

.inbox-filter-bar .filter-bar__segments .inbox-period-filter {
  border-inline-start: 1px solid var(--color-border-subtle);
}

.inbox-filter-bar .inbox-period-filter select {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.inbox-filter-bar .inbox-period-filter.is-active select {
  box-shadow: inset 0 2px 0 var(--color-selected);
  background: var(--color-selected-bg);
  color: var(--color-selected-text);
}

.inbox-desktop-sort {
  margin-inline-start: auto;
}

.inbox-feed > .data-table-footer {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.inbox-filter-count {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.inbox-toolbar-actions,
.inbox-toolbar-sort {
  display: flex;
  align-items: center;
}

.inbox-toolbar-actions {
  gap: var(--space-2);
}

.inbox-mark-all {
  flex: 0 0 auto;
  min-height: var(--control-height-md);
  color: var(--color-link);
}

.inbox-double-check {
  display: inline-flex;
  align-items: center;
}

.inbox-topbar-mark-all {
  display: none;
}

.inbox-list {
  display: grid;
  gap: var(--space-6);
}

.inbox-group {
  display: grid;
  gap: var(--space-2);
}

.inbox-group-heading {
  margin: 0;
  padding-inline: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

.inbox-group-list {
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.inbox-row {
  display: grid;
  grid-template-columns: 0.5rem 2.75rem minmax(15rem, 1fr) minmax(16rem, 0.55fr) 1.5rem;
  align-items: center;
  gap: var(--space-3);
  min-height: 5rem;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  text-align: left;
  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
}

.inbox-row:last-child {
  border-bottom: 0;
}

.inbox-row:hover,
.inbox-row:focus-visible {
  background: var(--color-surface-hover);
}

.inbox-row.is-unread {
  background: var(--color-selected-surface);
  box-shadow: inset 3px 0 var(--color-selected);
}

.inbox-row.is-unread:hover,
.inbox-row.is-unread:focus-visible {
  background: var(--color-selected-bg);
}

.inbox-unread-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: transparent;
}

.inbox-row.is-unread .inbox-unread-dot {
  background: var(--color-selected);
}

.inbox-entity-icon {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  place-items: center;
}

.inbox-entity-icon--task {
  background: var(--color-status-info-bg);
  color: var(--color-status-info-text);
}

.inbox-entity-icon--project {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
}

.inbox-entity-icon--incident {
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger-text);
}

.inbox-feed-copy {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
}

.inbox-entity {
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-reference {
  overflow: hidden;
  font-family: var(--font-mono);
  text-overflow: ellipsis;
}

.inbox-title {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row:not(.is-unread) .inbox-title {
  font-weight: var(--font-weight-semibold);
}

.inbox-change {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  white-space: nowrap;
}

.inbox-event {
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-change-detail {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.inbox-change-detail del,
.inbox-change-detail ins {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.inbox-change-detail del {
  background: var(--color-surface-panel);
}

.inbox-change-detail ins {
  background: var(--color-selected-bg);
  color: var(--color-selected-text);
}

.inbox-feed-meta {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 7rem;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
}

.inbox-context {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.inbox-context > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-context .avatar {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
}

.inbox-feed-meta time {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inbox-row-chevron {
  display: inline-grid;
  color: var(--color-text-muted);
  place-items: center;
}

@media (max-width: 62rem) {
  .inbox-row {
    grid-template-columns: 0.5rem 2.75rem minmax(13rem, 1fr) minmax(13rem, 0.55fr) 1.5rem;
  }

  .inbox-feed-meta {
    grid-template-columns: minmax(7rem, 1fr) 5.5rem;
  }

  .inbox-filter-bar .filter-bar__controls {
    flex-wrap: wrap;
  }

  .inbox-filter-bar .search-field {
    max-width: none;
  }
}

@media (max-width: 46rem) {
  .page.inbox-page {
    padding-top: var(--space-1);
  }

  .inbox-page-heading {
    display: none;
  }

  .topbar .button-primary.inbox-topbar-mark-all {
    display: inline-grid;
    width: var(--target-size-touch);
    min-width: var(--target-size-touch);
    height: var(--target-size-touch);
    min-height: var(--target-size-touch);
    padding: 0;
    border-radius: 50%;
    background: transparent;
    place-items: center;
  }

  .topbar .button-primary.inbox-topbar-mark-all:hover {
    background: transparent;
  }

  .topbar .button-primary.inbox-topbar-mark-all .inbox-double-check {
    box-sizing: border-box;
    display: inline-grid;
    width: var(--control-height-md);
    height: var(--control-height-md);
    border-radius: 50%;
    background: var(--color-action-primary);
    color: var(--color-action-primary-text);
    place-content: center;
    transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
  }

  .topbar .button-primary.inbox-topbar-mark-all:hover .inbox-double-check {
    background: var(--color-action-primary-hover);
  }

  .topbar .button-primary.inbox-topbar-mark-all:disabled .inbox-double-check {
    background: var(--color-surface-panel);
    color: var(--color-text-muted);
  }

  .inbox-toolbar {
    display: block;
    margin-bottom: var(--space-3);
  }

  .inbox-filter {
    width: 100%;
    min-width: 0;
    min-height: var(--target-size-touch);
  }

  .inbox-filter button {
    min-height: var(--target-size-touch);
    padding-inline: var(--space-2);
    gap: var(--space-1);
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-md);
  }

  .inbox-filter button.is-active {
    border-bottom-color: var(--color-selected);
  }

  .inbox-filter-count {
    display: inline-grid;
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding-inline: var(--space-1);
    border-radius: 999px;
    background: var(--color-surface-panel);
    color: var(--color-text-muted);
    place-items: center;
  }

  .inbox-mark-all {
    display: none;
  }

  .inbox-toolbar-actions {
    display: none;
  }

  .inbox-filter-bar {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-2);
    border: 0;
    background: transparent;
  }

  .inbox-filter-bar .filter-bar__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .inbox-filter-bar .search-field {
    width: 100%;
    min-width: 0;
    min-height: var(--target-size-touch);
    padding-inline: var(--space-3);
    border-color: var(--color-border-strong);
    border-radius: var(--radius-lg);
  }

  .inbox-filter-bar .search-field input {
    height: calc(var(--target-size-touch) - 2px);
    font-size: var(--font-size-md);
  }

  .inbox-filter-bar .search-field .search-clear {
    width: var(--target-size-touch);
    height: var(--target-size-touch);
    min-width: var(--target-size-touch);
    min-height: var(--target-size-touch);
  }

  .inbox-filter-bar .filter-bar__segments,
  .inbox-desktop-sort {
    display: none;
  }

  .mobile-filter-toolbar.inbox-mobile-filter-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inbox-filter-bar .filter-bar__meta {
    align-items: center;
    padding-inline: 0;
  }

  .inbox-filter-bar .filter-bar__chips {
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }

  .inbox-filter-bar .filter-bar__actions {
    flex: 0 0 auto;
  }

  .mobile-filter-sheet-field .inbox-period-filter,
  .mobile-filter-sheet-field .inbox-period-filter select {
    width: 100%;
  }

  .mobile-filter-sheet-field .inbox-period-filter select {
    min-height: var(--target-size-touch);
    padding-inline: var(--space-3) var(--space-8);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
  }

  .inbox-row {
    grid-template-columns: 0.5rem 2.5rem minmax(0, 1fr) 1.5rem;
    grid-template-areas:
      "dot icon copy chevron"
      ". icon meta chevron";
    align-items: start;
    min-height: 0;
    padding: var(--space-3);
  }

  .inbox-row > .inbox-unread-dot {
    grid-area: dot;
    margin-top: 1.05rem;
  }

  .inbox-entity-icon {
    grid-area: icon;
    width: 2.5rem;
    height: 2.5rem;
  }

  .inbox-feed-copy {
    grid-area: copy;
  }

  .inbox-title,
  .inbox-event {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .inbox-change {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    overflow: visible;
    white-space: normal;
  }

  .inbox-feed-meta {
    display: flex;
    grid-area: meta;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
  }

  .inbox-context {
    font-size: var(--font-size-xs);
  }

  .inbox-context .avatar {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
  }

  .inbox-feed-meta time::before {
    margin-inline-end: var(--space-2);
    content: "·";
  }

  .inbox-row-chevron {
    grid-area: chevron;
    align-self: center;
  }
}

@media (max-width: 340px) {
  .inbox-filter button {
    padding-inline: var(--space-1);
    font-size: var(--font-size-sm);
  }
}