/*
 * The components. Only design tokens from tokens.css: no colour codes, sizes, fonts or durations here
 * (scripts/check_design.py). Media queries are the exception, since they cannot read variables.
 * Breakpoints: mobile below 600, iPad portrait 820, iPad landscape 1180, desktop 1440.
 */

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}
h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
}
a {
  color: var(--color-link);
}
:focus-visible {
  outline: var(--line-medium) solid var(--color-focus);
  outline-offset: var(--line-medium);
}
.ui-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.ui-neg {
  color: var(--color-negative-amount);
  font-weight: var(--weight-medium);
}
.ui-muted {
  color: var(--color-text-3);
}
/* A date in running text, for example in a lead, is never broken at its hyphens (granskningslistan). */
.ui-date {
  white-space: nowrap;
}
/* A general comment under a table or a list: running text in italics (granskningslistan, 3/10). */
.ui-note {
  margin: 0;
  color: var(--color-text-3);
  font-style: italic;
}
.ui-visually-hidden {
  position: absolute;
  width: var(--line-thin);
  height: var(--line-thin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Display level: anything belonging to Avancerad (advanced) is hidden when an ancestor has the level Enkel (simple). */
[data-level="simple"] .ui-level-advanced {
  display: none;
}

/* ---- Page ---- */
.ui-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-9) var(--space-7) var(--space-11);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ui-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-9);
}
.ui-page-head p {
  margin: 0;
  color: var(--color-text-2);
}

/* ---- Navigation ---- */
.ui-band {
  background: var(--color-band);
  color: var(--color-band-text);
}
.ui-band-inner {
  position: relative; /* the top bar's popovers keep inside it */
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-9);
}
.ui-logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--target-min);
  min-width: var(--target-min);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
.ui-logo small {
  display: block;
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-band-muted);
}
.ui-band-tools {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
}
.ui-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-band-muted);
}
.ui-user b {
  color: var(--color-band-text);
  font-weight: var(--weight-medium);
}
.ui-avatar {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-round);
  background: var(--color-brand);
  color: var(--color-band);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
}
/* When the accounting system was last read (T7.1), and a link when something newer has come. */
.ui-fetched {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-band-muted);
  font-variant-numeric: tabular-nums;
}
.ui-fetched b {
  color: var(--color-band-text);
  font-weight: var(--weight-medium);
}
.ui-fetched-info summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  cursor: pointer;
  list-style: none;
}
.ui-fetched-info summary::-webkit-details-marker {
  display: none;
}
.ui-fetched-info summary::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-round);
  border: var(--line-thin) solid var(--color-band-muted);
  font-size: var(--text-2xs);
}
.ui-fetched-info p {
  position: absolute;
  z-index: 2;
  top: 100%;
  right: var(--space-7);
  width: min(var(--dialog-max), calc(100% - 2 * var(--space-7)));
  margin: var(--space-2) 0 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
.ui-fetched-newer {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-band-text);
  font-weight: var(--weight-bold);
}
.ui-theme {
  min-height: var(--target-min);
  padding: 0 var(--space-6);
  border-radius: var(--radius-round);
  border: var(--line-thin) solid var(--color-band-muted);
  background: var(--color-band-control);
  color: var(--color-band-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
/* The top bar's menu: the areas the user may open, and signing out (E0.2). */
.ui-band-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}
.ui-band-menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-band-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.ui-band-menu a[aria-current="page"] {
  color: var(--color-band-text);
}
/* A planned area (1a.4): the same dot as a planned tab. */
.ui-band-menu a.ui-band-planned::after {
  content: "";
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  margin-left: var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-warning);
}
/* A number on a link of the menu, such as the new replies in the feedback (1a.5). */
.ui-band-count {
  display: inline-grid;
  place-items: center;
  min-width: var(--space-9);
  height: var(--space-9);
  margin-left: var(--space-3);
  padding: 0 var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.ui-band-menu form {
  margin: 0;
}
.ui-logo img {
  display: block;
  max-height: var(--space-10);
  max-width: calc(var(--space-11) * 4);
  margin-bottom: var(--space-2);
}

/* Tabs: each tab is a link to its own address. */
.ui-tabs {
  background: var(--color-surface);
  border-bottom: var(--line-thin) solid var(--color-border);
  box-shadow: var(--shadow-raised);
}
.ui-tabs-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
}
.ui-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-text-2);
  text-decoration: none;
  border-bottom: var(--line-thick) solid transparent;
  white-space: nowrap;
}
.ui-tab[aria-current="page"] {
  color: var(--color-action);
  border-bottom-color: var(--color-action);
}
.ui-tab-planned {
  color: var(--color-text-3);
  font-weight: var(--weight-regular);
}
.ui-tab-planned::after {
  content: "";
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  margin-left: var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-warning);
}
.ui-tabs-sub {
  background: var(--color-surface-2);
  box-shadow: none;
}
.ui-tabs-sub .ui-tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  text-transform: none;
  border-bottom-width: var(--line-medium);
}

