/* ---------- Reports: the queue tabs, list rows and the report's page ---------- */

/* Inbox · Sterilisation · Treatment… : a row of tabs that scrolls sideways on phones */
.tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  border-bottom: var(--border);
  scrollbar-width: thin;
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;

  &:hover {
    color: var(--color-text);
  }

  &[aria-current="page"] {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary-text);
  }
}

.tabs__count {
  min-width: 1.25rem;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-xs);
  text-align: center;
}

.report-list {
  padding: 0;
  list-style: none;
}

.report-row + .report-row {
  border-top: var(--border);
}

.report-row__link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;

  &:hover {
    background: var(--color-surface-hover);
  }
}

.report-row__thumb {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-text-subtle);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  > svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* On phones the status drops below, since three columns don't fit */
  @media (max-width: 48rem) {
    width: 4rem;
    height: 4rem;
  }
}

.report-row__photo-count {
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-1);
  min-width: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: rgb(0 0 0 / 65%);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.report-row__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.report-row__kind {
  font-weight: var(--weight-semibold);
}

.report-row__description {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.report-row__match {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* What was searched, within a row */
.report-row mark {
  border-radius: var(--radius-xs);
  background: var(--color-warning-border);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.report-row__meta {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.report-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);

  @media (max-width: 48rem) {
    flex-direction: row;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* In a page's sidebar there's no room for three columns: as on a phone */
aside .report-row__thumb {
  width: 4rem;
  height: 4rem;
}

aside .report-row__side {
  flex-direction: row;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
}

/* A report's colony and cat, changed right on its page */
.report-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.report-description {
  font-size: var(--text-md);
}

/* The comment takes the room left, then the status and its button; one under another on a phone */
.status-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, auto) auto;
  gap: var(--space-3);
  align-items: end;

  @media (max-width: 48rem) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.assign-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Status changes and assignments are quieter dots than comments */
.timeline__item--status_change::before,
.timeline__item--assignment::before {
  background: var(--color-text-subtle);
}

/* Reports on the map: an orange dot */
.map-marker--report {
  background: var(--color-warning);
}

.map-marker--shelter {
  background: var(--color-info);
  border-radius: 4px;
}

/* ---------- reports#index: the queues on the left, the list on the right ---------- */

.reports-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.queue-nav {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.queue-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: 0;
  list-style: none;
}

.queue-nav__label {
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.queue-nav__end {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border);
}

.queue-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;

  &:hover {
    background: var(--color-surface-hover);
  }

  &[aria-current="page"] {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-weight: var(--weight-medium);
  }
}

/* A queue with nothing waiting: still there, but quiet */
.queue-nav__link--empty:not([aria-current="page"]) {
  color: var(--color-text-subtle);
}

.queue-nav__count {
  min-width: 1.5rem;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
}

.queue-nav__link[aria-current="page"] .queue-nav__count {
  background: var(--color-primary);
  color: #fff;
}

/* All the filters in one row where they fit, the colony's long names with the most room, and the queues' short ones
   giving up some. On narrower windows they wrap instead of squeezing */
@media (min-width: 80rem) {
  .reports-layout {
    grid-template-columns: 12rem minmax(0, 1fr);
  }

  .reports-layout .filters {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 1fr 1.3fr;
  }

  .reports-layout .filters__search {
    max-width: none;
  }

  .reports-layout .filters__select {
    width: 100%;
    min-width: 0;
  }
}

/* Tablets and phones: the queues become chips that wrap above the list (no sideways scrolling) */
@media (max-width: 64rem) {
  .reports-layout {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .queue-nav,
  .queue-nav__group,
  .queue-nav__end {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1-5);
  }

  .queue-nav__label {
    display: none;
  }

  .queue-nav__end {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .queue-nav__link {
    border: var(--border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    padding: var(--space-1) var(--space-3);
  }
}

/* An evaluation's questions: the question, then yes / no / not observed */
.evaluation-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: var(--border-width) solid var(--color-border);

  > legend {
    float: left;
    flex: 1 1 16rem;
    padding: 0;
    font-size: var(--text-sm);
  }
}


/* An adoption request's questionnaire (reports/_adoption_application): whole questions, so not the usual small
   uppercase labels; each section under its own heading */
.adoption-application {
  .card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .form-section-title {
    margin: 0 0 var(--space-3);
  }

  .details {
    gap: var(--space-3);
  }

  dt {
    font-size: var(--text-sm);
    text-transform: none;
    letter-spacing: normal;
  }

  dd p {
    margin: 0;
  }
}