/* CM001 kit — queue.css (@layer cm.components)
 *
 * The dense operational queue table: a list somebody scans to decide what to do next, as opposed to
 * a register they browse. Built for the CM015 Job Orders board and reusable by any list with the same
 * job (work orders, helpdesk, PPM due list).
 *
 * Three things here are structural rather than decorative:
 *   1. table-layout:fixed + <colgroup>. Without it one long cell ("Elevators and Escalators") steals
 *      width from the description column and every row reflows. Auto layout makes column widths a
 *      function of the data, which is exactly wrong for a scannable list.
 *   2. A left priority rail whose WIDTH varies as well as its colour, so priority never depends on
 *      colour alone (the chip text "P1" carries it too).
 *   3. Single-line truncation with a title attribute, so a long breadcrumb lengthens nothing.
 */
@layer cm.components {

  .q-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }

  table.q { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; font-size: 13px; }

  /* No position:sticky on this header. overflow-x:auto forces the computed overflow-y to auto as well,
     which makes .q-wrap a scroll container; a sticky th would then stick to a box exactly as tall as
     itself and never engage — verified live, the header moved the full 400px with the page. Making it
     work would mean capping .q-wrap's height and nesting a second scroll region inside the page, which
     is not worth it for a 25-row page. */
  table.q thead th {
    text-align: start; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-2); font-weight: 700; white-space: nowrap;
    padding: 10px 12px; background: var(--surface-2);
    border-bottom: 1px solid var(--line);
  }

  table.q td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  table.q tbody tr:last-child td { border-bottom: 0; }

  /* ---- the priority rail -------------------------------------------------
   * Drawn as an inset box-shadow on the first cell so it costs no layout box and
   * cannot shift anything when it changes. Width encodes rank as well as colour. */
  table.q tbody td:first-child { position: relative; padding-inline-start: 16px; }
  table.q tbody td:first-child::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: var(--rail-w, 0px); background: var(--rail-c, transparent);
  }
  table.q tbody tr[data-pri="p1"] { --rail-w: 5px; --rail-c: var(--danger); }
  table.q tbody tr[data-pri="p2"] { --rail-w: 4px; --rail-c: var(--warn); }
  table.q tbody tr[data-pri="p3"] { --rail-w: 3px; --rail-c: var(--brand); }
  table.q tbody tr[data-pri="p4"] { --rail-w: 2px; --rail-c: var(--line-2, var(--line)); }

  /* A breached row is the one thing on this page that should interrupt scanning. Kept to a wash so
   * the chips on top of it keep their contrast; the Breached chip and the rail still carry the state. */
  table.q tbody tr.q-breach { background: color-mix(in srgb, var(--danger) 7%, transparent); }

  table.q tbody tr:hover { background: var(--surface-2); }
  table.q tbody tr.q-breach:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

  /* ---- cells ------------------------------------------------------------- */
  /* Secondary text sits on --text-2, never --text-3. Measured on this table, --text-3 scored 2.56:1 in
     the light theme and 3.64:1 in dark — both below the 4.5:1 floor for body text, and this is the row's
     supporting information (refs, location, who is on it), not decoration. */
  .q-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-2); }
  .q-title { display: block; font-weight: 600; color: var(--text); line-height: 1.35; }
  .q-sub { display: block; color: var(--text-2); font-size: 12px; line-height: 1.35; }

  /* One line, ellipsis, full value in title="". Long content must never make a row taller. */
  .q-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* The countdown is the most operationally important value on the row, so it gets weight and
     tabular figures (digits line up column-wise, which is what makes a time column scannable).
     Its urgency colours are blended toward --text for the same contrast reason as the chips. */
  .q-sla-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
  .q-sla-time.is-late { color: color-mix(in srgb, var(--danger) 62%, var(--text)); }
  .q-sla-time.is-soon { color: color-mix(in srgb, var(--warn) 62%, var(--text)); }
  /* A parked clock must not look like a running one. */
  .q-sla-time.is-paused { color: var(--text-2); font-weight: 600; }

  .q-none { color: var(--text-2); }

  /* ---- the row link ------------------------------------------------------
   * The ref is a REAL anchor, so the row has exactly one tab stop and one accessible
   * name. ::after stretches that anchor over the whole row for pointer users; the row
   * carries position:relative to contain it. No nested interactive elements. */
  table.q tbody tr { position: relative; }
  .q-go { color: inherit; text-decoration: none; }
  .q-go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .q-go:hover .q-title { text-decoration: underline; }
  .q-go:focus-visible { outline: none; }
  .q-go:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 4px; }

  /* Anything genuinely clickable inside the row must sit above the stretched overlay. */
  table.q tbody td a:not(.q-go), table.q tbody td button { position: relative; z-index: 2; }

  /* ---- narrow screens ----------------------------------------------------
   * Columns are hidden by priority rather than reflowed. A <th> is never given
   * display:block: that drops the cell out of its row (CM001 geometry trap) — so
   * visibility is done with display:none on matched th+td pairs, and the wrapper
   * keeps its horizontal scroll as the final fallback. */
  @media (max-width: 1100px) {
    table.q .c-where, table.q .c-where-c { display: none; }
  }
  @media (max-width: 900px) {
    table.q .c-trade, table.q .c-trade-c { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    table.q tbody tr { transition: none; }
  }
}

