/* Management (mg-) and its Pay tab (pay-); then, from V1.44, a PO's currency and PDFs, the exchange rates, the rented employees.
   Moved out of app.css as they were (design system wave 0.4, Source\Docs\Design system\Design system.md section 14): one
   file per area, so that the app waves never edit the same file. Linked by Components\App.razor right after app.css,
   in the order the rules had there (home, admin, monitoring, management, account, messaging, support, training,
   azurecosts, tools), so every rule keeps its place in the cascade. Tokens only: light and dark both work. */

/* ===== Management ===== */
/* Master-detail grids: 2 or 3 columns of panels, each column a stack */
.mg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mg-kpis .kpi .value { font-size: 1.5rem; }
.mg-kpis .kpi .sub { margin-top: 2px; }
/* Tables: inactive row, worklog qty <> invoiced qty (Retool #df705f), changed row, inline inputs */
.table tr.mg-inactive td { color: var(--muted); background: var(--panel-2); }
.table tr.mg-mismatch td { background: #f6d3cd; }
.table tr.mg-dirty td { background: var(--note-soft); }
.table td.mg-check, .table th.mg-check { width: 34px; text-align: center; }
.mg-cell-input {
  width: 100%;
  min-width: 70px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}
.mg-cell-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.mg-cell-input.num { text-align: right; }
select.mg-cell-input { padding: 3px 4px; }
.mg-scroll { max-height: 420px; overflow: auto; }
.mg-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.mg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mg-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--note-soft);
}
.mg-savebar .spacer { flex: 1; }
.mg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.mg-filters input[type=date] { width: auto; min-width: 0; }
.mg-budget { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.mg-budget .track { flex: 1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--rule); }
.mg-budget .fill { height: 100%; border-radius: 4px; background: var(--accent); }
.mg-budget .fill.over { background: var(--bad); }
.mg-budget .pct { min-width: 42px; color: var(--muted); font-size: 0.78rem; text-align: right; }
.mg-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}
.mg-tag.good { background: var(--good-soft); color: var(--good-text); }
.mg-tag.bad { background: var(--bad-soft); color: var(--bad); }
.mg-tag.warn { background: var(--warn-soft); color: var(--warn); }
.mg-pdf { width: 100%; height: 75vh; border: 0; border-radius: 8px; background: var(--code-bg); }
.mg-notice { padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.86rem; }
.mg-notice.warn { background: var(--warn-soft); color: var(--warn); }
/* Invoice contacts (Invoice contacts tab of the client page, PO page) and the email recipients of an invoice */
.mg-wrap-head { flex-wrap: wrap; }
.mg-wrap-head .mud-button-root { white-space: nowrap; }
.mg-contacts { display: flex; flex-direction: column; }
.mg-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 4px; border-top: 1px solid var(--rule); }
.mg-contact:first-child { border-top: 0; }
.mg-group .mg-contact { padding: 8px 10px; }
.mg-contact .who { flex: 1 1 220px; min-width: 0; }
.mg-contact .who > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mg-contact .email { overflow-wrap: anywhere; }
.mg-contact .mg-type { min-width: 48px; justify-content: center; }
.mg-contact .mg-actions { margin-left: auto; }
.mg-contact.inactive { background: var(--panel-2); color: var(--muted); }
.mg-contact.inactive .mg-type { opacity: 0.6; }
.mg-group.mg-focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mg-recipients { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.86rem; }
.mg-recipients .grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mg-recipients .kind { color: var(--muted); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
.mg-recipients .addr { padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); overflow-wrap: anywhere; }
.mg-recipients-none { display: flex; align-items: flex-start; gap: 8px; }
.mg-contact-form { display: flex; flex-direction: column; gap: 6px; }
/* Drill-down pages: breadcrumbs, page header with key figures, status chips, forms, link rows, groups */
.mg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; color: var(--muted); font-size: 0.86rem; }
.mg-crumbs a { color: var(--accent); font-weight: 700; text-decoration: none; }
.mg-crumbs a:hover { text-decoration: underline; }
.mg-crumbs .sep { color: var(--muted); }
.mg-hero { display: flex; flex-direction: column; gap: 10px; }
.mg-hero-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mg-hero h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.35rem; }
.mg-hero .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
.mg-figures { display: flex; flex-wrap: wrap; gap: 22px; }
.mg-figures > div { display: flex; flex-direction: column; min-width: 90px; }
.mg-figures .label { color: var(--muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mg-figures .value { font-size: 1.15rem; font-weight: 800; }
.mg-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.mg-chip.good { background: var(--good-soft); color: var(--good-text); }
.mg-chip.bad { background: var(--bad-soft); color: var(--bad); }
.mg-chip.warn { background: var(--warn-soft); color: var(--warn); }
.mg-chip.info { background: var(--info-soft); color: var(--info); }
.mg-chip.neutral { background: var(--accent-soft); color: var(--accent-strong); }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-chipfilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.mg-chipfilter .n { color: var(--muted); font-weight: 600; }
.mg-chipfilter:hover { border-color: var(--accent); }
.mg-chipfilter.on { border-color: var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.mg-chipfilter.on .n { color: var(--os-on-accent-fill); opacity: 0.8; }
.mg-chipfilter.disabled { cursor: not-allowed; opacity: 0.5; }
.mg-search { width: 230px; }
.mg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mg-form label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.mg-form .mg-cell-input { font-size: 0.9rem; padding: 6px 8px; }
.mg-linktable tbody tr.link { cursor: pointer; }
.mg-linktable tbody tr.link:hover td { background: var(--accent-soft); }
.mg-linktable a { color: inherit; text-decoration: none; }
.mg-linktable td.mg-go { width: 28px; color: var(--muted); }
.mg-foot { margin-top: 8px; text-align: right; }
.mg-newbox { border: 1px solid var(--accent); }
.mg-addbox { margin-bottom: 12px; padding: 10px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--panel-2); }
.mg-group { margin-top: 8px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.mg-group-head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  background: var(--head-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  justify-content: flex-start;
}
button.mg-group-head { cursor: pointer; }
.mg-group .table { margin: 0; }
.mg-jira { display: inline-flex; align-items: center; gap: 8px; }
.mg-bad { color: var(--bad); font-weight: 700; }
.mg-kpilink { color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.mg-kpilink:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(141, 127, 86, 0.18); }
.mg-kpis.small { margin-bottom: 12px; }
.mg-kpis.small .kpi .value { font-size: 1.25rem; }
/* Cards (clients, POs): each card is a link to its page */
.mg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mg-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mg-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(141, 127, 86, 0.18); }
.mg-card .title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1rem; font-weight: 800; }
.mg-card .title .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-card .sub { color: var(--muted); font-size: 0.84rem; }
.mg-card .figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.mg-card .figs .label { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mg-card .figs .value { font-weight: 800; }
.mg-card.inactive { opacity: 0.65; background: var(--panel-2); }
.mg-card.add { align-items: center; justify-content: center; border-style: dashed; color: var(--accent); font-weight: 800; cursor: pointer; }
/* Section tabs inside a page (links with ?tab=) */
.mg-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 12px; border-bottom: 1px solid var(--rule); }
.mg-tabs a {
  margin-bottom: -1px;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.mg-tabs a:hover { color: var(--text); }
.mg-tabs a.on { border-bottom-color: var(--accent); color: var(--text); }
.mg-tabs a .n { margin-left: 4px; color: var(--muted); font-weight: 600; }
.mg-check-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.mg-empty-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; color: var(--muted); text-align: center; }
/* Dashboard: needs attention (each item opens the page where it is fixed) */
.mg-attention { display: flex; flex-direction: column; gap: 4px; }
.mg-attention .item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--rule);
  border-radius: 6px;
  background: var(--panel-2);
  color: inherit;
  text-decoration: none;
}
.mg-attention .item:hover { background: var(--accent-soft); }
.mg-attention .item .text { font-weight: 700; }
.mg-attention .item .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-attention .item .go { margin-left: auto; color: var(--muted); }
.mg-attention .item.bad { border-left-color: var(--bad); }
.mg-attention .item.bad .mud-icon-root:first-child { color: var(--bad); }
.mg-attention .item.warn { border-left-color: var(--warn); }
.mg-attention .item.warn .mud-icon-root:first-child { color: var(--warn); }
.mg-attention .item.info { border-left-color: var(--accent); }
.mg-attention .item.info .mud-icon-root:first-child { color: var(--accent); }
.mg-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.mg-link:hover { text-decoration: underline; }
.mg-shares { display: flex; flex-direction: column; gap: 6px; }
.mg-shares .share { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr) 90px; align-items: center; gap: 12px; padding: 4px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.mg-shares .share:hover { background: var(--accent-soft); }
.mg-shares .name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mg-shares .amount { font-weight: 700; text-align: right; }
/* App bar search (quick results) */
.apptabs:has(.mg-appsearch) { flex: 1; }
.mg-appsearch { position: relative; align-self: center; margin-left: auto; padding-left: 12px; }
.mg-appsearch input { width: 240px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--field); color: var(--text); font: inherit; font-size: 0.84rem; }
.mg-appsearch input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.mg-appsearch .results {
  position: absolute;
  z-index: 1300;
  top: calc(100% + 4px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mg-appsearch .hit { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.mg-appsearch .hit:hover, .mg-appsearch .hit.on { background: var(--accent-soft); }
.mg-appsearch .hit .kind { min-width: 58px; color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.mg-appsearch .hit .t { font-weight: 700; }
.mg-appsearch .hit .s { overflow: hidden; color: var(--muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.mg-appsearch .none { padding: 8px; color: var(--muted); font-size: 0.84rem; }
/* Pay tab: period picker, due line, warnings, hours per employee (rows expand to their 14 days); Settings > Pay */
.pay-page { display: flex; flex-direction: column; gap: 12px; }
.pay-pick { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pay-select { width: auto; min-width: 210px; padding: 5px 8px; font-size: 0.86rem; }
.pay-step {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
.pay-step:hover { border-color: var(--accent); background: var(--accent-soft); }
.pay-step.off { color: var(--faint); opacity: 0.5; }
.pay-due { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-weight: 800; }
.pay-due .mud-icon-root { flex: 0 0 auto; color: var(--accent); }
.pay-page .panel-head { flex-wrap: wrap; }
.pay-notice { display: flex; align-items: center; gap: 8px; }
.pay-notice .mud-icon-root { flex: 0 0 auto; }
.pay-notice.pay-warn { background: var(--warn-soft); color: var(--warn); }
.pay-notice.pay-bad { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.pay-table th small { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pay-table td.pay-total, .pay-table th.pay-total { background: var(--panel-2); color: var(--text); font-weight: 900; }
.pay-table td.pay-total { font-size: 0.95rem; }
.pay-table tfoot td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 900; }
.pay-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.pay-name:hover .strong { color: var(--accent); }
.pay-days-row td { padding-top: 2px; background: var(--panel-2); }
.pay-days { display: flex; flex-direction: column; gap: 6px; padding-left: 24px; }
.pay-week { display: grid; grid-template-columns: 76px repeat(7, minmax(0, 1fr)); align-items: center; gap: 4px; }
.pay-week-name { color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.pay-day { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 3px 2px; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); }
.pay-day .d { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.pay-day .h { font-variant-numeric: tabular-nums; font-weight: 700; }
.pay-day.weekend { background: var(--accent-soft); }
.pay-day.zero .h { color: var(--faint); font-weight: 400; }
.pay-foot { margin-top: 8px; }
.pay-settings { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pay-settings .panel-head { flex-wrap: wrap; }
.pay-calendar tr.pay-past td { color: var(--muted); }
.pay-calendar input[type=date] { min-width: 128px; }
.pay-calendar .mg-chip { margin-left: 4px; }
.pay-acct { width: 64px; min-width: 0; }
.pay-year { width: auto; min-width: 0; }
/* Pay tab, hours paid (PayPaidPanel, PayPaidDialog, PayPage summary): per employee and week, logged | paid (input) |
   difference; red chip "Changed after pay". Difference: logged - paid (up: hours not paid, red; down: orange; none: green) */
.pay-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-paid-help { margin: -4px 0 8px; }
.pay-paid-table th small { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pay-paid-table th.pay-wk, .pay-paid-table td.pay-wk { border-left: 2px solid var(--rule); }
.pay-paid-table th[colspan] { text-align: center; }
.pay-paid-table td { vertical-align: middle; }
.pay-paid-box { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pay-paid-input { width: 84px; min-width: 0; }
.pay-paid-input.invalid { border-color: var(--bad); background: var(--bad-soft); }
.pay-paid-state { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; }
.pay-paid-state .pay-saving { width: 16px !important; height: 16px !important; color: var(--accent); }
.pay-paid-state .pay-saved { color: var(--good-text); }
.pay-paid-state .pay-error { color: var(--bad); }
.pay-paid-error { display: block; max-width: 220px; margin-top: 2px; margin-left: auto; color: var(--bad); font-size: 0.74rem; font-weight: 700; text-align: right; white-space: normal; }
.pay-diff-cell { white-space: nowrap; }
.pay-diff { font-variant-numeric: tabular-nums; font-weight: 800; }
.pay-diff-up { color: var(--bad); }
.pay-diff-down { color: var(--warn); }
.pay-diff-zero { color: var(--good-text); }
.pay-chip { margin-left: 6px; border: 0; cursor: pointer; font-family: inherit; }
.pay-chip:hover, .pay-chip:focus-visible { outline: 2px solid var(--bad); outline-offset: 1px; }
.pay-more {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
}
.pay-more:hover, .pay-more:focus-visible { background: var(--accent-soft); color: var(--text); }
.pay-paid-summary .pay-sum-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pay-paid-summary .pay-sum-person { display: inline-flex; gap: 6px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 60%, transparent); color: var(--text); font-weight: 700; }
.pay-notice.pay-ok { background: var(--good-soft); color: var(--good-text); }
.pay-dialog-title { font-weight: 800; }
.pay-dialog { display: flex; flex-direction: column; gap: 10px; }
.pay-dialog h4 { margin: 8px 0 0; font-size: 0.95rem; }
.pay-dialog .nowrap { white-space: nowrap; }
@media (max-width: 800px) {
  .mg-search { width: 100%; }
  .mg-figures { gap: 14px; }
  /* Phone: the seven tabs wrap and the search takes its own line (the page no longer scrolls sideways) */
  .apptabs:has(.mg-appsearch) { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .apptabs:has(.mg-appsearch) .apptab { min-height: 34px; }
  .mg-appsearch { flex: 1 1 100%; margin-left: 0; padding: 0 0 8px; }
  .mg-appsearch input { width: 100%; }
  .mg-appsearch .results { left: 0; width: auto; }
}
@media (max-width: 1100px) {
  .mg-cols, .pay-settings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pay-pick { flex: 1 1 100%; }
  .pay-select { flex: 1; min-width: 0; }
  .pay-table th, .pay-table td { padding: 6px 4px; }
  .pay-table th { font-size: 0.64rem; letter-spacing: 0; }
  .pay-table td { font-size: 0.8rem; }
  .pay-table td.pay-total { font-size: 0.86rem; }
  .pay-days { padding-left: 0; }
  .pay-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .pay-week-name { grid-column: 1 / -1; }
  .pay-day .d { font-size: 0.62rem; }
  .pay-day .h { font-size: 0.78rem; }
  /* Hours paid: one card per employee, its name, then week 1 and week 2 on a line each (logged | paid | difference) with
     the column titles in the cells (data-label) */
  .pay-paid-table thead { display: none; }
  .pay-paid-table, .pay-paid-table tbody { display: block; }
  .pay-paid-table tr { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .pay-paid-table td { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 0; border: 0 !important; text-align: left; white-space: normal; }
  .pay-paid-table td.pay-paid-name { grid-column: 1 / -1; }
  .pay-paid-table td.num { text-align: left; }
  .pay-paid-table td[data-label]::before { content: attr(data-label); max-width: 100%; color: var(--muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: normal; }
  .pay-paid-box { justify-content: flex-start; }
  .pay-paid-input { width: 76px; font-size: 1rem; }
  .pay-paid-error { margin-left: 0; text-align: left; }
  .pay-chip { max-width: 100%; margin: 4px 0 0; white-space: normal; text-align: left; }
}
/* Printed Pay tab: the period, its warnings and the table only (no bars, buttons or scrolling area) */
@media print {
  html:has(.pay-page), body:has(.pay-page) { display: block; height: auto; background: #ffffff; }
  body:has(.pay-page) .topbar, .pay-noprint { display: none !important; }
  body:has(.pay-page) .content { display: block; overflow: visible; padding: 0; }
  .pay-page .panel { margin-bottom: 10px; padding: 0; border: 0; box-shadow: none; }
  .pay-page .table-wrap { overflow: visible; }
  .pay-page .pay-name { cursor: default; }
}
/* Management: worklog quantity differs from the invoiced one (Retool's pink) */
:root[data-theme="dark"] .table tr.mg-mismatch td { background: #46241f; }

/* Management V1.18: the accountant's mark in the invoice list */
.mg-accountant { display: inline-flex; align-items: center; gap: 4px; color: var(--good-text); font-size: 0.82rem; }

/* Management, V1.44 (Theme 2, Money): the currency of a PO, its PDFs, the exchange rates and the rented employees
   (Client\Apps\Management: PoPage, PoPdfsPanel, PoPdfsMissingPage, FxRatesPanel, RentedEmployeesPage). The other Management
   rules (mg-*) are above (app.css's until wave 0.4). Theme variables only: light and dark both work. */

/* The currency's code beside a PO's or an invoice's title ("USD") */
.mg-chip.mg-currency,
.tk-mx-badge.mg-currency { background: var(--info-soft); color: var(--info); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }

/* The count of what has no PDF on the PO page's tab */
.mg-tabs .n.mg-missing { background: var(--warn-soft); color: var(--warn); }

/* The note under the dashboard's tiles: the amounts are in CAD */
.mg-cad-note { margin: -4px 0 10px; }

/* The PDFs tab: one block for the PO and one per extension */
.mg-pdf-list { display: flex; flex-direction: column; gap: 10px; }
.mg-pdf-target { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; background: var(--panel); }
.mg-pdf-target.missing { border-color: var(--warn); background: var(--warn-soft); }
.mg-pdf-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-pdf-head .spacer, .mg-pdf-file .spacer { flex: 1; }
.mg-pdf-file { display: flex; align-items: center; gap: 8px; padding: 4px 0 0 4px; border-top: 1px solid var(--rule); margin-top: 6px; flex-wrap: wrap; }
.mg-pdf-file a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.mg-pdf-file a:hover { text-decoration: underline; }

/* The exchange rates panel of Settings */
.mg-fx-h { margin: 14px 0 6px; font-size: 0.95rem; }
.mg-fx-missing, .mg-fx-rates { max-height: 320px; overflow-y: auto; }

/* The rented employees: an estimated month (no vendor invoice yet) */
td.mg-estimated { font-style: italic; color: var(--muted); }