/* Redesign: shared rules for list pages (toolbar, views, tables, pager). Colours: tokens only.
   Printed-manifest look: square, ruled, type-led. The toolbar comes from list_toolbar_html() (app/lib/list.php). */

/* ------------------------------------------------------------ toolbar: search, views, then count and menus */
.list-bar { gap: 12px 20px; align-items: center; margin: 0 0 16px; }
.list-bar > .list-find { position: relative; flex: 0 1 300px; min-width: 200px; display: block; }
.list-find > .list-find-icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--color-text-muted); pointer-events: none; }
.list-bar .list-find input[type="search"] {
  width: 100%; height: 40px; padding: 0 12px 0 36px;
  border: 1px solid var(--color-text); border-radius: var(--radius-control); background: var(--color-input-bg);
  font: inherit; font-size: var(--text-base); color: var(--color-text-input);
}
.list-bar .list-find input[type="search"]:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus); outline-offset: 1px; }
.list-bar .list-find > button.visually-hidden { min-width: 0; height: 1px; padding: 0; }

/* The views read as words; the open one is an ink block. */
.list-views { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.list-view {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
  color: var(--color-text); text-decoration: none; border-radius: var(--radius-control);
}
.list-view:hover { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.list-view.is-active, .list-view.is-active:hover { background: var(--color-text); color: var(--color-page-bg); text-decoration: none; }
.list-view:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus); outline-offset: 1px; }

.list-bar-end { gap: 4px 16px; }
.list-bar-end > .dropdown { display: inline-block; }
.list-bar-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px;
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text);
}
.list-bar-btn::after {
  content: ""; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: url(../icons/chevron-down.svg) center / contain no-repeat; mask: url(../icons/chevron-down.svg) center / contain no-repeat;
}
.list-bar-btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.list-bar-btn:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus); outline-offset: 2px; }
.list-bar-btn .icon { width: 14px; height: 14px; }
.list-size .list-range { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.list-bar-end .list-icons { display: flex; gap: 4px; }
.list-bar-end .list-icons > a { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--color-text); }
.list-bar-end .list-icons > a:hover { background: var(--color-text); color: var(--color-page-bg); }
.list-bar-end .list-filter { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.list-bar-end .list-filter > label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-label); }
.list-bar-end .list-filter select { height: 36px; border-radius: var(--radius-control); }
.list-bar-end .list-note { font-size: var(--text-sm); color: var(--color-text-muted); }
.list-bar-end .btn-small { min-height: 36px; }

/* ------------------------------------------------------------ the table: heads over an ink rule, hairline rows */
/* Desktop only: on a phone the rows are stacked cards (app.css) and keep their own lines. */
@media screen and (min-width: 761px) {
  .list-bar ~ table.data-table, .list-bar ~ .table-scroll > table.data-table { border-top: 0; }
  .list-bar ~ table.data-table > thead th, .list-bar ~ .table-scroll > table.data-table > thead th {
    background: transparent; border-bottom: 3px solid var(--color-text);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text);
  }
  .list-bar ~ table.data-table > tbody > tr > td, .list-bar ~ .table-scroll > table.data-table > tbody > tr > td { border-bottom: 1px solid var(--color-border-strong); }
  .list-bar ~ table.data-table td.num, .list-bar ~ .table-scroll > table.data-table td.num { font-variant-numeric: tabular-nums; }

  /* Date bands are printed headings in the run, not tinted bars. */
  .list-bar ~ table.data-table > tbody > tr.date-band > td, .list-bar ~ .table-scroll > table.data-table > tbody > tr.date-band > td {
    padding-top: 14px; padding-bottom: 4px; background: transparent; border-bottom: 1px solid var(--color-text); box-shadow: none;
    font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text);
  }
}

