:root {
  color-scheme: light;
  --bg: #f7f7f7;
  --ink: #252525;
  --muted: #706862;
  --line: #ded3c8;
  --accent: #f6851f;
  --accent-strong: #c86312;
  --accent-soft: #fff0df;
  --accent-line: #f7c18e;
  --anthracite: #2f3233;
  --panel: #fff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.pageLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(247, 247, 247, 0.72);
  backdrop-filter: blur(2px);
}

.pageLoadingOverlay[hidden] {
  display: none;
}

.pageLoadingCard {
  display: grid;
  min-width: min(320px, 100%);
  justify-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(37, 37, 37, 0.18);
  color: var(--anthracite);
}

.pageLoadingCard span:last-child {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.pageSpinner {
  width: 42px;
  height: 42px;
  border: 4px solid #ffe2c2;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pageSpin 0.8s linear infinite;
}

body.compareLoading {
  cursor: progress;
}

.sortDisabled {
  cursor: progress;
}

@keyframes pageSpin {
  to {
    transform: rotate(360deg);
  }
}

.shell {
  width: min(1220px, calc(100% - 32px));
  margin: 32px auto;
}

.panel,
.summary,
.exportBar,
.tableWrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(37, 37, 37, 0.08);
}

.panel {
  padding: 24px;
}

.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.navCluster,
.navLinks {
  display: flex;
  align-items: center;
  gap: 12px;
}

.adminNavCluster {
  align-items: flex-start;
}

.adminNav {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 760px;
}

.navCluster a,
.navLinks a {
  color: var(--accent);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.navCluster a:hover,
.navLinks a:hover,
.navLinks a.active {
  color: #555;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--accent);
}

.shellSmall {
  max-width: 560px;
}

h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.titleStatus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.titleStatus h1 {
  margin-bottom: 0;
}

p {
  margin: 0;
  color: var(--muted);
}

.status {
  min-width: 96px;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.form {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
  align-items: end;
}

.formLogin,
.weekForm {
  grid-template-columns: 1fr;
}

.filterGrid {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.7fr 1fr 0.7fr;
  gap: 14px;
  align-items: end;
}

.compareFilterGrid {
  grid-template-columns: minmax(240px, 1fr) 140px 160px minmax(240px, 0.95fr);
}

.compareModeSwitch {
  display: inline-flex;
  margin: 16px 0 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f3f4f6;
}

.compareModeSwitch a {
  min-width: 92px;
  padding: 7px 12px;
  border-radius: 4px;
  color: #555;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.compareModeSwitch a:hover,
.compareModeSwitch a.active {
  background: var(--accent);
  color: #555;
}

.statusFilterGroup {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.compareToggleRow {
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
}

.compareToggleRow .statusToggles {
  flex: 0 1 auto;
  gap: 6px;
}

.compareToggleRow .statusToggle {
  min-height: 30px;
  padding: 0 10px;
  font-size: 11.5px;
}

.filterInlineLabel {
  margin-left: 8px;
}

.statusToggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.statusToggle {
  min-height: 32px;
  padding: 0 12px;
  border-color: #d1d5db;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  line-height: 1;
}

.statusToggle.active {
  box-shadow: 0 0 0 2px rgba(37, 37, 37, 0.08), 0 8px 18px rgba(37, 37, 37, 0.08);
  transform: translateY(-1px);
}

.statusToggle.active:hover {
  box-shadow: 0 0 0 2px rgba(37, 37, 37, 0.12), 0 10px 20px rgba(37, 37, 37, 0.10);
}

.statusToggle.ok.active {
  background: #dff4e9;
  color: #10613f;
  border-color: #91d6b2;
}

.statusToggle.mismatch.active {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
}

.statusToggle.missing_project_pdf.active,
.statusToggle.missing_employee_entry.active {
  background: #fff1f2;
  color: #b91c1c;
  border-color: #fda4af;
}

.statusToggle.not_applicable.active {
  background: #e0f2fe;
  color: #075985;
  border-color: #7dd3fc;
}

.employmentToggle.active {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: #c084fc;
}

.employmentToggle[data-employment-type="zzp"].active {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #a78bfa;
}

.employmentToggle[data-employment-type="loondienst"].active {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: #c084fc;
}

.employmentToggle[data-employment-type="inleen"].active {
  background: #fae8ff;
  color: #86198f;
  border-color: #e879f9;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 18px;
  margin-top: 18px;
}

.employeeDetailPanel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.employeeSearchPanel label {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.employeeSubPanel {
  padding: 16px;
  border: 1px solid #ead7c5;
  border-radius: 8px;
  background: #fffaf5;
}

.employeeInfoBox {
  border-color: #f3bd84;
  background: #fff;
}

.employeeSubPanel h2 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(246, 133, 31, 0.26);
  color: var(--anthracite);
}

.employeeDetailPanel label:not(.check) {
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.employeeDetailPanel label:not(.check) input,
.employeeDetailPanel label:not(.check) select {
  min-height: 38px;
}

#employeeForm {
  gap: 10px;
}

#employeeForm .actions {
  padding-top: 4px;
}

.employeeActiveCheck {
  margin-left: 144px;
  min-height: 34px;
}

.detailPanel h2,
.topPanel h2,
.panel h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.flatTop {
  margin-top: 0;
}

.hoursPanel {
  margin-top: 18px;
  padding: 24px;
}

.demoControlGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  margin-top: 18px;
}

.demoControlPanel {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border-color: #f5b678;
  background: #fff7ed;
  box-shadow: 0 8px 20px rgba(246, 133, 31, 0.10);
}

.demoControlPanel h2 {
  margin-bottom: 5px;
}

.demoControlPanel p {
  font-size: 13px;
  line-height: 1.35;
}

.demoHoursPanel {
  grid-column: 1 / -1;
}

.demoHoursForm {
  grid-template-columns: 110px 120px minmax(180px, 1fr) auto;
  gap: 10px;
}

.cleanupImportsForm {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cleanupImportsForm .actions {
  grid-column: 1 / -1;
}

.demoControlPanel input,
.demoControlPanel select,
.demoControlPanel button {
  min-height: 38px;
}

.demoResetPanel {
  border-color: #f1b4ae;
  background: #fff3ed;
}

.demoResetPanel h2 {
  color: #8d1b13;
}

.demoResetPanel .actions {
  justify-content: center;
}

.dayGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 6px;
  font-weight: 700;
}

.alert.ok {
  background: #e4f5ec;
  color: #10613f;
}

.alert.bad {
  background: #fde8e8;
  color: #9b1c1c;
}

.aliasBox {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.employeeDetailPanel .aliasBox {
  margin-top: 0;
  border-top: 1px solid #ead7c5;
  padding-top: 16px;
}

.aliasItem,
.rankRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.aliasInfo {
  min-width: 0;
}

.aliasBoxHeader,
.aliasTitleLine,
.aliasSources,
.aliasSourceLegend {
  display: flex;
  align-items: center;
}

.aliasBoxHeader {
  justify-content: space-between;
  gap: 12px;
}

.aliasBoxHeader h2 {
  margin: 0;
}

.aliasTitleLine {
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 7px;
}

.aliasName {
  font-weight: 800;
}

.aliasSources,
.aliasSourceLegend {
  gap: 4px;
}

.aliasSourceBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.aliasSourceBadge.customer_file {
  background: #f6851f;
  border-color: #d96c0d;
}

.aliasSourceBadge.employee_form {
  background: #7754a5;
  border-color: #62418d;
}

.aliasSourceBadge.manual {
  background: #555;
  border-color: #3f3f3f;
}

.aliasSourceBadge.account {
  background: #24836b;
  border-color: #176c57;
}

.aliasSourceBadge.historical {
  background: #e1e4e8;
  border-color: #c8cdd3;
  color: #555;
}

.aliasProjects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aliasProjectTile {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(246, 133, 31, 0.35);
  border-radius: 6px;
  background: #fff0e3;
  color: #5b2b05;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.aliasProjectTile.empty {
  border-color: #d7d7d7;
  background: #eeeeee;
  color: #666;
}

.mergeBox {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.mergeBox label {
  margin-top: 10px;
}

.employeeDetailPanel .mergeBox {
  margin-top: 0;
  border-top: 1px solid #ead7c5;
  padding-top: 16px;
}

.employeeDetailPanel .mergeBox label {
  margin-top: 0;
}

.mergeSourceRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.mergeSourceList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  margin-top: 10px;
}

.mergeSourceChip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(246, 133, 31, 0.35);
  border-radius: 6px;
  background: #fff0e3;
  color: #5b2b05;
  font-size: 12px;
  font-weight: 800;
}

.mergeSourceChip button {
  width: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}

.mergePreview {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.mergePreview strong {
  color: var(--ink);
}

.mergePreview ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.rankRow {
  grid-template-columns: 34px 1fr auto;
}

.rankRow span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #e8eef3;
  font-weight: 700;
}

.rankRow em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-strong);
}

.inlineForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(246, 133, 31, 0.18);
  outline: none;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.check input {
  width: auto;
  min-height: auto;
}

.hiddenField {
  display: none !important;
}

.importForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  align-items: stretch;
}

.fileDropZone {
  position: relative;
  min-height: 170px;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  border: 2px dashed rgba(246, 133, 31, 0.48);
  border-radius: 8px;
  background: #fff7ed;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.fileDropZone:hover,
.fileDropZone.isDragging {
  border-color: var(--accent);
  background: #ffedd5;
}

.fileDropZone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.fileDropTitle {
  color: var(--accent-strong);
  font-size: 18px;
  font-weight: 800;
}

.fileDropText {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.fileDropName {
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.actions.importActions {
  display: grid;
  align-content: center;
  justify-content: stretch;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.actions.importActions button,
.actions.importActions .status {
  width: 100%;
}

.travelSplitCheck {
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(246, 133, 31, 0.35);
  border-radius: 8px;
  background: #fff7ed;
  font-weight: 800;
}

.travelSplitCheck:has(input:checked) {
  border-color: var(--accent);
  background: #ffedd5;
}

.travelHoursRow td {
  background: #fff7ed;
}

.correctionHoursRow td {
  background: #fff4e8;
}

.hourTypeLabel {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ececec;
  color: #444;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.hourTypeLabel.travel {
  background: #fed7aa;
  color: #7c2d12;
}

.hourTypeLabel.correction {
  background: #ffedd5;
  color: #9a3412;
}

.hourTypeDetail {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

button.primary:hover {
  background: var(--accent-strong);
  color: #fff;
}

button.dangerButton {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

button.dangerButton:hover {
  border-color: #8d1b13;
  background: #8d1b13;
  color: #fff;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

button:disabled:hover {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

button.primary:disabled,
button.primary:disabled:hover {
  border-color: #c8c8c8;
  background: #d8d8d8;
  color: #555;
}

.buttonLink {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.buttonLink:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

.actionRow {
  margin-top: 14px;
}

.unlinkedName {
  display: inline-block;
  margin-right: 6px;
}

.unlinkedButton {
  display: inline-grid;
  width: 22px;
  min-height: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border-color: #f5c28d;
  border-radius: 50%;
  background: #fff3e8;
  color: #9a4b05;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.unlinkedButton:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.aliasLinkPopover {
  position: absolute;
  z-index: 50;
  padding: 14px;
  border: 1px solid rgba(246, 133, 31, 0.35);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(20, 20, 20, 0.18);
}

.aliasLinkHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.aliasLinkHead strong {
  line-height: 1.25;
}

.aliasLinkClose {
  width: 26px;
  min-height: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #555;
}

.aliasLinkMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.aliasLinkMeta span,
.aliasLinkHint,
.aliasLinkSelected,
.aliasLinkMessage {
  border-radius: 6px;
  background: #f1f1f1;
  color: #555;
  font-size: 12px;
  font-weight: 800;
}

.aliasLinkMeta span {
  padding: 4px 7px;
}

.aliasLinkSearch {
  display: grid;
  gap: 6px;
}

.aliasLinkSearch input {
  min-height: 38px;
}

.aliasLinkResults {
  display: grid;
  gap: 6px;
  max-height: 190px;
  margin-top: 8px;
  overflow: auto;
}

.aliasEmployeePick {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
  text-align: left;
}

.aliasEmployeePick span {
  color: #777;
  font-size: 12px;
}

.aliasEmployeePick.isInactive {
  opacity: 0.62;
}

.aliasLinkHint,
.aliasLinkSelected,
.aliasLinkMessage {
  display: block;
  padding: 8px 9px;
}

.aliasLinkSelected {
  margin-top: 8px;
  background: #e7f4ec;
  color: #10613f;
}

.aliasLinkSelected.bad {
  background: #fff1f2;
  color: #b91c1c;
}

.aliasLinkMessage {
  margin-top: 8px;
  background: #e7f4ec;
  color: #10613f;
}

.aliasLinkMessage.bad,
.aliasLinkError {
  color: #9b1c1c;
}

.aliasLinkActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.aliasLinkActions button {
  min-height: 34px;
  padding: 0 10px;
}

.employeeMappingActions {
  align-items: stretch;
}

.statusToggle.ok.active:hover {
  border-color: #91d6b2;
  background: #dff4e9;
  color: #10613f;
}

.statusToggle.mismatch.active:hover {
  border-color: #fdba74;
  background: #ffedd5;
  color: #c2410c;
}

.statusToggle.missing_project_pdf.active:hover,
.statusToggle.missing_employee_entry.active:hover {
  border-color: #fda4af;
  background: #fff1f2;
  color: #b91c1c;
}

.statusToggle.not_applicable.active:hover {
  border-color: #7dd3fc;
  background: #e0f2fe;
  color: #075985;
}

.employmentToggle.active:hover {
  border-color: #c084fc;
  background: #f3e8ff;
  color: #6b21a8;
}

.employmentToggle[data-employment-type="zzp"].active:hover {
  border-color: #a78bfa;
  background: #ede9fe;
  color: #5b21b6;
}

.employmentToggle[data-employment-type="loondienst"].active:hover {
  border-color: #c084fc;
  background: #f3e8ff;
  color: #6b21a8;
}

.employmentToggle[data-employment-type="inleen"].active:hover {
  border-color: #e879f9;
  background: #fae8ff;
  color: #86198f;
}

.sourceTooltip {
  position: fixed;
  z-index: 120;
  width: min(720px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 28px));
  padding: 14px;
  border: 1px solid rgba(246, 133, 31, 0.42);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(37, 37, 37, 0.22);
  overflow: auto;
  pointer-events: auto;
}

.sourceTooltipHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 3px;
}

.sourceTooltipHead strong {
  color: var(--anthracite);
  font-size: 16px;
}

.sourceTooltipHead span,
.sourceTooltipSub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sourceTooltipSub {
  margin-bottom: 12px;
}

.sourceTooltipGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sourceSection {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf5;
}

.sourceSection h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--anthracite);
  font-size: 13px;
}

.sourceSection h3 span {
  color: var(--accent-strong);
  font-size: 12px;
  white-space: nowrap;
}

.sourceRows {
  display: grid;
  gap: 8px;
}

.sourceItem {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(246, 133, 31, 0.22);
  border-radius: 7px;
  background: #fff;
}

.employeeSourceItem {
  gap: 4px;
}

.sourceFormItemId {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.sourceFormEntry {
  min-width: 0;
  grid-template-columns: 78px 66px minmax(70px, 1fr) 70px;
  gap: 6px;
  padding: 2px 0;
  border-top: 0;
  color: var(--anthracite);
  line-height: 1.35;
}

.sourceFormEntry strong,
.sourceFormEntry span,
.sourceFormEntry small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sourceFormEntry small {
  color: var(--muted);
}

.sourceItemTop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.sourceItemTop strong {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.sourceItemTop span,
.sourceItemTop a {
  min-width: 0;
  overflow: hidden;
  color: var(--anthracite);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
}

.sourceFileLink {
  display: block;
  white-space: nowrap;
}

.sourceFileLink:hover,
.sourceFileLink:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .sourceFormEntry {
    grid-template-columns: 74px 62px minmax(64px, 1fr);
  }

  .sourceFormEntry > :last-child {
    grid-column: 3;
  }
}

.sourceMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sourceMeta span {
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  background: #f1f1f1;
  color: #555;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.sourceEmpty,
.sourceLoading,
.sourceNote {
  margin: 0;
  padding: 9px;
  border-radius: 7px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.sourceEmpty.bad {
  background: #fde8e8;
  color: #9b1c1c;
}

.sourceNote {
  margin-top: 8px;
  background: #fff0df;
  color: #7a3b05;
  font-weight: 700;
}

.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
}

.summary div {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: #fffaf5;
}

.summary strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.summary span {
  font-weight: 700;
}

.summary .validation {
  color: #fff;
}

.summary .validation strong {
  color: rgba(255, 255, 255, 0.78);
}

.summary .validation.ok {
  background: #147a52;
}

.summary .validation.warn {
  background: #9a6a14;
}

.summary .validation.bad {
  background: #a83232;
}

.exportBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 14px;
}

.exportBar > div:first-child {
  display: grid;
  gap: 3px;
}

.exportBar strong {
  color: var(--anthracite);
}

.exportBar span {
  color: var(--muted);
  font-size: 13px;
}

.exportIconButton {
  display: inline-grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  place-items: center;
  padding: 0;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}

.exportIconButton img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.exportIconButton.excel img {
  width: 72px;
  max-width: none;
  height: 48px;
  mix-blend-mode: multiply;
}

.exportIconButton:hover {
  border-color: var(--accent-line);
  background: #fff7ed;
}

.exportIconButton:disabled,
.exportIconButton:disabled:hover {
  border-color: transparent;
  background: transparent;
}

.exportIconButton:disabled img,
.exportIconButton:disabled:hover img {
  filter: grayscale(1);
  opacity: 0.42;
}

.tableWrap {
  margin-top: 18px;
  overflow: auto;
}

.clickRow {
  cursor: pointer;
}

.clickRow:hover {
  background: var(--accent-soft);
}

#cmpRows tr > td,
#travelCmpRows tr > td {
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

#cmpRows tr:hover > td,
#travelCmpRows tr:hover > td {
  background: #ffe9d2;
  box-shadow: inset 0 1px #f6c18b, inset 0 -1px #f6c18b;
}

#cmpRows tr:hover > td:first-child,
#travelCmpRows tr:hover > td:first-child {
  box-shadow: inset 3px 0 var(--accent), inset 0 1px #f6c18b, inset 0 -1px #f6c18b;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.selectCol {
  width: 44px;
  text-align: center;
}

.selectCol input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

th {
  position: sticky;
  top: 0;
  background: var(--anthracite);
  color: #fff8f0;
  font-size: 12px;
  text-transform: uppercase;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: #ffd5ac;
}

th.sortable::after {
  display: inline-block;
  width: 12px;
  margin-left: 6px;
  color: #fbd0a6;
  content: "\25B3";
}

th.sortable.sorted::after {
  color: var(--accent);
  content: "\25BC";
}

th.sortable.sorted[data-direction="asc"]::after {
  content: "\25B2";
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.centered {
  text-align: center;
}

.pill {
  display: inline-block;
  min-width: 80px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1ebe5;
  color: var(--anthracite);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.pill.ok {
  background: #dff4e9;
  color: #10613f;
}

.pill.mismatch {
  background: #ffedd5;
  color: #c2410c;
}

.pill.submitted {
  background: #e2edf8;
  color: #1d4f7a;
}

.pill.success {
  background: #dff4e9;
  color: #10613f;
}

.pill.failed {
  background: #fde8e8;
  color: #9b1c1c;
}

.pill.pending_employee {
  background: #fff1f2;
  color: #9f1239;
}

.pill.rejected {
  background: #eceff1;
  color: #555;
}

.pill.imported {
  background: #dff4e9;
  color: #10613f;
}

.pill.conflict {
  background: #ffedd5;
  color: #c2410c;
}

.pill.duplicate,
.pill.new {
  background: #e0f2fe;
  color: #075985;
}

.pill.ignored,
.pill.superseded,
.pill.partially_superseded {
  background: #ececec;
  color: #555;
}

.externalSummary {
  grid-template-columns: repeat(4, 1fr);
}

.externalConflictSubmission > td {
  background: #fffaf5;
  vertical-align: top;
}

.externalStatusMessage {
  width: 180px;
  margin-top: 7px;
  color: #8a4b16;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.externalComparisons {
  min-width: 620px;
}

.externalComparison {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  white-space: normal;
}

.externalComparisonHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: var(--anthracite);
}

.externalComparisonHead .pill {
  min-width: 64px;
}

.externalComparisonValues {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 8px;
}

.externalComparisonValues > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 4px 8px;
  padding: 8px;
  border-left: 3px solid #d5d5d5;
  background: #f7f7f7;
}

.externalComparisonValues > div:last-child {
  border-left-color: var(--accent);
  background: #fff3e8;
}

.externalComparisonValues small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 800;
}

.externalComparisonValues span {
  padding: 3px 5px;
  border-radius: 4px;
}

.externalComparisonValues .changed {
  background: #ffe0bd;
  color: #8a3f00;
  font-weight: 800;
}

.externalComparisonValues .externalEmptyValue {
  grid-column: 1 / -1;
  color: var(--muted);
}

.externalReviewActions {
  display: grid;
  min-width: 175px;
  gap: 8px;
}

.externalReviewActions button {
  width: 100%;
}

.externalSubmissionActions {
  display: grid;
  min-width: 112px;
  gap: 7px;
}

.externalSubmissionActions button {
  width: 100%;
}

.submissionStatusNote {
  max-width: 180px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.miniEntries {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  min-width: 300px;
}

.miniEntry {
  display: grid;
  grid-template-columns: 86px 72px 1fr 90px;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.compactInline {
  grid-template-columns: minmax(220px, 1fr);
  margin-top: 0;
}

.unknownActions {
  display: grid;
  min-width: 280px;
  gap: 10px;
}

[data-select-unknown] {
  width: auto;
  min-height: auto;
}

.unknownActions .inlineForm {
  display: grid;
  gap: 8px;
}

.projectListCell {
  max-width: 360px;
  color: var(--muted);
  font-size: 13px;
}

.pagerPanel {
  margin-top: 14px;
}

.smallLink {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.mutedText {
  color: var(--muted);
  font-size: 12px;
}

.hoursRowTooltip {
  position: fixed;
  z-index: 1200;
  width: min(390px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(246, 133, 31, 0.42);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(37, 37, 37, 0.2);
  color: var(--ink);
  pointer-events: none;
}

.hoursRowTooltip[hidden] {
  display: none;
}

.hoursTooltipHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.hoursTooltipHead span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.hoursTooltipTotals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
}

.hoursTooltipTotals div {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 5px;
  background: #fff4e8;
}

.hoursTooltipTotals span,
.hoursTooltipDetails strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.hoursTooltipTotals strong {
  color: var(--accent-strong);
  font-size: 16px;
}

.hoursTooltipDetails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.hoursTooltipDetails span {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

#phRows tr[data-hours-row-index] > td,
#ehRows tr[data-hours-row-index] > td {
  transition: background-color 0.12s ease;
}

#phRows tr[data-hours-row-index]:hover > td,
#phRows tr.hoursRowActive > td,
#ehRows tr[data-hours-row-index]:hover > td,
#ehRows tr.hoursRowActive > td {
  background: #fff7ed;
}

.naBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 56px;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.naBadge::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  content: "";
}

.pill.missing_employee_entry,
.pill.mist_medewerker_uren {
  background: #fff1f2;
  color: #b91c1c;
}

.pill.missing_project_pdf,
.pill.mist_project_pdf {
  background: #fff1f2;
  color: #b91c1c;
}

.pill.not_applicable {
  background: #e0f2fe;
  color: #075985;
}

.pill.employmentType {
  min-width: 72px;
  background: #f3e8ff;
  color: #6b21a8;
}

.pill.employmentType.zzp,
.pill.employmentType.loondienst,
.pill.employmentType.inleen {
  background: #f3e8ff;
  color: #6b21a8;
}

.pill.employmentType.zzp {
  background: #ede9fe;
  color: #5b21b6;
}

.pill.employmentType.loondienst {
  background: #f3e8ff;
  color: #6b21a8;
}

.pill.employmentType.inleen {
  background: #fae8ff;
  color: #86198f;
}

.kpiGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0;
}

.kpi {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(37, 37, 37, 0.07);
}

a.kpi {
  color: inherit;
  text-decoration: none;
}

.kpiLink {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kpiLink:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 30px rgba(246, 133, 31, 0.16);
  transform: translateY(-2px);
}

.kpi strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.kpi span {
  font-size: 26px;
  font-weight: 800;
  color: var(--anthracite);
}

.bubbleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.bubble {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  text-align: center;
  aspect-ratio: 1;
}

.bubble strong {
  font-size: 15px;
}

.bubble span {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-strong);
}

.bubble small {
  color: var(--muted);
  line-height: 1.35;
}

.dangerZone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  border-color: #f1b4ae;
  background: #fff8f7;
}

.dangerZone h2 {
  margin: 0 0 6px;
  color: #8d1b13;
  font-size: 18px;
}

.dashboardPage {
  background: var(--bg);
}

.dashboardShell {
  display: grid;
  gap: 18px;
}

.dashboardHero {
  overflow: hidden;
}

.dashboardHeader {
  align-items: flex-start;
}

.dashboardHeader .navLinks {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dashboardFilters {
  grid-template-columns: 1fr 160px 140px;
  max-width: 620px;
}

.dashboardFilters label[hidden],
.dashboardTrendPanel[hidden] {
  display: none !important;
}

.dashboardPage .kpiGrid {
  margin: 0;
}

.dashboardPage .kpi {
  min-height: 112px;
}

.dashboardPage .panel {
  min-width: 0;
}

.dashboardProjects {
  overflow: hidden;
}

.dashboardSectionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.dashboardSectionHeading h2 {
  margin: 0;
  font-size: 19px;
}

.dashboardTrendLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboardTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboardTrendLegend i {
  display: inline-block;
  width: 18px;
  height: 7px;
  border-radius: 999px;
}

.dashboardMonthChart {
  gap: 9px;
}

.dashboardMonthRow {
  grid-template-columns: 42px minmax(0, 1fr) 180px;
}

.dashboardPage .bubble {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboardPage .bubble:hover {
  box-shadow: 0 12px 26px rgba(246, 133, 31, 0.18);
  transform: translateY(-2px);
}

.dashboardProShell {
  max-width: 1380px;
}

.proKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.proPanel {
  min-width: 0;
}

.proPanel h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.proScorePanel > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.scoreRing {
  display: grid;
  width: 164px;
  height: 164px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(var(--accent) calc(var(--score) * 1%), #f1ebe5 0);
}

.scoreRing.ok {
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(#16a34a calc(var(--score) * 1%), #f1ebe5 0);
}

.scoreRing.warn {
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(#f6851f calc(var(--score) * 1%), #f1ebe5 0);
}

.scoreRing.bad {
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(#dc2626 calc(var(--score) * 1%), #f1ebe5 0);
}

.scoreRing strong {
  align-self: end;
  font-size: 34px;
  line-height: 1;
}

.scoreRing span {
  align-self: start;
  color: var(--muted);
  font-weight: 700;
}

.statusLegend {
  display: grid;
  gap: 8px;
}

.statusLegend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffaf5;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.statusLegend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af;
}

.statusLegend i.ok,
.statusLegend i.imported {
  background: #16a34a;
}

.statusLegend i.mismatch {
  background: #f6851f;
}

.statusLegend i.missing_project_pdf,
.statusLegend i.missing_employee_entry,
.statusLegend i.pending_employee {
  background: #dc2626;
}

.statusLegend span strong {
  margin-left: auto;
  color: var(--anthracite);
}

.miniKpi {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.miniKpi strong {
  font-size: 30px;
}

.miniKpi span {
  color: var(--muted);
  font-weight: 700;
}

.proChart {
  display: grid;
  gap: 10px;
}

.dualBarRow {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 128px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.dualBars {
  display: grid;
  gap: 4px;
}

.dualBars i {
  display: block;
  height: 9px;
  border-radius: 999px;
}

.projectBar {
  background: var(--accent);
}

.employeeBar {
  background: var(--anthracite);
}

.dualBarRow strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dayBar {
  display: grid;
  grid-template-rows: auto 150px auto;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

#proWeekdays {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
}

.dayBar > div {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  min-height: 150px;
  border-bottom: 1px solid var(--line);
}

.dayBar i {
  display: block;
  width: 16px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
}

.dayBar span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.projectHealthGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.healthCard {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 6px solid #16a34a;
  border-radius: 8px;
  background: #fff;
}

.healthCard.warn {
  border-left-color: #f6851f;
}

.healthCard.bad {
  border-left-color: #dc2626;
}

.healthCard div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.healthCard span,
.healthCard small {
  color: var(--muted);
}

.healthCard b {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #dff4e9;
  color: #10613f;
  font-size: 12px;
}

.healthCard.warn b {
  background: #ffedd5;
  color: #c2410c;
}

.healthCard.bad b {
  background: #fff1f2;
  color: #b91c1c;
}

.issueRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.issueRow div {
  display: grid;
  gap: 3px;
}

.issueRow span {
  color: var(--muted);
  font-size: 12px;
}

.issueRow em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent-strong);
}

.miniTable {
  width: 100%;
}

.miniTable th,
.miniTable td {
  white-space: normal;
}

.pill.validated {
  background: #dff4e9;
  color: #10613f;
}

.pill.missing_pdf_total {
  background: #ffedd5;
  color: #c2410c;
}

.helpShell {
  width: min(1380px, calc(100% - 32px));
}

.helpHero {
  margin-bottom: 18px;
}

.helpSearchRow {
  display: grid;
  grid-template-columns: minmax(260px, 720px) auto 1fr;
  gap: 10px;
  align-items: end;
}

.helpSearchLabel {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.helpSearchStatus {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.helpVersion {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.helpLayout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.helpToc {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  padding: 18px;
  overflow: auto;
}

.helpToc > strong {
  display: block;
  margin-bottom: 10px;
  color: var(--anthracite);
  font-size: 15px;
}

.helpToc nav {
  display: grid;
  gap: 2px;
}

.helpToc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 7px 6px;
  border-radius: 4px;
  color: #555;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
}

.helpToc a:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.helpToc a span {
  color: var(--accent-strong);
  font-weight: 800;
}

.helpContent {
  min-width: 0;
  padding: 0 28px;
}

.helpArticle {
  padding: 28px 0 34px;
  scroll-margin-top: 18px;
}

.helpArticle + .helpArticle {
  border-top: 1px solid var(--line);
}

.helpArticle h2 {
  margin: 0 0 18px;
  color: var(--anthracite);
  font-size: 24px;
}

.helpArticle h3 {
  margin: 26px 0 10px;
  color: var(--accent-strong);
  font-size: 18px;
}

.helpArticle h4 {
  margin: 22px 0 8px;
  color: var(--anthracite);
  font-size: 15px;
}

.helpArticle p,
.helpArticle li {
  color: #4b4b4b;
  font-size: 15px;
  line-height: 1.65;
}

.helpArticle p {
  margin: 0 0 13px;
}

.helpArticle ul,
.helpArticle ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.helpArticle li + li {
  margin-top: 4px;
}

.helpArticle a {
  color: var(--accent-strong);
  text-underline-offset: 3px;
}

.helpArticle code {
  padding: 2px 5px;
  border: 1px solid #eadfd4;
  border-radius: 4px;
  background: #faf7f3;
  color: #7c3d08;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9em;
}

.helpArticle pre {
  max-width: 100%;
  margin: 12px 0 18px;
  padding: 16px;
  overflow: auto;
  border-left: 4px solid var(--accent);
  background: var(--anthracite);
  color: #fff;
}

.helpArticle pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.helpArticle table {
  width: 100%;
  margin: 14px 0 20px;
  border-collapse: collapse;
  font-size: 14px;
}

.helpArticle th,
.helpArticle td {
  padding: 9px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.helpArticle th {
  background: var(--accent-soft);
  color: var(--anthracite);
}

.helpArticle blockquote {
  margin: 14px 0 18px;
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}

.helpArticle blockquote p:last-child {
  margin-bottom: 0;
}

.helpBackToTop {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
}

.helpNoResults {
  display: grid;
  gap: 5px;
  padding: 42px 0;
  text-align: center;
}

.helpNoResults[hidden],
.helpArticle[hidden],
.helpToc a[hidden] {
  display: none;
}

.helpNoResults span {
  color: var(--muted);
}

.batchPanel {
  margin-top: 28px;
}

.sectionHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.sectionHeading h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.batchFilterGrid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px 180px;
  gap: 16px;
}

.batchFilterGrid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.compactButton {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.adminUndoDialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #efaaa5;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgb(0 0 0 / 24%);
}

.adminUndoDialog::backdrop {
  background: rgb(22 24 24 / 56%);
}

.adminUndoDialog form {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: #fff;
}

.adminUndoDialog label:not(.check) {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.batchPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
}

.batchPager span {
  min-width: 120px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.importConflictPanel {
  margin-top: 18px;
  border-color: #f0ad72;
  background: #fffaf5;
}

.importConflictRows {
  display: grid;
  border-top: 1px solid var(--line);
}

.importConflictRow {
  display: grid;
  grid-template-columns: 20px minmax(260px, 1fr) 130px 130px 110px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.importConflictRow input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.importConflictRow span:not(.pill) {
  display: grid;
  gap: 3px;
}

.importConflictRow small {
  color: var(--muted);
  font-size: 12px;
}

.importConflictIdentity {
  min-width: 0;
}

.importConflictIdentity strong {
  overflow-wrap: anywhere;
}

.importCorrectionPanel {
  margin-top: 18px;
  border-color: #f6851f;
  background: #fffaf5;
}

.importCorrectionRows {
  display: grid;
  border-top: 1px solid var(--line);
}

.importCorrectionRow {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(210px, 1fr) minmax(230px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.importCorrectionRow > span {
  display: grid;
  gap: 3px;
}

.importCorrectionRow small {
  color: var(--muted);
  font-size: 12px;
}

.correctionDecision {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ededed;
}

.correctionDecision label {
  cursor: pointer;
}

.correctionDecision input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.correctionDecision span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  color: #555;
  font-size: 12px;
  font-weight: 800;
}

.correctionDecision input:checked + span {
  background: #f6851f;
  color: #fff;
}

.correctionDecision input:focus-visible + span {
  outline: 2px solid #555;
  outline-offset: 1px;
}

.adminHeaderPanel {
  padding-bottom: 0;
}

.adminTabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.adminTabs button {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.adminTabs button:hover,
.adminTabs button.active {
  border-bottom-color: var(--accent);
  background: #fff4e8;
  color: #555;
}

.adminView {
  margin-top: 18px;
}

.adminView[hidden] {
  display: none;
}

.adminSensitiveLabel {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #efaaa5;
  border-radius: 6px;
  background: #fff1f0;
  color: #9b1c1c;
  font-size: 12px;
  font-weight: 800;
}

.adminMergeSelectors {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 32px minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.adminMergeSelectors label,
.adminMergeConfirm label:not(.check) {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.adminMergeSelectors small {
  min-height: 16px;
  color: #7b7b7b;
  font-size: 11px;
  font-weight: 600;
}

.adminMergeDirection {
  align-self: center;
  padding-top: 20px;
  color: var(--accent);
  text-align: center;
  font-size: 24px;
  font-weight: 900;
}

#adminMergePreview {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.adminMergeProfiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.adminEmployeeProfile {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}

.adminEmployeeProfile.source {
  border-color: #efaaa5;
  box-shadow: inset 4px 0 #d85a4f;
}

.adminEmployeeProfile.target {
  border-color: #9fd9c3;
  box-shadow: inset 4px 0 #24836b;
}

.adminProfileHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.adminProfileHeading small {
  color: var(--muted);
  font-weight: 800;
}

.adminProfileHeading h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.adminProfileMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 14px 0;
}

.adminProfileMeta div {
  min-width: 0;
}

.adminProfileMeta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.adminProfileMeta dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.adminProfileSection {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.adminAliasList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adminAliasItem {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f7f7f7;
  font-size: 12px;
  font-weight: 700;
}

.adminProfileCounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.adminProfileCounts span {
  display: grid;
  gap: 4px;
  padding: 8px;
  background: #fffaf5;
  font-size: 11px;
  font-weight: 700;
}

.adminProfileCounts strong {
  color: var(--anthracite);
  font-size: 16px;
}

.adminImpactPanel,
.adminRiskList {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf5;
}

.adminImpactPanel h3,
.adminRiskList h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.adminImpactGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #ead7c5;
  border-radius: 6px;
  background: #ead7c5;
}

.adminImpactGrid span {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #fff;
}

.adminImpactGrid small {
  color: var(--muted);
  font-weight: 700;
}

.adminImpactGrid strong {
  font-size: 18px;
}

.adminRisk {
  margin-top: 6px;
  padding: 9px 10px;
  border-left: 4px solid #64a98e;
  background: #eef8f4;
  color: #165845;
  font-size: 13px;
  font-weight: 700;
}

.adminRisk.medium {
  border-left-color: #f6851f;
  background: #fff3e6;
  color: #8a4105;
}

.adminRisk.high {
  border-left-color: #d85a4f;
  background: #fff0ef;
  color: #8f2119;
}

.adminMergeConfirm {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.55fr);
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #efaaa5;
  border-radius: 8px;
  background: #fff8f7;
}

.adminIdentityCheck,
.adminMergeConfirm .actions {
  grid-column: 1 / -1;
}

.adminIdentityCheck {
  font-weight: 800;
}

.adminHistoryPager {
  justify-content: flex-end;
  margin-top: 14px;
}

.adminQualitySummary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18px;
}

.adminQualitySummary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.adminQualitySummary strong {
  color: var(--anthracite);
  font-size: 22px;
}

.adminQualitySections {
  display: grid;
  gap: 18px;
}

.adminQualityBlock h3 {
  margin: 0 0 9px;
  font-size: 16px;
}

.adminQualityBlock {
  min-width: 0;
}

.adminSubmissionSearchRow {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.adminSubmissionSearchRow label,
.adminSubmissionRoute label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.adminSubmissionTable {
  max-height: 520px;
}

.selectedAdminRow > td {
  background: #fff2e5;
}

.adminSubmissionCorrection {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid var(--accent);
}

.compactHeading {
  align-items: center;
  margin-bottom: 12px;
}

.compactHeading h3 {
  margin: 0 0 3px;
  font-size: 18px;
}

.compactHeading p {
  margin: 0;
}

.adminSubmissionRoute {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 32px minmax(260px, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf5;
}

.adminSubmissionRoute label small {
  min-height: 16px;
  color: #7b7b7b;
  font-size: 11px;
  font-weight: 600;
}

.adminRouteAccount {
  display: grid;
  gap: 4px;
  min-height: 79px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid #efaaa5;
  border-radius: 6px;
  background: #fff8f7;
}

.adminRouteAccount small,
.adminRouteAccount span {
  color: var(--muted);
  font-size: 12px;
}

.adminRouteAccount strong {
  font-size: 16px;
}

#adminSubmissionPreview {
  margin-top: 16px;
}

.adminSubmissionPreviewSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #ead7c5;
  border-radius: 7px;
  background: #ead7c5;
}

.adminSubmissionPreviewSummary div {
  display: grid;
  gap: 4px;
  padding: 11px;
  background: #fffaf5;
}

.adminSubmissionPreviewSummary span,
.adminSubmissionPreviewSummary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.adminSubmissionPreviewSummary strong {
  font-size: 18px;
}

.adminAliasDecision {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 11px 12px;
  border-left: 4px solid var(--accent);
  background: #fff4e8;
}

.adminAliasDecision span {
  color: var(--muted);
  font-size: 13px;
}

.adminSubmissionConfirm {
  margin-top: 16px;
}

.adminSubmissionHistory,
.adminMergeHistory,
.adminCustomerHourHistory {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.adminCustomerHourTable {
  max-height: 540px;
}

.adminCustomerHourSource {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #ead7c5;
  border-radius: 7px;
  background: #ead7c5;
}

.adminCustomerHourSource div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  background: #fffaf5;
}

.adminCustomerHourSource small,
.tableSubline {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.adminCustomerHourSource strong {
  overflow-wrap: anywhere;
}

.adminCustomerHourEdit {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto;
  align-items: end;
  justify-content: start;
  gap: 12px;
  margin-top: 14px;
}

.adminCustomerHourEdit label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.adminCustomerHourConfirm {
  margin-top: 16px;
}

.manualChangeBadge {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #fff0df;
  color: #9a4b08;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.iconActionButton {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #e7b989;
  border-radius: 6px;
  background: #fff4e8;
  color: #9a4b08;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
}

.iconActionButton:hover {
  background: var(--accent);
  color: #fff;
}

.compactButton {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.sourceManualChanges {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #ead7c5;
}

.sourceManualChanges > strong {
  color: #9a4b08;
  font-size: 12px;
}

.sourceManualChanges div {
  display: grid;
  gap: 2px;
  padding-left: 8px;
  border-left: 3px solid var(--accent);
}

.sourceManualChanges small {
  color: var(--muted);
  font-size: 10px;
}

.adminShell.isBusy {
  cursor: progress;
}

.adminShell.isBusy .adminTabs,
.adminShell.isBusy .adminView {
  pointer-events: none;
}

.importAppendChoice {
  margin-top: 14px;
  font-weight: 700;
}

@media (max-width: 940px) {
  .header,
  .form,
  .actions {
    display: grid;
  }

  .adminNav {
    justify-content: flex-start;
  }

  .summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .dayGrid {
    grid-template-columns: 1fr;
  }

  .filterGrid,
  .batchFilterGrid,
  .split,
  .kpiGrid,
  .proGrid,
  .demoControlGrid,
  .dangerZone {
    grid-template-columns: 1fr;
  }

  .dangerZone {
    display: grid;
    align-items: stretch;
  }

  .demoHoursForm {
    grid-template-columns: 1fr;
  }

  .cleanupImportsForm {
    grid-template-columns: 1fr;
  }

  .cleanupImportsForm .actions {
    grid-column: auto;
  }

  .employeeDetailPanel label:not(.check) {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .employeeSearchPanel label {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .employeeActiveCheck {
    margin-left: 0;
  }

  .filterInlineLabel {
    margin-left: 0;
  }

  .importForm {
    grid-template-columns: 1fr;
  }

  .fileDropZone {
    min-height: 150px;
    padding: 22px;
  }

  .importConflictRow {
    grid-template-columns: 20px minmax(220px, 1fr) 110px 110px;
  }

  .importConflictRow .pill {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .importCorrectionRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exportBar {
    display: grid;
    align-items: stretch;
  }

  .exportBar .actions {
    justify-content: flex-start;
  }

  .helpSearchRow,
  .helpLayout {
    grid-template-columns: 1fr;
  }

  .adminMergeSelectors,
  .adminMergeProfiles,
  .adminMergeConfirm,
  .adminSubmissionRoute,
  .adminSubmissionPreviewSummary,
  .adminSubmissionSearchRow,
  .adminCustomerHourSource,
  .adminCustomerHourEdit {
    grid-template-columns: 1fr;
  }

  .adminMergeDirection {
    display: none;
  }

  .adminIdentityCheck,
  .adminMergeConfirm .actions {
    grid-column: auto;
  }

  .adminImpactGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminQualitySummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .helpSearchStatus {
    min-height: 0;
  }

  .helpToc {
    position: static;
    max-height: none;
  }

  .helpToc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .adminTabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .adminTabs button {
    flex: 1 1 auto;
    padding-inline: 10px;
  }

  .adminQualityBlock .tableWrap {
    width: 100%;
    max-width: 100%;
  }

  .importConflictRow {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .importConflictRow > span,
  .importConflictRow .pill {
    grid-column: 2;
  }

  .importCorrectionRow {
    grid-template-columns: 1fr;
  }

  .correctionDecision {
    justify-self: start;
  }

  .batchPager {
    flex-wrap: wrap;
    justify-content: center;
  }

  .dashboardShell {
    width: min(100% - 24px, 620px);
    margin: 18px auto;
    gap: 14px;
  }

  .dashboardPage .panel,
  .dashboardPage .kpi {
    border-radius: 7px;
  }

  .dashboardHero {
    padding: 18px;
  }

  .dashboardHeader {
    gap: 14px;
    margin-bottom: 18px;
  }

  .dashboardHeader h1 {
    font-size: 24px;
  }

  .dashboardHeader p {
    font-size: 14px;
    line-height: 1.35;
  }

  .dashboardHeader .navLinks {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 12px;
  }

  .dashboardHeader .navLinks a {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
  }

  .dashboardFilters {
    grid-template-columns: 1.2fr 0.8fr;
    max-width: none;
  }

  .dashboardFilters label:first-child,
  .dashboardFilters #dashWeekLabel,
  .dashboardFilters #dashMonthLabel {
    grid-column: span 2;
  }

  .dashboardPage .kpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboardPage .kpi {
    min-height: 96px;
    padding: 14px;
  }

  .dashboardPage .kpi strong {
    line-height: 1.25;
  }

  .dashboardPage .kpi span {
    font-size: 22px;
  }

  .dashboardProjects,
  .topPanel {
    padding: 18px;
  }

  .dashboardProjects h2,
  .topPanel h2,
  .dashboardSectionHeading h2 {
    font-size: 17px;
  }

  .dashboardPage .bubbleGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dashboardPage .bubble {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: auto;
    aspect-ratio: auto;
    place-items: stretch;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
    text-align: left;
  }

  .dashboardPage .bubble strong {
    min-width: 0;
    font-size: 15px;
  }

  .dashboardPage .bubble span {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 24px;
    text-align: right;
  }

  .dashboardPage .bubble small {
    margin-top: 3px;
  }

  .dashboardPage .rankRow {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .sourceTooltipGrid {
    grid-template-columns: 1fr;
  }

  .proScorePanel > div,
  .dualBarRow {
    grid-template-columns: 1fr;
  }

  .dualBarRow strong {
    text-align: left;
  }

  .dashboardMonthRow {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .dashboardMonthRow strong {
    grid-column: 2;
  }

  #proWeekdays {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .helpShell {
    width: min(100% - 18px, 620px);
    margin-top: 10px;
  }

  .helpHero,
  .helpToc {
    padding: 18px;
  }

  .helpContent {
    padding: 0 18px;
  }

  .helpToc nav {
    grid-template-columns: 1fr;
  }

  .helpArticle {
    padding: 22px 0 26px;
  }

  .helpArticle h2 {
    font-size: 21px;
  }

  .helpArticle table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .dashboardShell {
    width: min(100% - 18px, 620px);
    margin-top: 10px;
  }

  .dashboardHeader .navLinks {
    display: flex;
  }

  .dashboardFilters,
  .dashboardPage .kpiGrid {
    grid-template-columns: 1fr;
  }

  .dashboardFilters label:first-child,
  .dashboardFilters #dashWeekLabel,
  .dashboardFilters #dashMonthLabel {
    grid-column: auto;
  }

  .dashboardPage .bubble {
    grid-template-columns: 1fr;
  }

  .dashboardPage .bubble span {
    grid-column: auto;
    grid-row: auto;
    text-align: left;
  }

  .dashboardSectionHeading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .dashboardMonthRow {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  #proWeekdays {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}