/* Employees page (js/pages/employees.js, employees-form.js). Page-only classes use the emp- prefix and
 * build on the tokens and components in css/app.css. */

.emp-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- notices */

.emp-notices { display: flex; flex-direction: column; gap: var(--space-3); }
.emp-msg-list { margin: var(--space-1) 0 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 2px; }
.emp-msg-list li { overflow-wrap: break-word; }
.emp-msg-where {
  margin-left: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.emp-msg-tag { vertical-align: 1px; }
.emp-callout-lead { margin-bottom: var(--space-1); }
.emp-callout-note { margin-top: var(--space-2); }
.emp-msg-edit { font-size: var(--fs-sm); vertical-align: baseline; }

/* phone: the primary action first and full width, Import / Export side by side */
@media (max-width: 640px) {
  [data-page="employees"] .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="employees"] .page-actions > .btn-primary { grid-column: 1 / -1; order: -1; }
}
.emp-save-issues:focus { outline: none; }
.emp-save-issues:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- list card + toolbar */

/* The list is a table when the card is wide enough for all its columns, and a list of cards below that
 * (phones, tablets and small or zoomed laptop windows), so no column is ever hidden off to the side. */
.emp-list-card { container: emp-list / inline-size; }

.emp-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
}
.emp-search { flex: 1 1 220px; max-width: 320px; }
.emp-search .input-addon:last-child { padding-right: var(--space-2); }
/* separate rules: a browser without :has() drops a whole selector list that contains it */
.emp-search:focus-within .emp-kbd { visibility: hidden; }
.emp-search:has(input:not(:placeholder-shown)) .emp-kbd { visibility: hidden; }
@media (max-width: 640px), (hover: none) { .emp-search .input-addon:last-child { display: none; } }
.emp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.emp-seg .segmented-item span { gap: var(--space-1-5); }
.emp-seg .count { height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px; background: var(--border-subtle); color: var(--text-muted); }
.emp-seg .segmented-item input:checked + span .count { background: var(--primary-soft); color: var(--primary-soft-text); }
.emp-result { margin: 0 0 0 auto; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the table sits flush in the card, between the toolbar and the file note */
.emp-list-card > .emp-table-wrap { border-radius: 0; }
/* if unusually long amounts make the table wider than the card, a shadow at the right edge shows there is more
 * (the cover scrolls with the content and hides the shadow once the end is reached). Browsers without color-mix()
 * (Safari < 16.2) get a plain grey edge: a color-mix() with var() inside would turn the whole background transparent. */
.emp-list-card > .emp-table-wrap {
  background:
    linear-gradient(to left, var(--surface) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, var(--border-strong), transparent) right / 12px 100% no-repeat scroll,
    var(--surface);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .emp-list-card > .emp-table-wrap {
    background:
      linear-gradient(to left, var(--surface) 30%, transparent) right / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 16%, transparent), transparent) right / 12px 100% no-repeat scroll,
      var(--surface);
  }
}

/* ---------------------------------------------------------------- table */

.emp-table td { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.emp-table th, .emp-table td { padding-left: var(--space-2); padding-right: var(--space-2); }
.emp-table th.emp-col-money, .emp-table td.emp-col-money { padding-left: var(--space-1-5); padding-right: var(--space-1-5); }
.emp-table th:first-child, .emp-table td:first-child { padding-left: var(--space-5); }
.emp-table th:last-child, .emp-table td:last-child { padding-right: var(--space-4); }
.emp-table td.num { white-space: normal; }
.emp-table td.emp-col-name { min-width: 172px; }
.emp-table td.actions { padding-left: var(--space-1); padding-right: var(--space-3); }

/* sortable headers sit on the same line as the plain ones (the inline-flex button would otherwise ride high) */
.emp-table thead .th-sort { vertical-align: top; }

.emp-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; line-height: 1.3; }
.emp-col-money .emp-cell { align-items: flex-end; text-align: right; }
.emp-main { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-amount { white-space: nowrap; font-weight: var(--fw-medium); }
.emp-unit { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
/* only the name column flexes: amounts and their second lines never wrap in the table */
.emp-sub { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-amount-sub { white-space: nowrap; }
.emp-none { color: var(--text-subtle); }
.emp-warn { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--warning-text); font-weight: var(--fw-medium); white-space: nowrap; }

/* a value changed on this page but not saved yet: highlighted like a marker pen */
.emp-cell.is-changed > :not(.sr-only):not(.emp-sub) {
  background: var(--info-soft); box-shadow: 0 0 0 3px var(--info-soft); border-radius: 3px;
}
.emp-cell.is-changed > .badge { box-shadow: 0 0 0 3px var(--info-soft); }

/* name cell: long names wrap between words, never inside one; the section stays on one line */
.emp-name-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; max-width: 300px; }
.emp-name-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.emp-name { font-weight: var(--fw-medium); color: var(--text); min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.emp-name-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-1-5); min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); }
/* one line with an ellipsis; a line clamp (not nowrap) so a long section doesn't widen the column */
.emp-section {
  min-width: 0; max-width: 100%; overflow: hidden; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1;
}
.emp-name-sub .badge { flex: none; height: 17px; padding: 0 5px; font-size: 11px; }

