/* Trash Day (cv-trash) — this week's holiday-aware collection schedule.
   Same screen skeleton as report/lightning (.top-bar + .screen-body). */

cv-trash {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;

  & .screen-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
  }

  /* Week status banner: normal = calm, holiday = attention */
  & .cv-trash-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink);

    &.is-normal { border-inline-start: 4px solid var(--success); }
    &.is-shifted { border-inline-start: 4px solid var(--warning, #b45309); }
    & span { color: var(--ink-muted); font-size: 0.85rem; }
  }

  /* Mon–Thu schedule table */
  & .cv-trash-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  & .cv-trash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--space-2) var(--space-4);
    font-size: 0.9rem;
    color: var(--ink);

    & + .cv-trash-row { border-top: 1px solid var(--line); }
    &.is-shifted span:last-child { font-weight: 700; color: var(--warning, #b45309); }
  }
  & .cv-trash-head {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    background: color-mix(in srgb, var(--surface) 90%, var(--ink) 10%);
  }

  & .cv-trash-note {
    font-size: 0.8rem;
    color: var(--ink-muted);

    & a { color: var(--brand); }
  }
}

/* "My pickup day" — address/GPS lookup via the shared civic-services-es section */
cv-trash .cv-trash-mine {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);

  & .cv-trash-heading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
  }

  & .cv-trash-searchrow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);

    & input {
      min-width: 0;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      font: inherit;
      color: var(--ink);
      background: var(--surface);
    }
  }

  & .cv-trash-candidates {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  & .cv-trash-candidate {
    text-align: start;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;

    &:active { background: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%); }
  }

  & .cv-trash-personal {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
    font-size: 0.9rem;
    color: var(--ink);

    &.is-answer { border-inline-start: 4px solid var(--brand); }
    & a { color: var(--brand); }
  }

  /* The embedded shared section (light DOM) — restyle its plain markup to app tokens.
     Its own "Pickup Day" dl duplicates nothing: it is the raw lookup result; the
     personalized (holiday-shifted) line above is ours. */
  & civic-services-es {
    & h3, & > section > p { display: none; } /* app supplies the heading/prompt */
    & dl { margin: 0; font-size: 0.85rem; color: var(--ink-muted); }
    & dt { font-weight: 700; }
    & dd { margin: 0 0 var(--space-1) 0; }
    & a { color: var(--brand); }
  }
}