.project-filters {
  grid-template-columns:
    minmax(
      240px,
      1fr
    )
    minmax(
      160px,
      210px
    )
    auto
    auto;
}

.project-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;
}

.project-metrics article {
  display:
    grid;

  min-height:
    105px;

  align-content:
    center;

  gap:
    7px;
}

.project-metrics span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.1em;
}

.project-metrics strong {
  color:
    var(
      --text
    );

  font-family:
    monospace;

  font-size:
    30px;
}

.project-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    18px;
}

.project-card {
  position:
    relative;

  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  padding:
    22px;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --border
    );

  border-radius:
    var(
      --radius-md
    );

  background:
    var(
      --surface
    );

  transition:
    border-color
    var(
      --transition
    ),
    transform
    var(
      --transition
    );
}

.project-card:hover {
  border-color:
    var(
      --border-strong
    );

  transform:
    translateY(
      -2px
    );
}

.project-card__line {
  position:
    absolute;

  top:
    0;

  left:
    22px;

  width:
    55px;

  height:
    3px;

  background:
    var(
      --project-color
    );
}

.project-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    15px;
}

.project-card__identity {
  display:
    flex;

  min-width:
    0;

  align-items:
    center;

  gap:
    12px;
}

.project-card__icon {
  display:
    grid;

  width:
    45px;

  height:
    45px;

  flex:
    0 0
    45px;

  place-items:
    center;

  border:
    1px solid
    var(
      --project-color
    );

  background:
    color-mix(
      in srgb,
      var(
        --project-color
      )
      10%,
      transparent
    );

  color:
    var(
      --project-color
    );
}

.project-card__icon svg {
  width:
    20px;

  height:
    20px;
}

.project-card__identity > div {
  min-width:
    0;
}

.project-card__identity > div > span {
  color:
    var(
      --project-color
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.11em;
}

.project-card__identity h3 {
  margin:
    5px
    0
    0;

  overflow:
    hidden;

  color:
    var(
      --text
    );

  font-size:
    19px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.project-card__description {
  display:
    -webkit-box;

  min-height:
    63px;

  margin:
    19px
    0;

  overflow:
    hidden;

  color:
    var(
      --text-secondary
    );

  line-height:
    1.6;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;
}

.project-card__metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  border-top:
    1px solid
    var(
      --border
    );

  border-left:
    1px solid
    var(
      --border
    );
}

.project-card__metrics article {
  display:
    grid;

  min-width:
    0;

  gap:
    5px;

  padding:
    12px;

  border-right:
    1px solid
    var(
      --border
    );

  border-bottom:
    1px solid
    var(
      --border
    );

  background:
    var(
      --background-secondary
    );
}

.project-card__metrics span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.07em;
}

.project-card__metrics strong {
  color:
    var(
      --text
    );

  font-family:
    monospace;

  font-size:
    19px;
}

.project-card__activity {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    15px;

  color:
    var(
      --text-muted
    );

  font-size:
    11px;
}

.project-card__activity svg {
  width:
    14px;

  height:
    14px;

  color:
    var(
      --project-color
    );
}

.project-card__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    auto;

  padding-top:
    20px;
}

.project-delete {
  color:
    var(
      --danger
    );
}

.project-loading,
.project-empty {
  grid-column:
    1 /
    -1;

  padding:
    55px;

  border:
    1px solid
    var(
      --border
    );

  background:
    var(
      --surface
    );

  color:
    var(
      --text-muted
    );

  text-align:
    center;
}

.project-color-field {
  display:
    grid;

  grid-template-columns:
    58px
    minmax(
      0,
      1fr
    );

  gap:
    8px;
}

.project-color-field input[type="color"] {
  width:
    58px;

  min-height:
    48px;

  padding:
    4px;
}

.project-detail {
  display:
    grid;

  gap:
    18px;
}

.project-detail__header {
  display:
    grid;

  grid-template-columns:
    5px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    start;

  gap:
    15px;

  padding-bottom:
    20px;

  border-bottom:
    1px solid
    var(
      --border
    );
}

