/* The stylesheet of the web UI of koho. It is for a phone at the shelf first: a gutter of 16 px, no horizontal
   scroll, and controls of 44 px or more for a finger. The colors follow the light or the dark mode of the system. */

:root {
  color-scheme: light dark;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --fg: #1d1d1b;
  --muted: #5f5f5a;
  --border: #d9d9d4;
  --accent: #1f5fbf;
  --accent-fg: #ffffff;
  --warn-bg: #fff3d6;
  --warn-fg: #6b4500;
  --warn-border: #e2b54a;
  --error-bg: #fde8e7;
  --error-fg: #8a1c14;
  --danger: #b3261e;
  --danger-fg: #ffffff;
  --gutter: 16px;
  --radius: 8px;
  --touch: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615;
    --surface: #212120;
    --fg: #ececea;
    --muted: #a5a5a0;
    --border: #3a3a37;
    --accent: #7fb0ff;
    --accent-fg: #0d1b30;
    --warn-bg: #3a2c0a;
    --warn-fg: #f5d58a;
    --warn-border: #8a6a1c;
    --error-bg: #3d1714;
    --error-fg: #f8b4ad;
    --danger: #e46a5f;
    --danger-fg: #2a0a07;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  /* A long word that does not fit breaks, so that the page has no horizontal scroll. */
  overflow-wrap: break-word;
}

a {
  color: var(--accent);
}

h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 16px;
}

/* The bar at the top: the name of the program, the navigation and the language switch. */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 0 var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--fg);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  flex: 1 1 auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 4px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* On a phone, the links of the menu are nearer to each other, so that the four links fit in one line also in Russian
   and in Ukrainian. Each link keeps its padding for a finger. */
@media (max-width: 35.99rem) {
  .nav {
    gap: 0 2px;
  }
}

.langs {
  position: relative;
  margin-left: auto;
}

.langs summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 4px;
  cursor: pointer;
  color: var(--muted);
  list-style: none;
}

.langs summary::-webkit-details-marker {
  display: none;
}

.langs summary::after {
  content: "▾";
  margin-left: 4px;
}

.langs ul {
  position: absolute;
  right: 0;
  z-index: 1;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  min-width: 10rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
}

.langs a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 16px;
  color: var(--fg);
  text-decoration: none;
}

.langs a[aria-current="true"] {
  font-weight: 600;
}

main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 16px var(--gutter) 24px;
}

/* The numbers of the home page. */
.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.count {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.count .number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.count .label {
  color: var(--muted);
}

.count.warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-fg);
}

.count.warn .label {
  color: inherit;
}

.note {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.note.warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-fg);
}

.note.error {
  background: var(--error-bg);
  border-color: var(--error-fg);
  color: var(--error-fg);
}

/* A form: one field in each line, at the full width. */
.form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 28rem;
}

.form label {
  font-weight: 600;
}

input,
button {
  font: inherit;
  /* 16 px or more, so that a phone does not zoom into the field. */
  font-size: max(1rem, 16px);
}