/* A state or status: its colour dot, then the word. Inside a tr.state-* row the dot takes the row's state. */
.list-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.list-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--row-state, var(--inv-tone, var(--color-text-muted))); }
.list-bar ~ * td.list-state-cell, .list-bar ~ table td.list-state-cell { width: auto; padding: 8px 12px 8px 16px; text-align: left; line-height: 20px; }
.list-state-cell > .badge { display: block; width: max-content; margin-top: 2px; }
@media screen and (min-width: 761px) {
  .list-bar ~ table.data-table tr[class*="state-"] > td:first-child,
  .list-bar ~ .table-scroll > table.data-table tr[class*="state-"] > td:first-child { box-shadow: none; }
  /* The state is the dot: no corner marks or edge bars on a desktop list row. */
  html[data-look] .page-content .list-bar ~ .table-scroll > .data-table > tbody > tr > :is(td, th)::after,
  html[data-look] .page-content .list-bar ~ .data-table > tbody > tr > :is(td, th)::after { content: none; }
  html[data-look] .page-content .list-bar ~ .table-scroll > .data-table > tbody > tr > :is(td, th):first-child,
  html[data-look] .page-content .list-bar ~ .data-table > tbody > tr > :is(td, th):first-child { box-shadow: none; }
}
@media (hover: hover) {
  .list-bar ~ * .data-table tr[class*="state-"]:hover > td.state-cell, .list-bar ~ .data-table tr[class*="state-"]:hover > td.state-cell { background: var(--color-row-hover); }
}

/* ------------------------------------------------------------ pager: one ruled line under every list */
/* The pager's ink rule closes the table: it sits on the last row's hairline. */
.pager { margin-top: 0; padding-top: 12px; border-top: 3px solid var(--color-text); font-size: var(--text-sm); }
.page-content > .list-bar ~ .pager { margin-top: -1px; }
.pager-count { font-family: var(--font-mono); color: var(--color-text-muted); }
.pager-pages { gap: 0; }
.pager-pages a, .pager-pages span { min-width: 36px; min-height: 36px; padding: 8px 10px; line-height: 20px; border-radius: var(--radius-control); font-weight: 700; color: var(--color-text); }
.pager-pages a:hover { background: var(--color-text); color: var(--color-page-bg); text-decoration: none; }
.pager-pages .is-current { background: var(--color-primary); color: var(--rail-accent-ink); }
.pager-pages .is-disabled, .pager-pages .gap { color: var(--color-text-muted); font-weight: 600; }
.pager-prev > a, .pager-next > a, .pager-prev > span, .pager-next > span { text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); }

/* ------------------------------------------------------------ narrow */
@media screen and (max-width: 980px) {
  .list-bar > .list-find { flex: 1 1 260px; }
  .list-bar > .list-bar-end { margin-left: 0; }
}
@media screen and (max-width: 760px) {
  .list-bar { gap: 8px 12px; }
  .list-bar > .list-find { flex: 1 1 100%; }
  .list-bar > .list-views { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .list-bar > .list-views::-webkit-scrollbar { display: none; }
  .list-view { flex: none; min-height: 44px; }
  .list-bar-end { flex: 1 1 100%; justify-content: space-between; }
  .list-bar-end > .list-views { flex: none; width: auto; }
  .list-bar-btn { min-height: 44px; }
  .pager-prev > a, .pager-next > a, .pager-prev > span, .pager-next > span { border-color: var(--color-text); }
}

/* The List / Board switch at a toolbar's end: the same words, framed as a pair. */
.list-bar-end > .list-views { border: 1px solid var(--color-text); }
.list-bar-end > .list-views > .list-view { min-height: 34px; border-radius: 0; }

/* Secondary filter chips under the toolbar (People's Mine, Needs follow-up, tags): square words. */
.list-bar ~ .list-toolbar .filter-tab { border-color: var(--color-border-strong); border-radius: 0; font-size: var(--text-sm); }
.list-bar ~ .list-toolbar .filter-tab.is-active { background: var(--color-primary); border-color: var(--color-text); color: var(--rail-accent-ink); box-shadow: none; }