.emp-chat { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text); white-space: nowrap; }
.emp-chat .icon { color: var(--info); }
.emp-chat-id { font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.emp-actions { display: inline-flex; align-items: center; gap: 2px; }

/* row states: a coloured edge on the first cell (it is sticky, so it keeps its own background) */
.emp-table th:first-child, .emp-table td:first-child {
  box-shadow: var(--emp-edge, 0 0 0 0 transparent), var(--emp-divider, 0 0 0 0 transparent);
}
.emp-table-wrap.is-scrolled { --emp-divider: 1px 0 0 0 var(--border-strong); }
.emp-table tr.emp-row-new { --emp-edge: inset 3px 0 0 0 var(--primary-text); }
.emp-table tr.emp-row-edited { --emp-edge: inset 3px 0 0 0 var(--info); }
.emp-table tr.emp-row-deleted,
.emp-table tr.is-error { --emp-edge: inset 3px 0 0 0 var(--danger-text); }
.emp-table tr.emp-row-deleted > td,
.emp-table tr.emp-row-deleted:hover > td,
.emp-table tr.emp-row-deleted > td:first-child { background: var(--surface-2); }
.emp-table tr.emp-row-deleted .emp-name { text-decoration: line-through; color: var(--text-muted); }
.emp-table tr.emp-row-deleted .emp-main,
.emp-table tr.emp-row-deleted .emp-chat { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.emp-table tr.emp-row-deleted .avatar { --avatar-bg: var(--neutral-soft); --avatar-fg: var(--neutral-text); }
.emp-table tr.is-error > td:first-child,
.emp-table tr.is-error:hover > td { background: var(--danger-soft); }
.emp-table tr.emp-row-warning > td,
.emp-table tr.emp-row-warning > td:first-child { background: var(--warning-soft); }

/* keyboard focus: the row's outline is painted under the sticky name cell, so that cell draws its part itself */
.emp-table tr.is-clickable:focus-visible > td:first-child::after {
  content: ""; position: absolute; inset: 0 0 -1px 0; pointer-events: none;
  border: 2px solid var(--focus); border-right: 0;
}
.emp-table tbody tr.is-clickable:last-child:focus-visible > td:first-child::after { bottom: 0; }

/* inactive people: quieter text and a grey avatar */
.emp-table tr.is-muted .emp-name,
.emp-table tr.is-muted .emp-main,
.emp-table tr.is-muted .emp-chat { color: var(--text-muted); }
.emp-table tr.is-muted .avatar, .emp-card.is-muted .avatar { --avatar-bg: var(--neutral-soft); --avatar-fg: var(--neutral-text); }

@keyframes emp-flash { from { background-color: var(--primary-soft-hover); } }
.emp-table tr.emp-flash > td { animation: emp-flash 1.6s var(--ease); }
.emp-card.emp-flash { animation: emp-flash 1.6s var(--ease); }

/* ---------------------------------------------------------------- cards instead of the table */

.emp-cards { list-style: none; margin: 0; padding: 0; display: none; }
@container emp-list (max-width: 935px) {
  .emp-list-card > .emp-table-wrap { display: none; }
  .emp-cards { display: flex; flex-direction: column; }
}

/* wide cards: name, status and actions on top, the five values in a row underneath */
.emp-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name status actions" "dl dl dl";
  align-items: center; gap: var(--space-3) var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); background: var(--surface);
}
.emp-card:last-child { border-bottom: 0; }
.emp-card-name { grid-area: name; min-width: 0; }
.emp-card-status { grid-area: status; }
.emp-card-actions { grid-area: actions; display: flex; justify-content: flex-end; }
.emp-card .emp-name-cell { max-width: none; }

.emp-card-dl {
  grid-area: dl; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--space-3) var(--space-4); margin: 0;
}
/* five columns in a row, weighted for their usual content; indented under the name when there is room */
@container emp-list (min-width: 640px) {
  .emp-card-dl { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); }
}
@container emp-list (min-width: 800px) {
  .emp-card-dl { padding-left: 44px; }
}
.emp-card-item { min-width: 0; }
.emp-card-dl dt { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); margin-bottom: 2px; }
.emp-card-dl dd { margin: 0; min-width: 0; }
.emp-card-dl .emp-cell { align-items: flex-start; text-align: left; }
.emp-card-dl .emp-main { white-space: normal; }   /* the unit may go under the amount; the amount itself never breaks */
.emp-card-dl .emp-sub { white-space: normal; }
.emp-cards-empty { list-style: none; }