/* ---------------------------------------------------------------------------
 * The operational hub: the analytics strip that sits above a queue.
 *
 * Three panels on a desktop, stacking to one on a phone. It is deliberately
 * ABOVE the filters, because it describes the population you are about to
 * filter — putting it below would make it read as a summary of the result.
 * ------------------------------------------------------------------------- */
@layer cm.components {

  .joh { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); margin-bottom: 14px; overflow: hidden; }
  .joh-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line);
           background: var(--surface-2); font-weight: 700; font-size: 13px; }
  .joh-h .faint { font-weight: 500; }

  /* auto-fit rather than a fixed 3-up: the panels stay readable at any width
     without a media query per breakpoint. */
  .joh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .joh-cell { padding: 14px; border-inline-end: 1px solid var(--line); }
  .joh-cell:last-child { border-inline-end: 0; }
  @media (max-width: 860px) {
    .joh-cell { border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .joh-cell:last-child { border-bottom: 0; }
  }
  .joh-t { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2);
           font-weight: 700; margin: 0 0 10px; }

  .joh-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .joh-donut > svg { flex: 0 0 auto; width: 150px; }

  .ch-legend { list-style: none; margin: 0; padding: 0; font-size: 12px; min-width: 118px; flex: 1; }
  .ch-legend li { margin: 0 0 4px; }
  .ch-legend a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 6px; border-radius: 5px; padding: 1px 3px; }
  .ch-legend a:hover { background: var(--surface-2); }
  .ch-legend li > span, .ch-legend li > i { vertical-align: middle; }
  .ch-legend li:not(:has(a)) { display: flex; align-items: center; gap: 6px; padding: 1px 3px; }
  .ch-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; }
  .ch-legend .ch-l { flex: 1; color: var(--text-2); }
  .ch-legend .ch-v { font-variant-numeric: tabular-nums; font-weight: 700; }

  /* aging rows */
  .joh-age { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 9px; align-items: center; font-size: 12px; }
  .joh-age .a-lbl { color: var(--text-2); white-space: nowrap; }
  .joh-age .a-n { font-variant-numeric: tabular-nums; font-weight: 700; }

  .ch-bar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
  .ch-bar--empty { background: repeating-linear-gradient(45deg, var(--surface-2) 0 6px, transparent 6px 12px); }
  .ch-seg { display: flex; align-items: center; justify-content: center; min-width: 3px; }
  .ch-seg b { font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.35); }

  /* gauges */
  .joh-gauges { display: flex; gap: 16px; flex-wrap: wrap; }
  .joh-g { text-align: center; flex: 1; min-width: 96px; }
  .joh-g svg { width: 88px; }
  .joh-g .g-l { font-size: 11px; color: var(--text-2); font-weight: 700; margin-top: 4px; }
  .joh-g .g-s { font-size: 11px; color: var(--text-2); }

  /* the ribbon */
  .joh-ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                border-top: 1px solid var(--line); background: var(--surface-2); }
  .joh-rib { padding: 9px 14px; border-inline-end: 1px solid var(--line); color: inherit; text-decoration: none;
             display: flex; align-items: baseline; gap: 8px; }
  .joh-rib:last-child { border-inline-end: 0; }
  a.joh-rib:hover { background: var(--surface-1); }
  .joh-rib .r-l { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
  .joh-rib .r-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
  .joh-rib .r-v.is-bad { color: color-mix(in srgb, var(--danger) 62%, var(--text)); }
  .joh-rib .r-v.is-warn { color: color-mix(in srgb, var(--warn) 62%, var(--text)); }

  /* the planned/reactive split reads as one bar, not two numbers */
  .joh-split { display: flex; flex-direction: column; gap: 4px; padding: 9px 14px; }
  .joh-split .s-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-2); font-weight: 600; }

  @media (prefers-reduced-motion: reduce) { .joh * { transition: none !important; } }
}

/* The shared pager (core/cm001/pager.php). One look for every queue. */
@layer cm.components {
  .cm-pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
              margin-top: 12px; font-size: 12px; color: var(--text-2); }
  .cm-pager .p-range { font-variant-numeric: tabular-nums; }
  .cm-pager .p-sizes { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
  .cm-pager .p-size { display: inline-block; min-width: 26px; text-align: center; padding: 2px 6px;
                      border: 1px solid var(--line); border-radius: 6px; text-decoration: none;
                      color: var(--text-2); font-variant-numeric: tabular-nums; }
  .cm-pager a.p-size:hover { background: var(--surface-2); color: var(--text); }
  .cm-pager .p-size.is-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
  .cm-pager .p-nav { display: flex; align-items: center; gap: 8px; }
  .cm-pager .btn.is-off { opacity: .4; pointer-events: none; }
}