.form input {
  min-height: var(--touch);
  padding: 8px 12px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

button {
  min-height: var(--touch);
  padding: 8px 20px;
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

button.link {
  padding: 8px 4px;
  color: var(--accent);
  background: none;
  text-decoration: underline;
}

/* A command of the koho program: it does not break in two lines. */
code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "DejaVu Sans Mono", monospace;
  font-size: 0.9375em;
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* The user of the session and the button that closes it. */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
  padding: 8px var(--gutter) 24px;
}

/* The item search: the fields in a grid, one column on a phone. */
h2 {
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 24px 0 8px;
}

.search {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 12px 16px;
  margin: 0 0 16px;
}

.search .wide,
.search .attrs,
.search .actions {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.field label {
  font-weight: 600;
}

.search input,
.search select {
  width: 100%;
  min-height: var(--touch);
  padding: 8px 12px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: max(1rem, 16px);
}

.attrs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.attrs[hidden] {
  display: none;
}

.attrs legend {
  padding: 0 4px;
  font-weight: 600;
}

.attrs .hint {
  grid-column: 1 / -1;
  margin: 0;
}

.hint,
.muted,
.found {
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.actions a,
.more a,
.back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

/* The results: one card for each item, with the full card as the link. */
.found {
  margin: 0 0 8px;
}

.hits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  color: var(--fg);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hit:hover .hit-name {
  text-decoration: underline;
}

.hit-name {
  color: var(--accent);
  font-weight: 600;
}

.hit-meta,
.hit-values {
  color: var(--muted);
  font-size: 0.9375rem;
}

.errors {
  margin: 0;
  padding-left: 20px;
}

.errors a {
  color: inherit;
  font-weight: 600;
}

/* The mark of the source of a name, and of a balance that needs review. */
.badge {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.15em;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg);
}

.badge.auto {
  color: var(--accent);
  border-color: var(--accent);
}

.badge.review {
  color: var(--warn-fg);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

/* The page of an item. */
.back {
  margin: -8px 0 0;
}

.sub {
  margin: -8px 0 16px;
  color: var(--muted);
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photos a,
.photos .missing {
  display: flex;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photos .missing {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  text-align: center;
  font-size: 0.875rem;
  border-style: dashed;
}

table.list {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table.list th,
table.list td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

table.list thead th {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

table.list tfoot th,
table.list tfoot td {
  font-weight: 700;
  border-bottom: 0;
}

table.list .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A code of a cell or a number of a document does not break in two lines. */
table.list .code {
  white-space: nowrap;
}

table.list .date {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.facts {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 2fr;
  gap: 4px 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.facts > div:last-child {
  border-bottom: 0;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  min-width: 0;
}

code.id {
  white-space: normal;
  word-break: break-all;
}

.files {
  margin: 0;
  padding-left: 20px;
}

.files li {
  margin: 4px 0;
}

.files .muted {
  display: block;
  font-size: 0.875rem;
}

/* A table of three columns: the mark of a balance can go above its quantity, so that the table fits on a phone. */
table.list td.marks {
  white-space: normal;
}

table.list td.marks .qty {
  white-space: nowrap;
}

@media (min-width: 36rem) {
  table.list td.marks {
    white-space: nowrap;
  }
}

/* The SKU under the name of an item in a table. */
table.list code.meta {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
}

/* The cells: each cell under the cell that contains it. */
.tree,
.tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree {
  padding: 2px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tree ul {
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.tree .node {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.tree .node a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-weight: 600;
}

/* The documents: the filters fold on a phone, so that the newest documents are at the top of the page. */
.filters {
  margin: 0 0 16px;
}

.filters > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.filters > summary::-webkit-details-marker {
  display: none;
}

.filters > summary::before {
  content: "▸";
  width: 1.25em;
}

.filters[open] > summary::before {
  content: "▾";
}

.filters[open] > summary {
  margin-bottom: 8px;
}

.search .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch);
}

.search .checks input,
.card .checks input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.nowrap {
  white-space: nowrap;
}

/* The marks of a document: a posted document has a full mark, a draft and an unposted document have a frame. */
.badge.posted {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}

.badge.conflict {
  color: var(--warn-fg);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.badge.deleted {
  color: var(--error-fg);
  background: var(--error-bg);
  border-color: var(--error-fg);
}

/* The reason of a write-off line is under its quantity, and the difference of a stock count line is under its counted
   quantity. */
table.lines .reason {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
}

/* The lines of a document have four columns. On a phone, the cells have less space around the text, a long name or SKU
   breaks, and the to cell of a transfer goes under the from cell. A code of a cell does not break. */
table.lines .cell {
  white-space: nowrap;
}

table.lines td.item,
table.lines code.meta {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 35.99rem) {
  table.lines th,
  table.lines td {
    padding: 8px 6px;
  }
}

/* The change log: one card for each revision, the newest first. */
.revisions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.revision {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.revision-head {
  margin: 0;
  font-size: 1rem;
}

.revision-no {
  display: inline-block;
  min-width: 1.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.revision-meta {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.changes {
  margin: 4px 0;
  padding-left: 20px;
}

.changes li {
  margin: 2px 0;
}

.changes ul {
  margin: 2px 0;
  padding-left: 20px;
}

.changes .label {
  color: var(--muted);
}

del {
  color: var(--error-fg);
}

ins {
  text-decoration: none;
  font-weight: 600;
}

.revision .more {
  margin: 0;
}

/* A change of the sync in the change log of an item: a value that lost, or a new SKU. */
.revision.sync {
  border-left: 4px solid var(--warn-border);
}

/* The buttons of a page: a link that looks as a button, the second kind of button with a frame, and the button of a
   delete. Each one is 44 px high or more. */
.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 16px;
}

.buttons form,
form.inline {
  margin: 0;
}

a.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 8px 20px;
  border-radius: var(--radius);
  text-decoration: none;
}

a.button.primary {
  color: var(--accent-fg);
  background: var(--accent);
}

a.button.secondary,
button.secondary {
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
}

button.danger {
  color: var(--danger-fg);
  background: var(--danger);
}

button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.note p {
  margin: 0 0 8px;
}

.note p:last-child,
.note form:last-child {
  margin-bottom: 0;
}

.note .lead {
  font-weight: 600;
}

.negative {
  margin: 0;
  padding-left: 20px;
}

/* The question before a delete: it opens with no script. */
details.danger {
  margin: 24px 0 0;
}

details.danger > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--error-fg);
  cursor: pointer;
}

details.danger[open] {
  padding: 0 12px 12px;
  border: 1px solid var(--error-fg);
  border-radius: var(--radius);
  background: var(--error-bg);
}

/* The document form: the date and the comment, then a card for each line. On a phone, each field is at the full
   width. */
.doc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 48rem;
}

.doc-form .default {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.head-fields,
fieldset.line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 12px 16px;
}

.head-fields .wide,
fieldset.line .pick,
fieldset.line .line-actions {
  grid-column: 1 / -1;
}

.doc-form input,
.doc-form select,
.doc-form textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 8px 12px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: max(1rem, 16px);
}

.doc-form [aria-invalid="true"] {
  border-color: var(--error-fg);
}

.form-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.form-lines h2 {
  margin: 8px 0 0;
}

fieldset.line {
  width: 100%;
  margin: 0;
  padding: 8px 12px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

fieldset.line legend {
  padding: 0 4px;
  font-weight: 600;
}

.line-actions {
  display: flex;
  justify-content: flex-end;
}

/* The expected quantity of a line of a stock count, next to the field of the counted quantity. */
fieldset.line .expected {
  align-self: end;
  margin: 0 0 10px;
}

.field-error {
  margin: 0;
  color: var(--error-fg);
  font-size: 0.9375rem;
}

/* The item of an item field, and the items of the search under the field: one button for each item. */
.picked {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.picks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.picks:empty {
  display: none;
}

.picks .muted {
  font-size: 0.9375rem;
}

button.pick-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
}

button.pick-hit .hit-name {
  overflow-wrap: anywhere;
}

button.pick-hit code.meta {
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.facts + .buttons {
  margin-top: 16px;
}

/* The item form: a card for the names, for the attributes and for the other data. On a phone, each field is at the
   full width. */
fieldset.group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding: 8px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

fieldset.group legend {
  padding: 0 4px;
  font-weight: 600;
}

fieldset.group .wide,
fieldset.group > .hint,
fieldset.group > .note,
fieldset.group > .muted {
  grid-column: 1 / -1;
  margin: 0;
}

.doc-form textarea {
  resize: vertical;
}

/* The button that confirms a name of the AI, under the name. */
form.confirm {
  margin-top: 4px;
}

/* The photo receive: the fields of the photos and the text while the browser sends the form. A finger can use the
   button of a file field. The text .sending shows only while HTMX sends the form. */
.doc-form input[type="file"] {
  padding: 6px 8px;
}

.doc-form input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 12px;
  padding: 4px 12px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
}

.sending {
  display: none;
  margin: 0;
}

.htmx-request .sending {
  display: block;
}

/* The state of the AI job of a draft from a photo. While the job waits or runs, a dot pulses before the text. */
.note.job.busy .lead::before {
  content: "";
  display: inline-block;
  width: 0.625em;
  height: 0.625em;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note.job.busy .lead::before {
    animation: none;
  }
}

/* The proposals of new items of the AI: a card for each line, with the names and the fields of the attributes. */
.proposals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The gap of the flex box is the space between the parts, so only the heading keeps its space above. */
.proposals h2 {
  margin: 24px 0 0;
}

.proposals > .hint,
.proposals > .note {
  margin: 0;
}

.proposals .facts {
  margin: 0;
}

.photos .file {
  align-self: center;
  padding: 8px;
  overflow-wrap: anywhere;
}

/* The home page: a number that is a link, and the state of the sync and of the AI jobs. A state that needs a person has
   the colors of a warning. */
a.count {
  height: 100%;
  color: inherit;
  text-decoration: none;
}

a.count:hover .label,
a.count[aria-current="page"] .label {
  text-decoration: underline;
}

a.count[aria-current="page"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.hit.warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.hit.warn .hit-name,
.hit.warn .hit-meta {
  color: var(--warn-fg);
}

/* The links at the bottom of each page: the sync and the AI jobs. */
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 4px;
}

/* The page of the AI jobs: one card for each job, with its buttons. */
.jobs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.job {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.job p {
  margin: 0 0 4px;
}

.job-head {
  font-weight: 600;
}

.job-what {
  overflow-wrap: anywhere;
}

.job-facts {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.job .buttons {
  margin: 8px 0 0;
}

.badge.claimed {
  color: var(--accent);
  border-color: var(--accent);
}

.badge.failed {
  color: var(--error-fg);
  background: var(--error-bg);
  border-color: var(--error-fg);
}

/* The numbers of the statuses of the AI jobs: smaller, so that the five numbers take two lines on a phone. */
.counts.compact {
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 8px;
}

.counts.compact .count {
  padding: 8px;
}

.counts.compact .number {
  font-size: 1.5rem;
}

.counts.compact .label {
  font-size: 0.875rem;
}

/* The nodes of the hub: the long headings break in two lines, and on a phone the cells have less space around the text,
   so that the table fits. */
table.list.nodes th {
  white-space: normal;
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 35.99rem) {
  table.nodes th,
  table.nodes td {
    padding: 8px 6px;
  }
}