/* ---- Buttons ---- */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  min-width: var(--target-min); /* also a button with only an icon or a sign is a tap target of 44x44 px */
  padding: var(--space-3) var(--space-7);
  border: var(--line-thin) solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-action-text);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ui-button-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.ui-button-ghost {
  background: transparent;
  color: var(--color-action);
}
.ui-button-danger {
  background: var(--color-error);
  color: var(--color-text-on-strong);
}
.ui-button-small {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-md);
}
.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  opacity: 0.45;
  filter: none;
  cursor: default;
}
.ui-button[aria-busy="true"]::before {
  content: "";
  width: var(--icon);
  height: var(--icon);
  border-radius: var(--radius-round);
  border: var(--line-medium) solid currentColor;
  border-right-color: transparent;
  animation: ui-spin calc(var(--motion-normal) * 4) linear infinite;
}
@keyframes ui-spin {
  to {
    transform: rotate(1turn);
  }
}
.ui-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ---- Fields ---- */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  position: relative;
}
.ui-field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
}
.ui-field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin: 0;
}
.ui-field-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: var(--weight-medium);
  margin: 0;
}
.ui-input {
  width: 100%;
  min-width: var(--field-min);
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  border: var(--line-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-field);
}
textarea.ui-input {
  resize: vertical;
  field-sizing: content;
}
.ui-input-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ui-input.ui-neg {
  color: var(--color-negative-amount);
}
.ui-field-editable .ui-input {
  background: var(--color-editable);
  border-color: var(--color-action);
}
.ui-field-invalid .ui-input {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}
.ui-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ui-input[readonly] {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
/* Unsaved: a discreet corner flag and dot, not coloured rows (granskningslistan). */
.ui-field-unsaved .ui-field-label::after {
  content: "";
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  margin-left: var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-unsaved);
}
.ui-field-unsaved .ui-input {
  background-image: linear-gradient(225deg, var(--color-unsaved) var(--corner-flag), transparent var(--corner-flag));
}

/* Checkbox: never field width, the label sits next to the box. */
.ui-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--target-min);
  width: auto;
  cursor: pointer;
}
.ui-check input {
  width: var(--check);
  height: var(--check);
  margin: 0;
  accent-color: var(--color-action);
  flex: none;
}

/* ---- Picker ---- */
.ui-picker {
  position: relative;
}
.ui-picker-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: max(100%, var(--picker-min));
  max-width: min(90vw, calc(var(--picker-min) * 2));
  max-height: var(--picker-max-height);
  overflow: auto;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}
.ui-picker-option {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  cursor: pointer;
}
.ui-picker-option b {
  font-variant-numeric: tabular-nums;
}
.ui-picker-option[aria-selected="true"] {
  font-weight: var(--weight-medium);
}
.ui-picker-option.is-active {
  background: var(--color-action-soft);
}
.ui-picker-none {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-3);
}

/* ---- Cards ---- */
.ui-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--picker-min) / 2)), 1fr));
  gap: var(--space-6);
}
.ui-card {
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  padding: var(--space-7) var(--space-7) var(--space-6);
  min-width: 0;
}
.ui-card-label {
  font-size: var(--text-xs);
  color: var(--color-text-2);
  margin: 0 0 var(--space-2);
}
.ui-card-value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ui-card-detail {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin: var(--space-3) 0 0;
}
.ui-card-hero {
  border-top: var(--line-thick) solid var(--color-action);
  border-color: var(--color-action);
}
.ui-card-hero .ui-card-value {
  font-size: var(--text-hero);
}
.ui-card-warning {
  border-top: var(--line-thick) solid var(--color-warning);
}
.ui-card-critical {
  border-top: var(--line-thick) solid var(--color-error);
}
.ui-panel {
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Status badges ---- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  background: var(--color-surface-2);
  color: var(--color-text-2);
}
.ui-badge::before {
  content: "";
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--radius-round);
  background: currentColor;
}
.ui-badge-info {
  background: var(--color-action-soft);
  color: var(--color-action);
}
.ui-badge-positive {
  background: var(--color-positive-soft);
  color: var(--color-positive-text);
}
.ui-badge-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}
.ui-badge-critical {
  background: var(--color-error-soft);
  color: var(--color-error);
}

