/* Keep the same roster records and group their cells into compact cards on smaller screens. */
#list .sv-roster .row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: flex-start;
  gap: 6px;
}
#list .sv-roster .row-actions :is(button, summary) {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  white-space: normal;
}
#list .sv-roster .sv-row-more {
  min-width: 0;
  max-width: 100%;
}
#list .sv-roster .sv-row-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  list-style: none;
  cursor: pointer;
}
#list .sv-roster .sv-row-more > summary::-webkit-details-marker { display: none; }
#list .sv-roster .sv-row-more > summary::after { content: "▾" / ""; }
#list .sv-roster .sv-row-more[open] > summary::after { content: "▴" / ""; }
#list .sv-roster .sv-row-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
#list .sv-roster .sv-row-details .vb-book-buttons { margin: 0; }
#list .sv-roster :is(.sv-row-detail-note, .vb-notice) {
  flex-basis: 100%;
  color: #475569;
  font-size: 13px;
  overflow-wrap: anywhere;
}
#list .sv-roster .vb-book-summary {
  display: block;
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#list .sv-roster .vb-book-summary strong { font-size: 14px; }
#list .sv-roster .pill:not(.ok, .todo, .na) { background: #e8f0fb; color: #254b79; }

#list .sv-roster .sv-compact-meta { display: none; }

@media (min-width: 1081px) {
  #list table.sv-roster tr[data-visit-site] > td { padding: 8px 10px; }
  #list table.sv-roster tr[data-visit-site] > td:nth-child(5) { min-width: 0; }
  #list table.sv-roster tr[data-visit-site] > td.actcell { width: 200px; max-width: 200px; }
}

@media (max-width: 1080px) {
  #list table.sv.sv-roster {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  #list table.sv-roster thead { display: none; }
  #list table.sv-roster tbody { display: grid; gap: 9px; align-items: start; }
  #list table.sv.sv-roster tr[data-visit-site] {
    display: grid;
    grid-template-columns: 44px minmax(64px, 1fr) minmax(0, max-content);
    grid-template-areas:
      "pick site site"
      "schedule schedule schedule"
      "status status actions";
    align-items: center;
    gap: 5px 8px;
    min-width: 0;
    margin: 0;
    padding: 8px 11px 10px;
    border: 1px solid #dce3ec;
    border-left: 3px solid #d9b45a;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }
  #list table.sv.sv-roster tr.todo[data-visit-site]:has(> td[data-l="Scheduled"]:empty) {
    grid-template-areas: "pick site site" "status status actions";
  }
  #list table.sv.sv-roster tr.done[data-visit-site] {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, max-content);
    grid-template-areas: "site site site" "status date actions" "schedule schedule schedule";
    border-left-color: #39906a;
  }
  #list table.sv.sv-roster tr.done[data-visit-site]:has(.rsel) {
    grid-template-areas: "pick site site" "status date actions" "schedule schedule schedule";
  }
  #list table.sv.sv-roster tr.ns[data-visit-site] {
    grid-template-areas: "site site site" "schedule schedule schedule" "status status actions";
    border-left-color: #9aa7b9;
  }
  #list table.sv.sv-roster tr[data-visit-site]:has(.vb-book-summary) { border-left-color: #6e94c3; }
  #list table.sv.sv-roster tr.cross[data-visit-site] {
    border-left-color: #1d4ed8;
    background: #f4f7ff;
  }
  #list table.sv.sv-roster tr[data-visit-site]::before,
  #list table.sv.sv-roster tr[data-visit-site]::after { content: none; }

  #list table.sv.sv-roster tr[data-visit-site] > td {
    display: block;
    min-width: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    color: #35455c;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
    visibility: visible;
  }
  #list table.sv.sv-roster tr[data-visit-site] > td[data-l]::before {
    content: attr(data-l);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
  }
  #list table.sv.sv-roster tr[data-visit-site] > td:first-child { grid-area: pick; align-self: start; }
  #list table.sv.sv-roster tr[data-visit-site] > td:first-child:empty,
  #list table.sv.sv-roster tr[data-visit-site] > td:is([data-l="City"], [data-l="Supervisor"], [data-l="Members"]),
  #list table.sv.sv-roster tr[data-visit-site] > td.actcell:has(.row-actions:empty),
  #list table.sv.sv-roster tr:not(.done)[data-visit-site] > td[data-l="Visit date"],
  #list table.sv.sv-roster tr[data-visit-site] > td[data-l="Scheduled"]:empty { display: none; visibility: hidden; }

  #list table.sv.sv-roster tr[data-visit-site] > td[data-l="Host site"] { grid-area: site; }
  #list table.sv-roster td[data-l="Host site"] strong { color: #1c2941; font-size: 16px; }
  #list table.sv.sv-roster tr[data-visit-site] > td[data-l="Status"] { grid-area: status; }
  #list table.sv.sv-roster tr[data-visit-site] > td[data-l="Visit date"] { grid-area: date; white-space: nowrap; }
  #list table.sv.sv-roster tr[data-visit-site] > td[data-l="Scheduled"] { grid-area: schedule; }
  #list table.sv.sv-roster tr[data-visit-site] > td.actcell { grid-area: actions; }

  #list .sv-roster .sv-compact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    margin-top: 3px;
    color: #35455c;
  }
  #list .sv-roster .sv-meta-pair { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  #list .sv-roster .sv-meta-label { color: #56657b; font-size: 12px; font-weight: 650; }
  #list .sv-roster .sv-meta-pair:has(.windet) { flex: 1 0 100%; }
  #list .sv-roster .winbreak { min-width: 0; }
  #list table.sv-roster .route-pick { flex-direction: column; gap: 1px; }
  #list table.sv-roster .route-pick span { font-size: 12px; }
  #list table.sv-roster .notes-row { grid-column: 1 / -1; }
}
@media (max-width: 679px) {
  #list table.sv-roster .row-actions { gap: 4px; }
  #list table.sv-roster .row-actions > button,
  #list table.sv-roster .sv-row-more > summary { padding-inline: 7px; font-size: 13px; }
}
@media (max-width: 880px) {
  #list table.sv.sv-roster tr.done[data-visit-site] {
    grid-template-areas: "site site site" "status date date" "schedule schedule schedule" "actions actions actions";
  }
  #list table.sv.sv-roster tr.done[data-visit-site]:has(.rsel) {
    grid-template-areas: "pick site site" "status date date" "schedule schedule schedule" "actions actions actions";
  }
}
@media (max-width: 359px) {
  #list table.sv.sv-roster tr:is(.todo, .ns)[data-visit-site] {
    grid-template-areas: "pick site site" "schedule schedule schedule" "status status status" "actions actions actions";
  }
  #list table.sv.sv-roster tr.todo[data-visit-site]:has(> td[data-l="Scheduled"]:empty) {
    grid-template-areas: "pick site site" "status status status" "actions actions actions";
  }
  #list table.sv.sv-roster tr.ns[data-visit-site] {
    grid-template-areas: "site site site" "schedule schedule schedule" "status status status" "actions actions actions";
  }
}
@media (min-width: 680px) and (max-width: 1080px) {
  #list table.sv-roster tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#list table.sv.sv-roster tr[data-visit-site]:has(.rsel:checked) {
  outline: 2px solid #46668a; outline-offset: -2px; background: #f0f5fa;
}
#list table.sv-roster .route-pick span { color: #43556b; }