.emp-card.is-new { box-shadow: inset 3px 0 0 var(--primary-text); }
.emp-card.is-edited { box-shadow: inset 3px 0 0 var(--info); }
.emp-card.is-deleted, .emp-card.is-error { box-shadow: inset 3px 0 0 var(--danger-text); }
.emp-card.is-deleted { background: var(--surface-2); }
.emp-card.is-error { background: var(--danger-soft); }
.emp-card.is-deleted .emp-name { text-decoration: line-through; color: var(--text-muted); }
.emp-card.is-deleted .emp-main,
.emp-card.is-deleted .emp-chat { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.emp-card.is-deleted .avatar { --avatar-bg: var(--neutral-soft); --avatar-fg: var(--neutral-text); }
.emp-card.is-muted .emp-name, .emp-card.is-muted .emp-main { color: var(--text-muted); }

/* phone cards: status beside the name, values two by two, actions at the bottom */
@container emp-list (max-width: 559px) {
  .emp-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name status" "dl dl" "actions actions";
    align-items: start; padding: var(--space-4);
  }
  .emp-card-status { padding-top: 5px; }
  .emp-card-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); padding-left: 44px; }
  .emp-card-actions { padding-left: 44px; }
}
@container emp-list (max-width: 400px) {
  .emp-card-dl, .emp-card-actions { padding-left: 0; }
}

/* Browsers without container queries (Safari 15, Chrome < 105) switch on the window width instead, so they get
 * cards too. The sidebar and the page padding take 320px (plus a scrollbar, if the system shows one), so up to a
 * 1269px window the card is too narrow for the table; below 641px the card is the window minus 42px. */
@supports not (container-type: inline-size) {
  @media (max-width: 1269px) {
    .emp-list-card > .emp-table-wrap { display: none; }
    .emp-cards { display: flex; flex-direction: column; }
  }
  @media (max-width: 600px) {
    .emp-card {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "name status" "dl dl" "actions actions";
      align-items: start; padding: var(--space-4);
    }
    .emp-card-status { padding-top: 5px; }
    .emp-card-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); padding-left: 44px; }
    .emp-card-actions { padding-left: 44px; }
  }
  @media (max-width: 442px) {
    .emp-card-dl, .emp-card-actions { padding-left: 0; }
  }
}

@media (max-width: 640px) {
  .emp-toolbar { padding: var(--space-3) var(--space-4); gap: var(--space-2-5); }
  .emp-search { flex-basis: 100%; max-width: none; }
  .emp-filters { width: 100%; }
  .emp-filters .segmented { width: 100%; }
  .emp-filters .segmented-item { flex: 1 1 auto; }
  .emp-filters .segmented-item span { flex: 1 1 auto; }
  .emp-result { margin-left: 0; }
}

/* ---------------------------------------------------------------- file location note */

.emp-file {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5); border-top: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.emp-file .icon { flex: none; color: var(--text-subtle); }
.emp-file-label { flex: none; }
.emp-file-path {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 0; padding: 0; color: var(--text); font-size: var(--fs-xs);
}
@media (max-width: 640px) { .emp-file { padding-left: var(--space-4); } }

/* ---------------------------------------------------------------- first run */

.emp-empty-card { align-items: stretch; }
.emp-empty-card > .empty-state { padding-bottom: var(--space-6); }
.emp-example {
  display: flex; align-items: flex-start; gap: var(--space-3); align-self: center; width: calc(100% - 2 * var(--space-6));
  max-width: 580px; margin: 0 var(--space-6) var(--space-8); padding: var(--space-4);
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
}
.emp-example-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); color: var(--primary-text);
}
.emp-example-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.emp-example-title { color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.emp-example-path { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); min-width: 0; }
.emp-example-path code { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-xs); color: var(--text); }
@media (max-width: 640px) {
  .emp-example { width: calc(100% - 2 * var(--space-4)); margin: 0 var(--space-4) var(--space-5); padding: var(--space-3); }
}

/* ---------------------------------------------------------------- unsaved-changes bar */