/* ---- Messages and empty states ---- */
.ui-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-7);
  border-left: var(--line-thick) solid var(--color-action);
  background: var(--color-action-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.ui-message p {
  margin: 0;
}
.ui-message-positive {
  border-color: var(--color-positive);
  background: var(--color-positive-soft);
}
.ui-message-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}
.ui-message-critical {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-11) var(--space-7);
  text-align: center;
  border: var(--line-thin) dashed var(--color-border);
  color: var(--color-text-2);
}
.ui-empty p {
  margin: 0;
}

/* Where touch does not suit, for example exact measuring in a drawing or a very wide table, the view says so briefly
   (granskningslistan, Björn 10/10). Shown only on a touch screen, whose primary pointer is coarse; preview shows it on
   every screen, for the catalogue and the export only. */
.ui-touch-note {
  display: none;
  margin: 0;
  padding: var(--space-3) var(--space-6);
  border-left: var(--line-thick) solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.ui-touch-note-preview {
  display: block;
}
@media (pointer: coarse) {
  .ui-touch-note {
    display: block;
  }
}

/* ---- Hover ---- */
/* Hover only adds emphasis where there is a mouse; nothing is reached only by hovering (granskningslistan). On a touch
   screen a hover state stays after the tap, so it is left out there. */
@media (hover: hover) {
  .ui-button:hover {
    filter: brightness(1.06);
  }
  .ui-button:disabled:hover,
  .ui-button[aria-disabled="true"]:hover {
    filter: none;
  }
  .ui-band-menu a:hover {
    color: var(--color-band-text);
  }
  .ui-table tbody tr:hover td {
    background: var(--color-surface-2);
  }
}

/* ---- Dialog ---- */
.ui-dialog {
  width: min(90vw, var(--dialog-max));
  padding: 0;
  border: var(--line-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
.ui-dialog::backdrop {
  background: var(--color-overlay);
}
.ui-dialog-body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ui-dialog-body p {
  margin: 0;
}
.ui-dialog .ui-actions {
  justify-content: flex-end;
}

/* ---- Tables ---- */
/* The header row follows when scrolling (sticky), so the table is never inside a box that scrolls sideways.
   Headers may wrap, amounts and dates may not. */
.ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-md);
  background: var(--color-surface);
}
.ui-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  padding-bottom: var(--space-5);
}
.ui-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  text-align: left;
  vertical-align: bottom;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom: var(--line-medium) solid var(--color-border-strong);
}
.ui-table th.ui-num {
  text-align: right;
  white-space: normal;
}
.ui-table td {
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom: var(--line-thin) solid var(--color-border-soft);
  vertical-align: middle;
}
.ui-table td:first-child,
.ui-table th:first-child {
  padding-left: var(--space-4);
}
.ui-table td.ui-text-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* A short text that keeps to one line in a narrow column, such as "Med oss" (1a.4). */
.ui-table td.ui-nowrap {
  white-space: nowrap;
}
/* A link alone in a cell fills the cell's height, so that it is a tap target of --target-min (T2.7): the row then
   opens with a finger also where the text is short. The cell's air moves into the link, so that a name that wraps
   keeps its distance to the lines. A cell with more than one link keeps them as text. */
.ui-table td > a:only-child {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  min-width: var(--target-min);
  margin: calc(-1 * var(--space-4)) 0;
  padding: var(--space-4) 0;
}
.ui-table td.ui-num > a:only-child {
  justify-content: flex-end;
}
.ui-table .ui-row-group td {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  padding-top: var(--space-7);
  border-bottom-color: var(--color-border);
}
.ui-table tfoot td {
  font-weight: var(--weight-bold);
  border-top: var(--line-thin) solid var(--color-border-strong);
  border-bottom: 0;
}
.ui-table tfoot .ui-row-total td {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  border-top-width: var(--line-medium);
}
.ui-table .ui-row-subtotal td {
  font-weight: var(--weight-bold);
  border-bottom: var(--line-thin) solid var(--color-border-strong);
}
.ui-table .ui-col-reference {
  color: var(--color-text-3);
}
.ui-table .ui-cell-editable {
  background: var(--color-editable);
}
/* A field in a cell keeps the tap target's height: the heavy views are edited with a finger on an iPad (T2.7). */
.ui-table .ui-cell-editable .ui-input {
  padding: var(--space-1) var(--space-3);
}
/* A cell with a field has no air of its own above and below, so that the row is the field's height. */
.ui-table td.ui-cell-field {
  padding-top: 0;
  padding-bottom: 0;
}