.project-detail__indicator {
  width:
    5px;

  height:
    100%;

  min-height:
    85px;

  background:
    var(
      --project-color
    );
}

.project-detail__header > div:nth-child(2) > span {
  color:
    var(
      --project-color
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.11em;
}

.project-detail__header h3 {
  margin:
    6px
    0;

  color:
    var(
      --text
    );

  font-size:
    24px;
}

.project-detail__header p {
  margin:
    0;

  color:
    var(
      --text-secondary
    );

  line-height:
    1.6;

  white-space:
    pre-wrap;
}

.project-detail__metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  border-top:
    1px solid
    var(
      --border
    );

  border-left:
    1px solid
    var(
      --border
    );
}

.project-detail__metrics article {
  display:
    grid;

  gap:
    5px;

  padding:
    13px;

  border-right:
    1px solid
    var(
      --border
    );

  border-bottom:
    1px solid
    var(
      --border
    );

  background:
    var(
      --background-secondary
    );
}

.project-detail__metrics span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    8px;
}

.project-detail__metrics strong {
  color:
    var(
      --text
    );

  font-family:
    monospace;

  font-size:
    21px;
}

.project-detail__tabs {
  display:
    flex;

  gap:
    5px;

  overflow-x:
    auto;

  border-bottom:
    1px solid
    var(
      --border
    );
}

.project-detail__tabs button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    11px
    14px;

  border:
    0;

  border-bottom:
    2px solid
    transparent;

  background:
    transparent;

  color:
    var(
      --text-muted
    );

  white-space:
    nowrap;
}

.project-detail__tabs button.is-active {
  border-bottom-color:
    var(
      --primary
    );

  color:
    var(
      --primary
    );
}

.project-detail__tabs svg {
  width:
    15px;

  height:
    15px;
}

.project-detail__panel[hidden] {
  display:
    none;
}

.project-detail__list,
.project-email-list {
  display:
    grid;

  gap:
    8px;
}

.project-detail__list article {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    13px;

  border:
    1px solid
    var(
      --border
    );

  background:
    var(
      --background-secondary
    );
}

.project-detail__list article > div {
  display:
    grid;

  min-width:
    0;

  gap:
    3px;
}

.project-detail__list article span,
.project-detail__list article small {
  color:
    var(
      --text-muted
    );

  font-size:
    11px;
}

.project-detail__empty,
.project-detail__loading {
  padding:
    35px;

  border:
    1px solid
    var(
      --border
    );

  background:
    var(
      --background-secondary
    );

  color:
    var(
      --text-muted
    );

  text-align:
    center;
}

.project-email-item {
  display:
    grid;

  grid-template-columns:
    4px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    13px;

  border:
    1px solid
    var(
      --border
    );

  background:
    var(
      --background-secondary
    );
}

.project-email-item__indicator {
  width:
    4px;

  height:
    42px;
}

.project-email-item__main,
.project-email-item__meta {
  display:
    grid;

  gap:
    4px;
}

.project-email-item__main {
  min-width:
    0;
}

.project-email-item__main strong {
  overflow:
    hidden;

  color:
    var(
      --text
    );

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.project-email-item__main span,
.project-email-item__meta small {
  overflow:
    hidden;

  color:
    var(
      --text-muted
    );

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.project-email-item__meta {
  justify-items:
    end;
}

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

  .project-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}

@media (
  max-width:
    780px
) {
  .project-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        150px,
        190px
      );
  }

  .project-detail__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}

@media (
  max-width:
    600px
) {
  .project-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .project-metrics {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .project-metrics article {
    min-height:
      82px;
  }

  .project-card {
    padding:
      17px;
  }

  .project-card__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .project-card__actions {
    flex-wrap:
      wrap;
  }

  .project-card__actions .button {
    flex:
      1;
  }

  .project-detail__header {
    grid-template-columns:
      5px
      minmax(
        0,
        1fr
      );
  }

  .project-detail__header > .status {
    grid-column:
      2;
  }

  .project-email-item {
    grid-template-columns:
      4px
      minmax(
        0,
        1fr
      );
  }

  .project-email-item__meta {
    grid-column:
      2;

    justify-items:
      start;
  }
}