/* /data-quality page only: every class starts with dq- (layouts/data_quality_layout.py). */

.dq-badges { display: flex; flex-direction: column; gap: 6px; }
.dq-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* A badge is a button: no browser chrome, a visible ring when selected or focused. */
.dq-badge {
  all: unset;
  display: inline-flex;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px;
  line-height: 0;
}
.dq-badge:hover { box-shadow: 0 0 0 1px #A6A6A6; }
.dq-badge.dq-selected { box-shadow: 0 0 0 2px #800000; }
.dq-badge:focus-visible,
.dq-cell:focus-visible { outline: 2px solid #800000; outline-offset: 2px; }

/* The venue x source grid: a label column, then the four per-instrument sources. */
.dq-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(118px, 1fr));
  gap: 4px;
  max-width: 980px;
}
.dq-grid-corner,
.dq-grid-head {
  font-size: 12px;
  font-weight: 600;
  color: #737373;
  padding: 2px 10px;
  align-self: end;
}
.dq-grid-venue {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid #EDEDED;
}
.dq-grid-venue-name { font-size: 13px; font-weight: 600; color: #2E2E2E; }
.dq-grid-venue-n { font-size: 11px; color: #737373; font-variant-numeric: tabular-nums; }

.dq-cell {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
}
.dq-cell-word { font-weight: 600; }
.dq-cell-count { font-size: 11px; font-variant-numeric: tabular-nums; }
.dq-cell:hover { border-color: currentColor; }
.dq-cell.dq-selected { border: 2px solid #800000; padding: 5px 9px; }

/* The same tints as the table cells (_STATUS_CELL); the icon and the word carry the status too. */
.dq-cell--ok { background: #EAF0EA; color: #275D38; }
.dq-cell--warn { background: #FBF2DA; color: #7A5A00; }
.dq-cell--fail { background: #F6E4E5; color: #A4343A; }
.dq-cell--unknown { background: #FAFAFA; color: #737373; font-style: italic; border-color: #D9D9D9; }
.dq-cell--na { background: transparent; color: #A6A6A6; border-color: #EDEDED; }
.dq-cell--empty { cursor: default; }

.dq-filter { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dq-filter-note { border-left: 3px solid #800000; padding-left: 10px; }
.dq-filter-note:empty { display: none; }

@media (max-width: 760px) {
  .dq-grid { grid-template-columns: minmax(90px, 1fr) repeat(4, minmax(92px, 1fr)); overflow-x: auto; }
  .dq-cell { grid-template-columns: 14px 1fr; }
  .dq-cell-count { grid-column: 2; }
}