/* Mobile: the table becomes cards in the same order as the list. */
@media (max-width: 599px) {
  .ui-table,
  .ui-table tbody,
  .ui-table tfoot,
  .ui-table tr,
  .ui-table td {
    display: block;
  }
  .ui-table thead {
    display: none;
  }
  .ui-table tr {
    border-bottom: var(--line-thin) solid var(--color-border);
    padding: var(--space-4) 0;
  }
  .ui-table td,
  .ui-table td:first-child {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    border: 0;
    padding: var(--space-1) var(--space-4);
    overflow-wrap: anywhere;
  }
  .ui-table td::before {
    content: attr(data-label);
    color: var(--color-text-3);
    font-size: var(--text-xs);
    text-align: left;
    flex: 0 0 auto; /* the label keeps its width beside a long value, which wraps instead */
    max-width: 45%;
  }
  .ui-table td:first-child::before {
    content: none;
  }
  .ui-table td > a:only-child {
    margin: calc(-1 * var(--space-1)) 0;
    padding: var(--space-1) 0;
  }
  .ui-table td.ui-cell-field {
    align-items: center;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .ui-table caption {
    display: block;
  }
  .ui-table td:empty,
  .ui-table tfoot td:not(:first-child, .ui-num) {
    display: none;
  }
  .ui-table tfoot td,
  .ui-table tfoot .ui-row-total td {
    border: 0;
  }
  .ui-table tfoot tr {
    border-top: var(--line-medium) solid var(--color-border-strong);
    border-bottom: 0;
  }
}

/* ---- Charts ---- */
/* Drawn as SVG on the server (apps/printing/charts.py), with the chart colours in a fixed order. */
.ui-chart-figure {
  margin: 0;
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  padding: var(--space-7);
}
.ui-chart-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4) var(--space-7);
  margin-bottom: var(--space-4);
}
.ui-chart-caption {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
}
.ui-chart-legend {
  display: flex;
  gap: var(--space-7);
  font-size: var(--text-xs);
  color: var(--color-text-2);
}
.ui-chart-key::before {
  content: "";
  display: inline-block;
  width: var(--space-5);
  height: var(--space-5);
  margin-right: var(--space-3);
  border-radius: var(--radius-sm);
}
.ui-chart-key-1::before {
  background: var(--color-chart-1);
}
.ui-chart-key-2::before {
  background: var(--color-chart-2);
}
.ui-chart {
  display: block;
  width: 100%;
  height: auto;
}
/* The drawing scales with its width, text and all, so the screen has it at three sizes and shows the one for the
   width: the text is then at least --text-2xs at every width, and a phone gets fewer month labels. */
.ui-chart-medium,
.ui-chart-narrow {
  display: none;
}
@media (max-width: 1179px) {
  .ui-chart-wide {
    display: none;
  }
  .ui-chart-medium {
    display: block;
  }
}
@media (max-width: 599px) {
  .ui-chart-medium {
    display: none;
  }
  .ui-chart-narrow {
    display: block;
  }
}

/* ---- Print ---- */
.ui-print {
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--print-text);
  padding: var(--print-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.ui-print-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-7);
  border-bottom: var(--line-medium) solid var(--color-border-strong);
  padding-bottom: var(--space-4);
}
.ui-print-head h1 {
  font-size: var(--print-heading);
}
.ui-print-meta {
  margin: 0;
  font-size: var(--print-text-small);
  color: var(--color-text-2);
  text-align: right;
}
.ui-print .ui-table th {
  position: static;
}
.ui-print-landscape {
  page: landscape;
}
.ui-signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--picker-min)), 1fr));
  gap: var(--space-10);
  margin-top: var(--space-9);
}
.ui-signature {
  border-top: var(--line-thin) solid var(--color-border-strong);
  padding-top: var(--space-2);
  margin-top: var(--print-signature-height);
  font-size: var(--print-text-small);
  color: var(--color-text-2);
}
@media print {
  .ui-band,
  .ui-tabs,
  .ui-actions,
  .ui-theme {
    display: none;
  }
  body {
    background: var(--color-surface);
  }
  .ui-print {
    padding: 0;
  }
  .ui-table thead {
    display: table-header-group;
  }
  .ui-table tr {
    break-inside: avoid;
  }
}