/* Facility Services PART 04 — Work Orders workspace */
.hc-fs-wo-page {
  --fs-wo-border: color-mix(in srgb, var(--hc-color-border, #d8dee8) 86%, transparent);
}

.hc-fs-wo-eligible,
.hc-fs-wo-filters,
.hc-fs-wo-page > [data-fs-wo-index] > section,
.hc-fs-wo-detail {
  margin-block-start: var(--hc-space-5, 1.25rem);
}

.hc-fs-wo-eligible-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--hc-space-3, 0.75rem);
}

.hc-fs-wo-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hc-space-3, 0.75rem);
  align-items: end;
}

.hc-fs-wo-filters label,
.hc-fs-wo-actions label {
  display: grid;
  gap: 0.35rem;
  color: var(--hc-color-text-muted, #536070);
  font-size: 0.82rem;
  font-weight: 700;
}

.hc-fs-wo-filters select,
.hc-fs-wo-filters input,
.hc-fs-wo-actions select,
.hc-fs-wo-actions textarea {
  inline-size: 100%;
  min-block-size: 2.75rem;
  border: 1px solid var(--fs-wo-border);
  border-radius: var(--hc-radius-md, 0.75rem);
  background: var(--hc-color-surface, #fff);
  color: var(--hc-color-text, #17202d);
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.hc-fs-wo-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-space-2, 0.5rem);
  grid-column: span 2;
}

.hc-fs-wo-list {
  padding: 0;
  overflow: hidden;
}

.hc-fs-wo-row {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr 0.8fr;
  gap: var(--hc-space-3, 0.75rem);
  border: 0;
  border-block-end: 1px solid var(--fs-wo-border);
  background: transparent;
  color: inherit;
  padding: 1rem;
  text-align: start;
  cursor: pointer;
}

.hc-fs-wo-row:last-child { border-block-end: 0; }
.hc-fs-wo-row:hover { background: color-mix(in srgb, var(--hc-color-primary, #17685b) 6%, transparent); }
.hc-fs-wo-row:focus-visible {
  outline: 3px solid var(--hc-color-primary, #17685b);
  outline-offset: -3px;
}
.hc-fs-wo-row span { display: grid; gap: 0.25rem; min-inline-size: 0; }
.hc-fs-wo-row strong,
.hc-fs-wo-row small { overflow-wrap: anywhere; }
.hc-fs-wo-row small { color: var(--hc-color-text-muted, #536070); }

.hc-fs-wo-back {
  margin-block-end: var(--hc-space-3, 0.75rem);
}

.hc-fs-wo-detail__heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.hc-fs-wo-status,
.hc-fs-wo-ready {
  display: inline-flex;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hc-color-primary, #17685b) 12%, transparent);
  color: var(--hc-color-primary, #17685b);
  padding: 0.45rem 0.7rem;
  font-weight: 800;
}

.hc-fs-wo-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hc-space-4, 1rem);
  margin-block-start: var(--hc-space-4, 1rem);
}

.hc-fs-wo-monitoring {
  margin-block-start: var(--hc-space-5, 1.25rem);
}

.hc-fs-wo-monitoring-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hc-space-4, 1rem);
}

.hc-fs-wo-monitoring-grid h4 {
  margin-block-start: 0;
}

.hc-fs-wo-facts { margin: 0; }
.hc-fs-wo-facts div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) 1.3fr;
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--fs-wo-border);
}
.hc-fs-wo-facts dt { color: var(--hc-color-text-muted, #536070); }
.hc-fs-wo-facts dd { margin: 0; overflow-wrap: anywhere; }

.hc-fs-blockers,
.hc-fs-wo-history {
  display: grid;
  gap: 0.55rem;
  padding-inline-start: 1.2rem;
}
.hc-fs-blockers li { display: grid; gap: 0.2rem; }
.hc-fs-blockers code { overflow-wrap: anywhere; }
.hc-fs-wo-history li { padding-inline-start: 0.2rem; }
.hc-fs-wo-history li span { display: block; color: var(--hc-color-text-muted, #536070); }

.hc-fs-wo-actions {
  margin-block-start: var(--hc-space-4, 1rem);
}
.hc-fs-wo-actions form {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(8rem, auto);
  gap: var(--hc-space-3, 0.75rem);
  align-items: end;
  margin-block-end: 1rem;
}
.hc-fs-wo-actions textarea { min-block-size: 5rem; resize: vertical; }

@media (max-width: 900px) {
  .hc-fs-wo-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-fs-wo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .hc-fs-wo-filters,
  .hc-fs-wo-row,
  .hc-fs-wo-detail-grid,
  .hc-fs-wo-monitoring-grid,
  .hc-fs-wo-actions form {
    grid-template-columns: 1fr;
  }
  .hc-fs-wo-filter-actions { grid-column: auto; }
  .hc-fs-wo-detail__heading { flex-direction: column; }
  .hc-fs-wo-facts div { grid-template-columns: 1fr; gap: 0.2rem; }
}