/* Office Reports page. Tokens only; no inline styles (strict CSP), so the
   chart is styled by class, not style attributes. */

.reports .sub { color: var(--muted); margin: 0 0 var(--sp-4); }

.reports .pickers { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.reports .pick {
  flex: 1 1 210px; min-width: 190px; text-align: left; font: inherit; cursor: pointer;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--card-shadow);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.reports .pick:hover { transform: translateY(-2px); }
.reports .pick.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--card-shadow); }
.reports .pick .t { font-weight: 800; color: var(--ink); }
.reports .pick .d { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; line-height: 1.45; }

.reports .filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.reports .field { display: flex; flex-direction: column; gap: 4px; }
.reports .field label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.reports .field select, .reports .field input, .reports .field .facbtn {
  font: inherit; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 38px;
}
.reports .field .facbtn { cursor: pointer; text-align: left; min-width: 200px; }
.reports .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.reports .chip {
  font-size: var(--fs-xs); font-weight: 700; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; min-height: 32px;
}
.reports .chip.on { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.reports .grow { margin-left: auto; }
.reports .exports { display: flex; gap: var(--sp-2); align-items: flex-end; }
.reports .exportbtn { display: inline-flex; align-items: center; gap: 6px; }

.reports .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.reports .tile { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); box-shadow: var(--card-shadow); }
.reports .tile .k { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.reports .tile .v { font-size: 1.6rem; font-weight: 800; margin-top: 3px; line-height: 1.1; }
.reports .tile .s { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }
.reports .tile.accent .v { color: var(--brand); }
.reports .tile.err .v { color: var(--err); }
.reports .tile.ok .v { color: var(--ok); }
.reports .tile.warn .v { color: var(--warn); }

.reports .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.reports .panel h2 { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 2px; }
.reports .panel .cap { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }

.reports .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.reports table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.reports th, .reports td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.reports th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; background: var(--surface-2); position: sticky; top: 0; }
.reports th.num, .reports td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reports tbody tr:hover { background: var(--surface-2); }
.reports tr.tot td { font-weight: 800; border-top: 2px solid var(--card-line); background: var(--surface-2); }
.reports .empty { color: var(--muted); padding: var(--sp-5); text-align: center; }

/* chart: horizontal bars, geometry via attributes, colour via classes */
.reports .chart-host { max-height: 460px; overflow-y: auto; }
.reports .rchart { width: 100%; height: auto; display: block; }
.reports .rchart .bar { fill: var(--brand); }
.reports .rchart .bar.ok { fill: var(--ok); }
.reports .rchart .lbl { fill: var(--muted); font-size: 11px; }
.reports .rchart .val { fill: var(--ink); font-size: 11px; font-weight: 700; }

/* pagination controls */
.reports .pager { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.reports .pager .grow { margin-left: auto; }
.reports .pager .pinfo { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.reports .pager select { font: inherit; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.reports .btn.sm { min-height: 32px; padding: 5px 12px; font-size: var(--fs-sm); }

/* single-order timeline */
.reports .timeline { position: relative; margin: var(--sp-2) 0 0; padding-left: 22px; }
.reports .timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.reports .tevent { position: relative; padding: 8px 0; }
.reports .tevent::before { content: ""; position: absolute; left: -19px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
.reports .tevent.done::before { background: var(--ok); }
.reports .tevent.mod::before { background: var(--ex-art); }
.reports .tevent .th { font-weight: 700; font-size: var(--fs-sm); }
.reports .tevent .tm { font-size: var(--fs-xs); color: var(--muted); font-family: var(--mono); }
.reports .tevent .de { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

.reports .activity { margin-top: var(--sp-6); }
.reports .activity .cap { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }

/* facility picker modal checklist */
.facpick .list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: var(--sp-2) 0; }
.facpick label { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-2); border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; }
.facpick label:hover { background: var(--surface-2); }
.facpick .search { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); }