/* =====================================================================
   FX Utilities — Document Control
   =====================================================================
   Loaded after the module's shared styles.css, so only the pieces this
   system has that the others do not live here: the register's flags, the
   PDF frame, and the role badge.
   ===================================================================== */

.role-badge {
  padding: 3px 10px;
  margin-right: 10px;
  font-size: 0.78em;
  font-weight: 600;
  border-radius: 999px;
  background: var(--blue-light, #dce6f1);
  color: var(--navy, #1f3864);
  white-space: nowrap;
}

.count-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 6px;
  font-size: 0.78em;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background: var(--action, #c9241c);
  color: #fff;
}
.count-badge:empty, .count-badge:has(:empty) { display: none; }

.card-head-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 16px;
}
.card-head-row h3 { margin: 0; }

.filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 12px 0;
}
.filter-row input[type="search"] { flex: 1 1 240px; min-width: 0; }
.filter-row .check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pill {
  padding: 3px 10px; font-size: 0.82em; border-radius: 999px;
  background: var(--grey-light, #f3f4f6); color: var(--ink-muted, #5b6472);
}
.pill-bad     { background: var(--red-bg, #fbe9e7);    color: var(--red, #b3261e);    font-weight: 600; }
.pill-warn,
.pill-soon,
.pill-none    { background: var(--orange-bg, #ffe9d1); color: var(--orange, #b25e09); font-weight: 600; }
.pill-overdue { background: var(--red-bg, #fbe9e7);    color: var(--red, #b3261e);    font-weight: 600; }
.pill-pending { background: var(--blue-light, #dce6f1); color: var(--navy, #1f3864);  font-weight: 600; }

/* The register's review column. Colour is never the only signal — each
   flag carries its own words, so it still reads in a printed register and
   for anyone who cannot separate the hues. */
.flag { font-size: 0.86em; white-space: nowrap; }
.flag-ok      { color: var(--ink-muted, #5b6472); }
.flag-soon    { color: var(--orange, #b25e09); font-weight: 600; }
.flag-overdue { color: var(--red, #b3261e);    font-weight: 600; }
.flag-none    { color: var(--orange, #b25e09); }
.flag-pending { color: var(--navy, #1f3864);   font-weight: 600; }

tr.row-pending td { background: #f4f8fd; }

td.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; white-space: nowrap; }
td.num  { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.pad  { padding: 20px 12px; }

/* Tall enough to actually read a policy in, and it is the point of the
   page, so it gets the room. */
.pdf-frame {
  width: 100%;
  height: min(78vh, 900px);
  margin-top: 12px;
  border: 1px solid var(--border, #e2e5ea);
  border-radius: var(--radius, 8px);
  background: #fff;
}

.plain-list { margin: 8px 0 0; padding-left: 20px; }
.plain-list li { margin-bottom: 8px; }

.full-width { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .pdf-frame { height: 60vh; }
}

/* The document-standard check, shown under an upload before it can be
   submitted. Deliberately not a toast: it is a list someone has to read and
   act on, and a toast that clears itself after four seconds is the wrong
   shape for that. */
.check-panel {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border, #e2e5ea);
  border-radius: var(--radius, 8px);
  background: var(--grey-light, #f7f8fa);
}
.check-head { margin: 0 0 8px; font-size: 1em; }
.check-pass { color: #1a6b38; }
.check-fail { color: var(--red, #b3261e); }
.check-sub { margin: 12px 0 4px; font-size: 0.88em; }
.check-list { margin: 0; padding-left: 20px; }
.check-list li { margin-bottom: 5px; }
.check-list-bad li { color: var(--red, #b3261e); }
.check-list-warn li { color: var(--orange, #b25e09); }
.check-table { width: auto; margin-top: 6px; font-size: 0.9em; }
.check-table td { padding: 3px 14px 3px 0; }

/* ---------------- Read acknowledgement, register column ----------------
   One line, always. The count and the "have I read it" marker used to be a
   number followed by a pill, which wrapped in a narrow column and made every
   row in a 600-row register two lines tall — the rows stopped lining up and
   the table became hard to scan.

   The marker is deliberately quiet. Not having read a document is the normal
   state, not an exception, and colouring six hundred of them amber competes
   with the Review column, where amber has to mean something. */
.data-table .ack-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.data-table .ack-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.data-table .ack-you {
  font-size: 0.82em;
  color: var(--ink-muted, #5b6472);
}
.data-table .ack-cell.ack-mine .ack-you {
  color: var(--green, #1e7b34);
  font-weight: 600;
}

/* Amber only while somebody is actually outstanding on required reading —
   the one case where the Read column is asking to be acted on. */
.data-table .ack-cell.ack-owing .ack-count { color: var(--orange, #b25e09); }
.data-table .ack-cell.ack-owing .ack-you { color: var(--orange, #b25e09); }

/* The people picker. A plain column of checkboxes runs off the bottom of the
   screen once there are thirty of them; columns keep it scannable. */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 16px;
  margin: 8px 0 16px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border, #dcdfe4);
  border-radius: 6px;
}
/* Each person: the tick, then the name over the address. min-width:0 on both
   the label and the text block is what actually lets them truncate — a flex
   item defaults to min-width:auto and refuses to shrink below its content, so
   without it a long address pushes straight out of the column and over its
   neighbour however much overflow is set. */
.check-grid .check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 3px 0;
}
.check-grid .check > input { flex: none; margin-top: 3px; }
.check-grid .req-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.check-grid .req-name,
.check-grid .req-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.check-grid .req-email { font-size: 0.82em; color: var(--ink-muted, #5b6472); }

/* ---------------- The register table ----------------
   661 rows, so the difference between a one-line row and a two-line row is
   the difference between a table you can scan and one you scroll through.

   table-layout: fixed makes the browser honour the widths below instead of
   sizing every column by its longest cell — which is what gave a 300px Code
   column holding "COSHH01" while "H & S Advisor" wrapped in a narrow Owner
   column beside it. Document has no width and takes whatever is left, since
   it is the only column whose content really varies. */
.data-table.reg-table { table-layout: fixed; }
.data-table.reg-table .col-code   { width: 108px; }
.data-table.reg-table .col-cat    { width: 118px; }
.data-table.reg-table .col-ver    { width: 74px; }
.data-table.reg-table .col-owner  { width: 176px; }
.data-table.reg-table .col-review { width: 156px; }
.data-table.reg-table .col-read   { width: 100px; }
.data-table.reg-table .col-status { width: 104px; }
.data-table.reg-table .col-open   { width: 78px; }

/* Everything except the document name is short and known; letting those wrap
   buys nothing and costs a second line on every row. The name itself still
   wraps — truncating a document title in a controlled-document register is
   worse than a tall row. */
.data-table.reg-table td,
.data-table.reg-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-table.reg-table td:nth-child(2) { white-space: normal; }

/* Tighter rows. With the wrapping gone the old 8px top and bottom left the
   rows looking padded out rather than airy. */
.data-table.reg-table td { padding: 6px 10px; }
.data-table.reg-table th { padding: 7px 10px; }

/* Under about 1100px the fixed widths stop fitting, so the table scrolls
   sideways inside its own container rather than crushing every column. */
@media (max-width: 1180px) {
  .data-table.reg-table { min-width: 1120px; }
}

/* The table's own scroll container. Without this the register's min-width
   below 1100px would scroll the whole PAGE sideways — topbar, sidebar and
   all — rather than just the table. */
.grid-wrap { overflow-x: auto; }

/* ---------------- The summary pills, as filters ----------------
   Each figure above the register filters it to the documents it counted.
   They are <button>s, so they need the type resetting to look like the pills
   they were, and they need to LOOK pressable — a number that does something
   when clicked but reads as a label is a control nobody finds. */
.pill-btn {
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.82em;
  font-weight: inherit;
  cursor: pointer;
  line-height: 1.5;
}
.pill-btn:hover { filter: brightness(0.95); }
.pill-btn:focus-visible { outline: 2px solid var(--navy, #1f3864); outline-offset: 2px; }

/* The selected one. A ring rather than a colour change, so the pill keeps the
   red or amber that says what it counts while still showing it is on. */
.pill-btn.pill-on {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* ---------------- Tidy the register ----------------

   Shown only when rows have outlived their documents, which should be
   never — so it is styled as a repair that wants attention, not as part
   of the furniture. Amber rather than red: nothing here is broken, the
   register has simply fallen behind the library and can be put right. */
.tidy-panel {
  border-left: 4px solid var(--amber, #b26a00);
  background: var(--amber-bg, #fff6e5);
}
.tidy-panel h4 { margin: 0 0 4px; }
.tidy-breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* The part a person has to decide about. Given its own box because it is
   the only reason not to simply press the button, and it should not read
   as one more line of explanation. */
.tidy-warning {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--amber, #b26a00);
  font-size: 0.92em;
  line-height: 1.5;
}
.tidy-warning code { word-break: break-word; }

.tidy-list { margin-top: 12px; max-height: 420px; overflow: auto; }
.tidy-list .data-table { font-size: 0.9em; }