.emp-savebar {
  position: sticky; bottom: var(--space-4); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: emp-bar-in var(--dur-slow) var(--ease);
}
@keyframes emp-bar-in { from { opacity: 0; transform: translateY(12px); } }
.emp-savebar-text { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1 1 260px; }
.emp-savebar-icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--warning-soft); color: var(--warning-text); border: 1px solid var(--warning-border);
}
.emp-savebar-lines { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.emp-savebar-count { font-weight: var(--fw-semibold); }
.emp-savebar-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.emp-savebar-sub.is-danger { color: var(--danger-text); }
.emp-savebar-sub.is-warning { color: var(--warning-text); }
.emp-savebar-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.emp-savebar-more { display: none !important; }

/* phones: one compact row (count · ⋯ · Save); Review and Discard live in the ⋯ menu */
@media (max-width: 640px) {
  .emp-savebar {
    bottom: max(var(--space-3), env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  }
  .emp-savebar-icon { display: none; }
  .emp-savebar-text { flex: 1 1 auto; }
  .emp-savebar-sub:not(.is-danger):not(.is-warning) { display: none; }
  .emp-savebar-sub { font-size: var(--fs-xs); }
  .emp-savebar-count { font-size: var(--fs-sm); white-space: nowrap; }
  .emp-savebar-actions { flex: none; flex-wrap: nowrap; gap: var(--space-1); }
  .emp-savebar-review, .emp-savebar-discard { display: none; }
  .emp-savebar-more { display: inline-flex !important; }
}

/* keep notifications clear of the bar's buttons: employees.js sets --emp-toast-bottom to just above the bar while
 * the bar is near the bottom of the window (desktop toasts are bottom-right; phone toasts are at the top anyway) */
@media (min-width: 641px) {
  html.emp-toast-lift:not(.has-overlay) .toast-region { bottom: var(--emp-toast-bottom, 96px); }
}

/* ---------------------------------------------------------------- add / edit drawer */

.emp-form { display: flex; flex-direction: column; gap: var(--space-6); }
.emp-form-section { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.emp-form-section + .emp-form-section { padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.emp-form-head { display: flex; flex-direction: column; gap: 2px; }
.emp-form-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.emp-form-desc { font-size: var(--fs-sm); color: var(--text-muted); }
.emp-server-msgs:empty, .emp-loss-note:empty, .emp-warn-box:empty { display: none; }
.emp-warn-box { scroll-margin: var(--space-4); }
.emp-warn-box:focus { outline: none; }
.emp-warn-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.emp-pay-fields { margin-top: var(--space-1); }
.emp-incentive { gap: var(--space-3); }
.emp-incentive > .field-label { margin-bottom: calc(-1 * var(--space-1)); }
.emp-muted-note { font-size: var(--fs-sm); color: var(--text-muted); }
.emp-drawer .radio-card-title { font-size: var(--fs-base); }
.emp-percent-input { font-variant-numeric: tabular-nums; }

/* extra lines under an amount's hint: a value with decimals kept from Excel, and a likely typo */
.emp-exact-note { display: block; margin-top: 2px; color: var(--info-text); }
.emp-field-warn { display: flex; align-items: flex-start; gap: var(--space-1); margin-top: 2px; color: var(--warning-text); font-weight: var(--fw-medium); }
.emp-field-warn[hidden] { display: none; }
.emp-field-warn .icon { flex: none; margin-top: 2px; }

.emp-calc {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.emp-calc-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.emp-calc-head .icon { color: var(--primary-text); }
.emp-days-input { width: 56px; text-align: center; }
.emp-calc-out { display: flex; flex-direction: column; gap: var(--space-1); }
.emp-calc-formula { font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.emp-calc-fn { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.emp-calc-total { display: flex; align-items: baseline; gap: var(--space-1-5); font-variant-numeric: tabular-nums; }
.emp-calc-total .icon { flex: none; color: var(--text-subtle); align-self: center; }
.emp-calc-empty { font-size: var(--fs-sm); color: var(--text-muted); }
.emp-calc-note { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- review & import dialogs */

.emp-review { display: flex; flex-direction: column; gap: var(--space-5); }
.emp-review-group { display: flex; flex-direction: column; gap: var(--space-2); }
.emp-review-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.emp-review-list { list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.emp-review-item { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.emp-review-item:last-child { border-bottom: 0; }
.emp-review-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 30px; }
.emp-review-head .btn { margin-left: auto; flex: none; }
.emp-review-name { font-weight: var(--fw-medium); overflow-wrap: break-word; min-width: 0; }
.emp-review-name.is-deleted { text-decoration: line-through; color: var(--text-muted); }
.emp-review-meta { color: var(--text-muted); font-size: var(--fs-sm); }
.emp-diff { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-1) 0 var(--space-1); font-size: var(--fs-sm); }
.emp-diff li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-1-5); font-variant-numeric: tabular-nums; }
.emp-diff-label { color: var(--text-muted); min-width: 132px; }
.emp-diff-from { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.emp-diff-change { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
.emp-diff-to { font-weight: var(--fw-medium); }
.emp-diff .icon { flex: none; color: var(--text-subtle); }

.emp-import-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-4); }
.emp-import-modal .modal-body > .callout + * { margin-top: 0; }   /* the body's gap already spaces them */
.emp-import-modal .modal-error { margin-bottom: 0; }
.emp-import-issues:empty { display: none; }
.emp-export-done .icon { color: var(--success); }