:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f5f7;
  color: #17191d;
}

* { box-sizing: border-box; }
html, body, button, a, input, select, textarea, summary { touch-action: manipulation; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f4f5f7;
}
body.dialogLocked { position: fixed; overflow: hidden; width: 100%; left: 0; right: 0; }
button, input, select, textarea { font: inherit; }
.dataZoomButton {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid #8b96a5;
  border-radius: 7px;
  background: #fff;
  color: #1769d2;
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
}
.dataZoomButton[hidden] { display: none !important; }
body.dataZoomMode .workspaceControlsPanel { display: none !important; }
body.dataZoomMode .toolbar {
  display: block;
  padding: max(6px, env(safe-area-inset-top)) 0 0;
}
body.dataZoomMode .projectChooserLine,
body.dataZoomMode .projectInfo,
body.dataZoomMode .historyActions,
body.dataZoomMode .viewTabs > .addTaskAction,
body.dataZoomMode .viewTabs > .invoiceAddMenu { display: none !important; }
body.dataZoomMode #projectChooserBar { max-width: none; margin: 0; }
body.dataZoomMode .viewTabs {
  margin: 0;
  padding: 0 52px 0 max(6px, env(safe-area-inset-left));
  border-bottom: 1px solid #aeb6c2;
}
body.dataZoomMode .notificationBanner { top: calc(54px + env(safe-area-inset-top)); }
body.dataZoomMode .versionUpdateBanner {
  top: auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
}
body.dataZoomMode main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.dataZoomMode #workspace { height: auto; min-height: 0; flex: 1 1 auto; }
body.dataZoomMode #taskView:not([hidden]),
body.dataZoomMode #materialsView:not([hidden]),
body.dataZoomMode #toolsView:not([hidden]),
body.dataZoomMode #jobFlowView:not([hidden]),
body.dataZoomMode #scheduleView:not([hidden]),
body.dataZoomMode #materialCaptureView:not([hidden]),
body.dataZoomMode #userAdminView:not([hidden]),
body.dataZoomMode #invoiceView:not([hidden]),
body.dataZoomMode #clientDashboard:not([hidden]) {
  padding: 8px max(8px, env(safe-area-inset-right)) max(58px, calc(48px + env(safe-area-inset-bottom))) max(8px, env(safe-area-inset-left));
}
body.dataZoomMode .dataZoomButton {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  bottom: auto;
  z-index: 85;
  width: 38px;
  height: 38px;
  min-height: 38px;
  background: #202329;
  border-color: #202329;
  color: #fff;
  box-shadow: 0 5px 18px rgba(12, 16, 22, .22);
  font-size: 25px;
}
.versionUpdateBanner {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  z-index: 100;
  min-width: min(260px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border: 1px solid #1769d2;
  border-radius: 7px;
  background: #1769d2;
  color: #fff;
  box-shadow: 0 8px 24px rgba(12, 16, 22, .28);
  font-size: 15px;
  font-weight: 750;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -12px);
  opacity: 0;
}
.versionUpdateBanner.isVisible { animation: versionUpdateFlash 3.4s ease forwards; }
@keyframes versionUpdateFlash {
  0% { opacity: 0; transform: translate(-50%, -12px); }
  10%, 78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}
.visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: calc(12px + env(safe-area-inset-top)) 24px 10px;
  background: #fff;
  border-bottom: 1px solid #d8dbe0;
  flex: 0 0 auto;
  position: relative;
  z-index: 30;
}
.toolbar > div:first-child { flex: 1 1 auto; min-width: 0; }

h1 { margin: 0 0 3px; font-size: 24px; }
#fileStatus, .networkStatusDetail { margin: 0 0 9px; color: #666c76; font-size: 13px; line-height: 1.35; }
.syncStatus { position: relative; display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.statusBadge { padding: 3px 7px; border-radius: 4px; background: #e8ebef; color: #3d434c; font-size: 12px; font-weight: 650; }
button.statusBadge { min-height: 0; border: 0; cursor: pointer; }
.statusBadge.online { background: #d8f1e2; color: #126436; }
.statusBadge.offline { background: #f7dfdf; color: #8a2424; }
.statusBadge.pending { background: #fff0c7; color: #795500; }
.statusButton { padding: 3px 7px; min-height: 0; font-size: 12px; font-weight: 650; }
.statusButton.isOffline { background: #f7dfdf; border-color: #d28a8a; color: #8a2424; }
.networkPanel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 1000;
  width: min(92vw, 520px);
  max-height: min(78vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid #c8ccd2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(12, 16, 22, .18);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.networkPanelClose {
  float: right;
  min-height: 28px;
  width: 30px;
  padding: 0;
  margin: -3px -3px 6px 8px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
}
.networkPanelActions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.networkErrorDetail { margin: 0 0 9px; color: #8a2424; font-size: 13px; line-height: 1.35; white-space: pre-wrap; }
.loggedInUserPanel {
  display: grid;
  gap: 2px;
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.25;
}
.loggedInUserPanel[hidden] { display: none; }
.loggedInUserPanel strong { color: #252a32; }
.loggedInUserPanel span { color: #666c76; overflow-wrap: anywhere; }
.adminWorkingUserField {
  display: grid;
  gap: 4px;
  margin: 0 0 9px;
  color: #555c66;
  font-size: 12px;
  font-weight: 700;
}
.adminWorkingUserField[hidden] { display: none; }
.adminWorkingUserField select { width: 100%; min-height: 36px; }
.syncStatus.hasWorkerViewUser { flex-direction: column; align-items: flex-end; }
.workerViewControls {
  display: grid;
  grid-template-columns: minmax(132px, .8fr) minmax(150px, 1.2fr);
  align-items: end;
  gap: 7px;
  width: min(370px, calc(100vw - 24px));
}
.workerViewControls[hidden] { display: none; }
.workerViewDateField,
.workerViewUserField {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  color: #555c66;
  font-size: 11px;
  font-weight: 700;
}
.workerViewDateField[hidden],
.workerViewUserField[hidden] { display: none; }
.workerViewDateField input,
.workerViewUserField select {
  width: 100%;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #c8ccd2;
  border-radius: 5px;
  background: #fff;
  color: #17191d;
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.workerAttendanceButton {
  min-height: 34px;
  padding: 6px 11px;
  border-color: #23814c;
  background: #d8f1e2;
  color: #126436;
  font-weight: 750;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.workerAttendanceButton.isOnSite {
  border-color: #b36b00;
  background: #fff0c7;
  color: #795500;
}
.workerAttendanceButton:disabled { opacity: .75; }
.workerAttendanceButton.isIconOnly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 96px;
  min-width: 96px;
  height: 48px;
  min-height: 48px;
  padding: 1px 2px;
  font-size: 22px;
  line-height: 1;
}
.attendanceActionIcon,
.attendanceReceiptIcon {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.attendanceTimeForm { width: min(92vw, 380px); }
.attendanceTimeForm > label { display: grid; gap: 5px; font-weight: 700; }
.attendanceTimeForm input[type="datetime-local"] { width: 100%; min-height: 44px; }
.expenseForm { width: min(92vw, 380px); }
.expenseForm > label:not(.toggle) { display: grid; gap: 5px; font-weight: 700; }
.expenseForm > label[hidden] { display: none !important; }
.expenseForm input { width: 100%; min-height: 44px; }
.expenseForm .toggle input { width: 20px; min-height: 20px; }
.workerTimesheetDialog {
  width: min(920px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  min-width: 0;
  overflow: hidden;
}
.workerTimesheetView { display: grid; width: 100%; min-width: 0; gap: 12px; padding: 18px; max-height: calc(100dvh - 26px); overflow: hidden; }
.workerTimesheetHeading { display: grid; gap: 2px; text-align: center; }
.workerTimesheetHeading h2 { margin: 0; text-transform: uppercase; }
.workerTimesheetHeading span { color: #666c76; font-size: 12px; }
.workerTimesheetRateDisplay { justify-self: center; min-height: 28px; padding: 2px 7px; border: 0; background: transparent; color: #176a98; font-size: 12px; font-weight: 750; text-decoration: underline; }
.workerTimesheetRateField { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 750; }
.workerTimesheetRateField[hidden] { display: none; }
.workerTimesheetRateField label { display: flex; align-items: center; gap: 5px; }
.workerTimesheetRateField input { width: 92px; min-height: 34px; padding: 4px 7px; text-align: right; font-variant-numeric: tabular-nums; }
.workerTimesheetRateField button { min-height: 34px; padding: 4px 10px; }
.workerTimesheetWeekNav { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; }
.workerTimesheetWeekNav strong { text-align: center; font-size: 14px; }
.workerTimesheetWeekNav button { min-width: 42px; min-height: 36px; padding: 4px; font-size: 24px; line-height: 1; }
.workerTimesheetScroll { width: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.workerTimesheetTable { width: 100%; min-width: 690px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.workerTimesheetTable th { padding: 8px 7px; background: #347fa5; color: #fff; text-align: left; white-space: nowrap; }
.workerTimesheetTable td { padding: 5px 7px; border-bottom: 1px dotted #9fa6ad; white-space: nowrap; }
.workerTimesheetTable td:nth-child(2) { min-width: 150px; white-space: normal; }
.workerTimesheetTable th:first-child,
.workerTimesheetTable td:first-child { width: 74px; text-align: center; }
.workerTimesheetTable th:not(:first-child):not(:nth-child(2)),
.workerTimesheetTable td:not(:first-child):not(:nth-child(2)) { text-align: right; }
.workerTimesheetTable th:nth-child(2),
.workerTimesheetTable td:nth-child(2) { text-align: left; }
.workerTimesheetSubmittedCheckbox { width: 21px; height: 21px; min-height: 0; margin: 0; accent-color: #1769d2; }
.workerTimesheetTable tr.isSubmitted td:not(:first-child):not(:last-child) { color: #747b84; text-decoration: line-through; }
.workerTimesheetExpenseRow td { background: #f5f9fc; }
.workerTimesheetTable tfoot th,
.workerTimesheetTable tfoot td { border-top: 1px solid #252a32; border-bottom: 0; background: transparent; color: #17191d; font-weight: 800; }
.workerTimesheetTable tfoot th { text-align: right; }
.workerTimesheetEmpty { margin: 8px 0; color: #666c76; text-align: center; }
.attendanceTableScroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.attendanceWeekGroup,
.attendanceProjectGroup { border: 1px solid #d8dbe0; border-radius: 5px; overflow: clip; }
.attendanceWeekGroup + .attendanceWeekGroup { margin-top: 7px; }
.attendanceWeekGroup > summary,
.attendanceProjectGroup > summary { cursor: pointer; font-weight: 750; white-space: nowrap; }
.attendanceWeekGroup > summary { padding: 8px 9px; background: #e8edf2; font-size: 13px; }
.attendanceProjectGroup { margin: 7px; }
.attendanceProjectGroup > summary { padding: 7px 9px; background: #f4f6f8; font-size: 12px; }
.cloudUserAttendanceTable { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.cloudUserAttendanceTable th { padding: 7px 6px; background: #347fa5; color: #fff; text-align: left; white-space: nowrap; }
.cloudUserAttendanceTable td { padding: 6px; border-bottom: 1px dotted #aeb4bd; vertical-align: top; white-space: nowrap; }
.cloudUserAttendanceTable tr.isSubmitted td:not(.adminRecordSelectCell):not(:last-child) { color: #747b84; text-decoration: line-through; }
.cloudUserAttendanceTable td.adminRecordDescriptionCell { min-width: 160px; white-space: normal; }
.adminRecordSelectCell { width: 42px; min-width: 42px !important; text-align: center; }
.adminRecordSelectCheckbox { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: #1769d2; }
.adminRecordGroupSelect { display: inline-block !important; width: 20px !important; height: 20px; min-height: 0; margin: 0 8px 0 4px; padding: 0; accent-color: #1769d2; vertical-align: middle; }
.adminRecordSelectionActions { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 28; width: min(1040px, calc(100vw - 48px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #c6d6e3; border-radius: 7px; background: #edf6fb; box-shadow: 0 6px 14px rgb(12 16 22 / .16); }
.adminRecordSelectionActions[hidden] { display: none; }
.adminRecordSelectionActions strong { margin-right: auto; font-size: 12px; }
.adminRecordSelectionActions button { min-height: 34px; padding: 5px 9px; }
.cloudUserAttendanceList:has(.adminRecordSelectionActions:not([hidden])),
.cloudUserExpenseList:has(.adminRecordSelectionActions:not([hidden])) { padding-bottom: 82px; }
.attendanceTimestampButton { min-height: 28px; padding: 2px 5px; border: 0; background: transparent; color: #176a98; text-decoration: underline; font: inherit; }
.attendanceReceivedTime { display: block; margin-top: 3px; color: #68717d; font-size: 10px; white-space: normal; }
.attendanceEditForm { width: min(92vw, 440px); }
.attendanceEditForm > label { display: grid; gap: 5px; font-weight: 700; }
.attendanceEditForm > label[hidden] { display: none !important; }
.attendanceEditForm select { width: 100%; min-height: 42px; }
.attendanceDeleteButton { margin-right: auto; }
.attendanceImportForm { width: min(94vw, 760px); }
.attendanceImportForm textarea { width: 100%; min-height: 220px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.cloudUserAttendanceList { display: grid; gap: 6px; grid-column: 1 / -1; }
.cloudUserAttendanceAddBar { display: flex; justify-content: flex-end; }
.cloudUserAttendanceAddBar .iconButton { width: 36px; height: 36px; font-size: 22px; }
.userTimesheetViewModeControl { margin-left: auto; }
.monthlyTimesheetHeading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px;
  background: #f4f6f8;
  border-bottom: 1px solid #c8ced6;
}
.monthlyTimesheetHeading .iconButton { width: 34px; height: 30px; font-size: 22px; }
.monthlyTimesheetHeading label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.monthlyTimesheetHeading select { min-width: 140px; max-width: 220px; }
.monthlyTimesheetTableScroll {
  width: 100%;
  max-height: calc(100vh - 250px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #c8ced6;
  border-radius: 6px;
  background: #fff;
}
.monthlyTimesheetTable { min-width: 1120px; }
.monthlyTimesheetTable thead th { position: sticky; top: 0; z-index: 2; }
.monthlyTimesheetTable tfoot th {
  position: sticky;
  bottom: 0;
  padding: 8px 6px;
  background: #e9eef3;
  border-top: 2px solid #347fa5;
  text-align: right;
  white-space: nowrap;
}
.monthlyTimesheetTotal th:first-child { text-align: right; }
.cloudUserAttendanceRow {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(145px, 1.4fr) minmax(145px, 1.4fr);
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #d8dbe0;
  border-radius: 6px;
  font-size: 12px;
}
.cloudUserAttendanceRow strong { overflow-wrap: anywhere; }
.cloudUserAttendanceEmpty { margin: 0; color: #666c76; font-size: 12px; }
button, .fileButton {
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  padding: 9px 14px;
  background: #fff;
  color: #17191d;
  cursor: pointer;
}
button.primary { background: #1769d2; border-color: #1769d2; color: #fff; }
.destructiveButton { border-color: #c83b3b; color: #a51f1f; }
button:disabled { opacity: .45; cursor: default; }
button.isSelected {
  background: #1769d2;
  border-color: #1769d2;
  color: #fff;
}
#fileInput { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fileButton { display: none; }

body.workerMode .criteriaActions,
body.clientMode .criteriaActions,
body.workerMode .historyActions,
body.clientMode .historyActions,
body.workerMode #addTaskButton,
body.clientMode #addTaskButton,
body.workerMode #openButton,
body.clientMode #openButton,
body.workerMode #saveButton,
body.clientMode #saveButton,
body.workerMode #downloadButton,
body.clientMode #downloadButton,
body.workerMode #settingsButton {
  display: none !important;
}

body.workerMode #taskSearchOptionsRow {
  display: none !important;
}

body.clientMode #settingsButton,
body.clientMode #materialsTab,
body.clientMode #toolsTab,
body.clientMode #jobFlowTab {
  display: none !important;
}

body.clientMode .viewTabs,
body.clientMode .taskViewSummary,
body.clientMode #selectedTaskPanel,
body.clientMode #projectSummary > .projectSummaryButton,
body.clientMode #projectSummary > .projectPercentBadge {
  display: none !important;
}

body.clientMode .projectSummaryBadges {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  justify-content: flex-end;
}

body.clientMode .projectSubtaskSummary {
  order: 1;
  flex: 1 1 auto;
  width: auto;
  justify-content: flex-start;
}
body.clientMode .projectInfo { align-items: center; }
body.clientMode .clientItemsSummaryButton.isProminent {
  min-height: 34px;
  padding: 6px 12px;
  border-color: #15803d;
  background: #dcfce7;
  color: #14532d;
  font-size: 15px;
}
body.clientMode .clientItemsSummaryButton.isProminent.isActive {
  border-color: #15803d;
  background: #15803d;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
}
body.clientMode .networkPanel {
  width: min(92vw, 320px);
  min-width: min(260px, 92vw);
  padding: 8px;
}
body.clientMode #fileStatus,
body.clientMode #networkErrorDetail,
body.clientMode #pendingIndicator,
body.clientMode #reloadButton,
body.clientMode #offlineModeButton,
body.clientMode #settingsButton {
  display: none !important;
}

.clientDashboard {
  width: min(100%, 1160px);
  margin: 4px 0 28px;
  color: #20242a;
}
.clientDashboardSummary > summary.clientDashboardHeading {
  margin: 0;
  padding: 8px 5px;
  color: #2d789f;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.clientDashboardSummary[open] > summary.clientDashboardHeading { margin-bottom: 3px; }

.clientReportHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 4px 12px;
  border-top: 4px solid #2d789f;
}

.clientReportHeader > div { display: grid; gap: 5px; }
.clientReportHeader span { font-size: 27px; font-weight: 350; text-transform: uppercase; }
.clientReportHeader small { color: #68717a; font-size: 12px; }
.clientReportHeader > strong {
  color: #2d789f;
  font-size: 21px;
  letter-spacing: 0;
  white-space: nowrap;
}

.clientOverview {
  display: grid;
  grid-template-columns: 190px 190px;
  min-height: 175px;
  border-top: 1px solid #d7dde1;
  border-bottom: 1px solid #d7dde1;
}

.clientCompletionMetric,
.clientTrafficMetric {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border-right: 1px solid #d7dde1;
  text-align: center;
}

.clientCompletionMetric > span,
.clientTrafficMetric > span { color: #68717a; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.clientCompletionMetric > strong { color: #df2b18; font-size: 52px; line-height: 1; }
.clientCompletionMetric.is-red > strong,
.clientCompletionMetric.is-problem > strong { color: #dc2626; }
.clientCompletionMetric.is-orange > strong { color: #d97706; }
.clientCompletionMetric.is-yellow > strong { color: #b58a00; }
.clientCompletionMetric.is-green > strong { color: #178248; }
.clientTrafficMetric > strong { font-size: 13px; }
.clientTrafficLight {
  display: block;
  width: 66px;
  height: 66px;
  border: 2px solid rgb(0 0 0 / .15);
  border-radius: 50%;
  background: #a8adb2;
  box-shadow: inset 0 7px 0 rgb(255 255 255 / .2), inset 0 -6px 0 rgb(0 0 0 / .12);
}
.clientTrafficLight.is-complete, .clientMiniLight.is-complete { background: #20a35b; }
.clientTrafficLight.is-problem, .clientMiniLight.is-problem { background: #d71920; }
.clientTrafficLight.is-started, .clientMiniLight.is-started { background: #f0a51a; }
.clientTrafficLight.is-ready, .clientMiniLight.is-ready { background: #2c7fc0; }
.clientTrafficLight.is-notStarted, .clientMiniLight.is-notStarted { background: #c8cdd1; }
.clientTrafficLight.is-red, .clientMiniLight.is-red { background: #dc2626; }
.clientTrafficLight.is-orange, .clientMiniLight.is-orange { background: #f59e0b; }
.clientTrafficLight.is-yellow, .clientMiniLight.is-yellow { background: #facc15; }
.clientTrafficLight.is-green, .clientMiniLight.is-green { background: #16a34a; }
.clientMiniLight.is-problem,
.clientTrafficLight.isProblemAlert { animation: clientProblemLightPulse .62s steps(1, end) infinite; }
@keyframes clientProblemLightPulse {
  0%, 49% { background: #e00000; box-shadow: inset 0 7px 0 rgb(255 255 255 / .24), inset 0 -6px 0 rgb(0 0 0 / .16), 0 0 0 3px rgb(224 0 0 / .3), 0 0 16px rgb(224 0 0 / .8); }
  50%, 100% { background: #ffdc00; box-shadow: inset 0 7px 0 rgb(255 255 255 / .3), inset 0 -6px 0 rgb(0 0 0 / .12), 0 0 0 5px rgb(255 220 0 / .28), 0 0 18px rgb(255 220 0 / .85); }
}

.clientProjectDetails {
  align-self: stretch;
  padding: 15px 24px;
  border-bottom: 1px solid #d7dde1;
}
.clientProjectDetails > summary {
  padding: 6px 4px;
  color: #2d789f;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}
.clientProjectDetailsList {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-content: center;
  gap: 9px 18px;
  margin: 0;
  padding: 14px 4px 4px;
}
.clientProjectDetailsList dt { color: #68717a; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.clientProjectDetailsList dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.clientReportPDFButton {
  margin: 14px 4px 4px;
  border-color: #2d789f;
  background: #2d789f;
  color: #fff;
  font-weight: 750;
}
.clientTrafficLightButton,
.clientMiniLightButton {
  display: inline-grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.clientTrafficLightButton { width: 76px; height: 76px; }
.clientMiniLightButton { width: 32px; height: 32px; }
.clientTrafficLightButton:focus-visible,
.clientMiniLightButton:focus-visible { outline: 3px solid #1769d2; outline-offset: 2px; }
.clientProblemsDialog { width: min(92vw, 620px); max-height: min(84vh, 760px); padding: 0; }
.clientProblemsPanel { display: grid; max-height: min(84vh, 760px); grid-template-rows: auto minmax(0, 1fr); }
.clientProblemsPanel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #d2d7dc;
}
.clientProblemsPanel h2 { margin: 0; font-size: 18px; }
.clientProblemList { overflow: auto; padding: 4px 14px 16px; }
.clientProblemList article { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid #d2d7dc; }
.clientProblemList article > span { color: #68717a; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.clientProblemList article > strong { color: #2d789f; font-size: 13px; }
.clientProblemList h3 { margin: 0; font-size: 16px; }
.clientProblemList p { margin: 3px 0 0; white-space: pre-wrap; line-height: 1.4; }

.clientReportSection { margin-top: 32px; }
.clientReportSection > summary,
.clientActionSection > h2 {
  margin: 0 0 9px;
  padding: 10px 5px;
  color: #2d789f;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.clientStatusTable,
.clientProgressTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.clientStatusTable th,
.clientProgressTable th {
  padding: 8px 9px;
  background: #347fa4;
  color: #fff;
  font-weight: 650;
  text-align: left;
}
.clientStatusTable td,
.clientProgressTable td,
.clientProgressTable tbody th {
  padding: 7px 9px;
  border-right: 1px solid #d8dde1;
  border-bottom: 1px dotted #b9c0c6;
  background: transparent;
  color: inherit;
  text-align: right;
}
.clientStatusTable td:first-child,
.clientStatusTable td:last-child,
.clientProgressTable tbody th { text-align: left; }
.clientStatusTable td:nth-child(2) { width: 62px; text-align: center; }
.clientMiniLight {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(0 0 0 / .12);
  border-radius: 50%;
  vertical-align: middle;
}
.clientTableScroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
.clientProgressTable { min-width: 900px; }
.clientProgressTable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}
.clientProgressTable thead th:not(:first-child) { text-align: right; }
.clientProgressTable td.clientCountGood { background: #22c55e; color: #fff; font-weight: 800; }
.clientProgressTable td.clientCountAlert { background: #dc2626; color: #fff; font-weight: 800; }
.clientProgressTable td.clientCountActive { background: #facc15; color: #292000; font-weight: 800; }
.clientProgressTable td.clientCountProblem { animation: clientProblemPulse 1.15s ease-in-out infinite alternate; }
@keyframes clientProblemPulse {
  from { background: #dc2626; }
  to { background: #7f1d1d; box-shadow: inset 0 0 0 2px #fecaca; }
}
@media (prefers-reduced-motion: reduce) {
  .clientProgressTable td.clientCountProblem { animation: none; }
  .clientMiniLight.is-problem,
  .clientTrafficLight.isProblemAlert,
  .progress.isProblemAlert { animation: none !important; }
  .progress.isProblemAlert { background: #dc2626; color: #fff; }
}
.clientProgressTable td.percentCell { font-weight: 800; }
.clientProgressTable td.percentCell.clientCompletionRed,
.clientTaskPercent.clientCompletionRed { background: #dc2626; color: #fff; }
.clientProgressTable td.percentCell.clientCompletionOrange,
.clientTaskPercent.clientCompletionOrange { background: #f59e0b; color: #2b1b00; }
.clientProgressTable td.percentCell.clientCompletionYellow,
.clientTaskPercent.clientCompletionYellow { background: #facc15; color: #292000; }
.clientProgressTable td.percentCell.clientCompletionGreen,
.clientTaskPercent.clientCompletionGreen { background: #16a34a; color: #fff; }
.clientStageExpandButton {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
  min-height: 28px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
}
.clientStageExpandButton > span { width: 12px; color: #2d789f; }
.clientProgressTaskDetailRow > td { padding: 0 9px 8px; background: #eef4f7; }
.clientStageTaskList { display: grid; }
.clientStageTaskRow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px 54px;
  gap: 12px;
  align-items: center;
  padding: 7px 8px 7px 22px;
  border-bottom: 1px dotted #b9c0c6;
  text-align: left;
}
.clientStageTaskRow:last-child { border-bottom: 0; }
.clientStageTaskRow > span { color: #68717a; font-size: inherit; }
.clientStageTaskRow > span:last-child { font-weight: 800; text-align: right; }
.adminMetricStageButton,
.adminMetricTaskButton {
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #1769d2;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.adminMetricStageButton { width: 100%; }
.adminMetricTaskButton { min-width: 0; }
.adminMetricStageButton:hover,
.adminMetricTaskButton:hover { color: #0d4d9e; }
.adminMetricStageButton:focus-visible,
.adminMetricTaskButton:focus-visible { outline: 2px solid #1769d2; outline-offset: 2px; }
.clientTaskPercent { padding: 3px 5px; border-radius: 4px; }

.dashboardTimesheetMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #d8dde1;
  border-bottom: 1px solid #d8dde1;
}
.dashboardTimesheetMetrics.isCostComparison { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dashboardTimesheetMetrics > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-right: 1px solid #d8dde1;
}
.dashboardTimesheetMetrics > div:last-child { border-right: 0; }
.dashboardTimesheetMetrics span { color: #68717a; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.dashboardTimesheetMetrics strong { font-size: 18px; }
.dashboardTimesheetMetrics .isAmountPaid strong { color: #1769d2; }
.dashboardTimesheetMetrics .isUnassignedPayment strong { color: #9a6700; }
.dashboardTimesheetScroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dashboardTimesheetTable { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.dashboardTimesheetTable.isCostActivity { min-width: 1040px; }
.dashboardTimesheetTable th,
.dashboardTimesheetTable td {
  padding: 8px 9px;
  border-right: 1px solid #d8dde1;
  border-bottom: 1px dotted #b9c0c6;
  text-align: left;
}
.dashboardTimesheetTable thead th { background: #347fa4; color: #fff; font-weight: 650; }
.dashboardTimesheetTable tbody th { font-weight: 750; }
.dashboardTimesheetTable td:nth-child(n+3):not(:last-child) { text-align: right; }
.dashboardTaskCostAllocation { padding-top: 14px; }
.dashboardTaskCostAllocation h3 { margin: 0 10px 4px; font-size: 16px; }
.dashboardTaskCostAllocation > p { margin: 0 10px 10px; color: #68717a; font-size: 12px; }
.dashboardTaskCostTable { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
.dashboardTaskCostTable th,
.dashboardTaskCostTable td {
  padding: 8px 9px;
  border-right: 1px solid #d8dde1;
  border-bottom: 1px dotted #b9c0c6;
  text-align: left;
}
.dashboardTaskCostTable thead th { background: #347fa4; color: #fff; font-weight: 650; }
.dashboardTaskCostTable td:nth-child(n+3) { text-align: right; }
.dashboardTaskCostTable tr.isUnallocated { background: #fff4d8; font-weight: 750; }

.dashboardCostOverview,
.dashboardCostStage > summary,
.dashboardCostTask > summary,
.dashboardCostSubtask {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(90px, auto));
  align-items: center;
  gap: 10px;
}
.dashboardCostOverview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px;
  border: 1px solid #d8dde1;
  background: #f3f7f9;
}
.dashboardCostActions { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.dashboardCostActions button { min-height: 34px; padding: 6px 14px; font-weight: 750; }
.dashboardCostStage,
.dashboardCostTask { border-bottom: 1px solid #d8dde1; }
.dashboardCostStage > summary { padding: 10px 8px; background: #e7f1f6; cursor: pointer; }
.dashboardCostTask { margin-left: 18px; }
.dashboardCostTask > summary { padding: 8px; background: #f4f7f8; cursor: pointer; }
.dashboardCostSubtask {
  width: calc(100% - 36px);
  grid-template-columns: minmax(180px, 1fr) repeat(5, minmax(78px, auto));
  margin-left: 36px;
  padding: 8px;
  border: 0;
  border-top: 1px dotted #b9c0c6;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.dashboardCostSubtask:hover { background: #eef5f8; }
.dashboardCostMetric { display: grid; gap: 2px; min-width: 0; text-align: right; }
.dashboardCostMetric small { color: #68717a; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.dashboardCostMetric strong { font-size: 12px; white-space: nowrap; }
.dashboardCostOverview .dashboardCostMetric { text-align: left; }
.dashboardCostOverview .dashboardCostMetric strong { font-size: 18px; }

.clientTaskProgressList { border-top: 1px solid #cfd5da; }
.clientTaskProgressRow {
  display: grid;
  grid-template-columns: minmax(145px, .8fr) minmax(220px, 2fr) 64px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px dotted #b9c0c6;
}
.clientTaskProgressRow > span:first-child { color: #68717a; font-size: 12px; }
.clientTaskProgressRow > span:last-child { color: #17643a; font-weight: 800; text-align: right; }

.clientActionSection { margin: 10px 0 6px; border-top: 1px solid #d2d7dc; border-bottom: 1px solid #d2d7dc; }
.clientDisclosureHeading {
  display: list-item;
  position: relative;
  padding: 10px 5px;
  color: #2d789f;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}
.clientDisclosureHeading > strong { font-size: inherit; }
.clientDisclosureHeading > span {
  float: right;
  margin-top: -3px;
  min-width: 25px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #2d789f;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.clientActionEmpty { margin: 0; padding: 10px 5px 14px; color: #68717a; }
.clientActionItem { border-top: 1px solid #d2d7dc; }
.clientActionItem:last-child { border-bottom: 1px solid #d2d7dc; }
.clientActionItemButton {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  text-align: left;
}
.clientActionItemButton strong { font-size: 15px; }
.clientActionItemButton span { color: #68717a; font-size: 12px; }
.clientActionItem .clientInlinePanel { padding: 0 4px 10px; }

body.workerMode .criteriaGrid {
  display: none;
}

body.workerMode .networkPanel {
  width: auto;
  min-width: 0;
  padding: 8px;
}

body.workerMode #fileStatus,
body.workerMode #networkErrorDetail,
body.workerMode #pendingIndicator,
body.workerMode #reloadButton,
body.workerMode #offlineModeButton,
body.workerMode #settingsButton {
  display: none !important;
}

body.workerMode .networkPanelActions {
  gap: 6px;
}

body.workerMode .loggedInUserPanel {
  margin-bottom: 7px;
  max-width: 240px;
}

.workerHome {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.workerHome > div,
.workerInboxButton {
  min-height: 58px;
  border: 1px solid #c8ccd2;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.workerHome strong,
.workerHome span {
  display: block;
}

.workerHome span {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 750;
}

.workerInboxButton {
  grid-column: 1 / -1;
  min-height: 44px;
}

.workerTaskCard {
  border: 1px solid #c8ccd2;
  border-left-width: 5px;
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 10px;
  background: #fff;
}

.workerTaskCard.progressReady { border-left-color: #1769d2; }
.workerTaskCard.progressStarted { border-left-color: #168044; }
.workerTaskCard.progressProblem { border-left-color: #b02a2a; }

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

.workerTaskPath,
.workerStatusLine {
  margin: 5px 0 0;
  color: #5d6470;
}

.workerInlineField,
.workerNoteField {
  display: block;
  margin-top: 10px;
}

.workerInlineField select,
.workerNoteField textarea {
  width: 100%;
  margin-top: 4px;
}

.workerActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.taskRow.workerTaskRow {
  border-bottom: 1px solid #d8dbe0;
  padding: 7px 3px 9px 10px;
  margin-bottom: 2px;
}

.taskRow.workerTaskRow .taskHeading {
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 9px;
}

.taskRow.workerTaskRow .taskName {
  font-size: 17px;
  line-height: 1.2;
}

.workerCurrentProgress {
  margin-top: 1px;
}

.taskPercentBadge,
.stagePercentBadge {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef2f7;
  color: #46515f;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.clientTaskRow {
  border-bottom: 1px solid #d8dbe0;
  padding: 7px 3px 9px 10px;
  margin-bottom: 2px;
}

.clientTaskRow .taskHeading {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.clientTaskRow .taskName {
  font-size: 17px;
  line-height: 1.2;
}

.clientInlinePanel {
  margin-top: 6px;
}

.clickableWorkerTaskContent {
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.clickableWorkerTaskContent:focus-visible {
  outline: 2px solid #1769d2;
  outline-offset: 3px;
}

.workerInlinePanel {
  display: grid;
  gap: 7px;
  margin-top: 7px;
  width: 100%;
}

.workerNotesPreview {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #596170;
  font: inherit;
  font-size: 13px;
  line-height: 1.28;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.workerTaskDetails {
  display: grid;
  gap: 9px;
  padding-top: 3px;
}

.workerTaskDetails[hidden] {
  display: none;
}

.workerInlineAssign {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
}

.workerInlineAssign select {
  width: 100%;
}

.workerNotesBlock {
  display: grid;
  gap: 7px;
  width: 100%;
  margin-top: 4px;
}

.workerExistingNotes {
  min-height: 36px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #d8dbe0;
  border-radius: 6px;
  background: #f8f9fb;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: default;
}

.workerExistingNotes a {
  color: #1769d2;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.workerNotesBlock textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
}

.workerNotesBlock button {
  justify-self: start;
}

.taskQuickNotesBlock {
  margin-top: 0;
}

.taskQuickNotesBlock .workerExistingNotes {
  user-select: text;
  -webkit-user-select: text;
}

.taskAddNoteControls {
  display: grid;
  gap: 7px;
}

.taskAddNoteControls[hidden] {
  display: none;
}

.taskAddNoteControls label {
  display: grid;
  gap: 4px;
}

.workerProgressButtons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.workerProgressButton {
  min-width: 0;
  min-height: 38px;
  padding: 4px;
  border-radius: 7px;
  font-size: 19px;
  font-weight: 750;
  line-height: 1;
  touch-action: manipulation;
}

.workerProgressButton.isProblem { font-size: 22px; }
.workerUtilityButton { font-size: 18px; }

.workerProgressButton.isActive {
  border-color: #1769d2;
  background: #1769d2;
  color: #fff;
}

.workerProgressButton.isProblem.isActive {
  border-color: #b02a2a;
  background: #b02a2a;
  color: #fff;
}

.workerTaskAttachmentGallery {
  display: grid;
  gap: 6px;
  width: 100%;
}

.workerTaskAttachmentItems {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 2px 0 4px;
}

.workerTaskAttachmentThumbnail {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #eef1f4;
}

.workerTaskAttachmentThumbnail img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
}

.workerTaskAttachmentThumbnail:has(.workerTaskAttachmentPDF) { min-height: 190px; }

.workerTaskAttachmentPDF {
  width: 100%;
  min-height: 190px;
  aspect-ratio: 0.707;
  max-height: 70dvh;
}

.taskPDFPreview {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
}

.taskPDFPreview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  pointer-events: none;
}

.taskPDFPreviewBadge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgb(180 35 24 / .9);
  color: #fff;
  font: 750 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.workerProblemAction {
  justify-content: flex-start;
  flex: 0 0 auto;
  align-self: center;
}

.workerHelpDialog {
  max-width: 460px;
}

.workerHelpSubtask {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 12px;
  border: 1px solid #d8dbe0;
  border-left: 4px solid #1769d2;
  border-radius: 8px;
  background: #f8f9fb;
}

.workerHelpSubtask > strong {
  font-size: 18px;
}

.workerHelpSubtask > span,
.workerHelpSubtask small {
  color: #666c76;
}

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

.workerHelpNotes p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #d8dbe0;
  border-radius: 6px;
  background: #fff;
}

.workerHelpActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workerHelpActions button {
  min-height: 0;
  padding: 3px 7px;
}

.workerProblemAction button {
  min-height: 0;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.workerProblemAction .workerProblemBadge {
  order: initial;
  margin: 0;
  border: 0;
}

.historyActions {
  display: none !important;
}

main {
  width: 100%;
  max-width: min(1720px, calc(100vw - 24px));
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
  padding: 12px 22px 22px;
}
#workspace:not([hidden]) {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
#workspace.taskTableWorkspace {
  overflow: hidden;
}
#workspace.taskTableWorkspace .workspaceControlsPanel {
  flex: 0 0 auto;
}
#workspace.taskTableWorkspace #taskView.tableModeActive,
#workspace.taskTableWorkspace #materialsView.tableModeActive,
#workspace.taskTableWorkspace #toolsView.tableModeActive {
  flex: 1 1 auto;
  padding-bottom: 0;
}
#workspace.taskTableWorkspace #taskView.tableModeActive .taskList,
#workspace.taskTableWorkspace #materialsView.tableModeActive .materialsList,
#workspace.taskTableWorkspace #toolsView.tableModeActive .materialsList {
  flex: 1 1 auto;
}
#workspace.taskTableWorkspace .compactTaskTableScroll {
  min-height: 240px;
  overscroll-behavior: contain;
}
.workspaceControls {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  background: #f4f5f7;
}
.workspaceControlsPanel {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #d8dbe0;
}
body.clientMode .workspaceControlsPanel { display: none !important; }
#taskView:not([hidden]),
#materialsView:not([hidden]),
#toolsView:not([hidden]),
#jobFlowView:not([hidden]),
#scheduleView:not([hidden]),
#materialCaptureView:not([hidden]),
#userAdminView:not([hidden]),
#invoiceView:not([hidden]),
#clientDashboard:not([hidden]) {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(26px, env(safe-area-inset-bottom));
}
.projectChooserBar { margin-bottom: 4px; max-width: 720px; }
.projectChooserLine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: stretch;
  gap: 7px;
}
@media (min-width: 701px) {
  .projectChooserBar { max-width: none; }
  .projectChooserLine { grid-template-columns: minmax(max-content, 1fr) auto auto auto auto; }
}
.notificationBanner {
  position: fixed;
  z-index: 190;
  top: calc(8px + env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  width: min(680px, calc(100vw - 20px));
  margin-inline: auto;
  border: 1px solid #b55b28;
  border-radius: 6px;
  background: #fff6e8;
  color: #382417;
  box-shadow: 0 8px 24px #0003;
}
.notificationBanner[hidden] { display: none; }
.notificationBannerOpenButton { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; min-width: 0; padding: 8px 10px; border: 0; background: transparent; color: inherit; text-align: left; }
.notificationBannerOpenButton strong, .notificationBannerOpenButton > span:not(.statusBadge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notificationBannerOpenButton > span:not(.statusBadge) { grid-column: 1; font-size: 12px; opacity: .78; }
.notificationBannerOpenButton .statusBadge { grid-column: 2; grid-row: 1 / 3; align-self: center; background: #b83a2d; color: #fff; }
.notificationBannerDismissButton { width: 34px; min-width: 34px; border: 0; border-left: 1px solid #d7a47d; border-radius: 0; background: transparent; color: inherit; font-size: 20px; }
.workerSyncNotice {
  position: fixed;
  z-index: 195;
  top: calc(8px + env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  width: min(520px, calc(100vw - 20px));
  margin-inline: auto;
  padding: 10px 12px;
  border: 1px solid #b55b28;
  border-radius: 6px;
  background: #fff6e8;
  color: #382417;
  box-shadow: 0 8px 24px #0003;
  font-weight: 700;
  text-align: center;
}
.workerSyncNotice[hidden] { display: none; }
.notificationAdminSection { display: grid; gap: 8px; }
.notificationAdminHeading { display: flex; align-items: center; gap: 8px; }
.notificationAdminHeading h3 { margin: 0 auto 0 0; }
.notificationSettings { border-top: 1px solid #dce2e5; border-bottom: 1px solid #dce2e5; }
.notificationSettings > summary { padding: 8px 0; font-weight: 700; cursor: pointer; }
.notificationTypeSettings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 2px 0 8px; }
.notificationTypeSettings .toggle { justify-content: flex-start; }
.pushSettings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #dce2e5; }
.pushSettings button { flex: 0 0 auto; }
.pushSettings span { font-size: 12px; }
.notificationsList { display: grid; }
.notificationItem { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 2px; padding: 4px 6px; text-align: left; border: 0; border-bottom: 1px solid #dce2e5; border-radius: 0; background: transparent; color: inherit; }
.notificationOpen { display: grid; gap: 2px; min-width: 0; padding: 5px; border: 0; background: transparent; color: inherit; text-align: left; }
.notificationReadButton { width: 32px; min-width: 32px; height: 32px; padding: 0; font-size: 20px; }
.notificationItem.isUnread { border-left: 3px solid #b93f31; background: #fff8f5; }
.notificationItem span, .notificationItem time { font-size: 12px; color: #59646c; }
.notificationsList > p { padding: 10px; }
.adminCurrentDate {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #f4f6f8;
  color: #3d434c;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.adminCurrentDate[hidden] { display: none; }
.projectChooserButton {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 0;
  padding: 9px 12px;
  text-align: left;
  border-color: #9eb9dc;
  background: #eaf2ff;
  color: #103c73;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.projectChooserButton span { font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .02em; opacity: .8; }
.projectChooserButton strong {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 20px;
  line-height: 1.15;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (min-width: 701px) {
  .projectChooserLine .projectChooserButton strong { white-space: nowrap; }
}
.projectChooserButton.isStaticTitle { cursor: default; }
.projectChooserButton.isStaticTitle:active { transform: none; }
.inboxButton {
  min-width: 82px;
  padding: 8px 10px;
  border-color: #cfb46a;
  background: #fff6d8;
  color: #674700;
  font-weight: 850;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.inboxButton span {
  display: inline-flex;
  min-width: 22px;
  min-height: 22px;
  margin-left: 4px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #7b5a00;
  color: #fff;
  font-size: 12px;
}
.pmskCaptureButton {
  padding: 8px 10px;
  border-color: #7799c4;
  background: #edf4ff;
  color: #174a84;
  font-weight: 800;
  white-space: nowrap;
}
.pmskCaptureForm { width: min(92vw, 430px); }
.pmskCaptureForm textarea { width: 100%; resize: vertical; }
.projectAddButton {
  width: 40px;
  min-width: 40px;
  padding: 0;
  border-color: #9eb9dc;
  background: #eaf2ff;
  color: #103c73;
  font-size: 22px;
  font-weight: 850;
  line-height: 1;
}
.inboxCategorizeForm {
  width: min(720px, 94vw);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inboxCategorizeForm > .dialogHeading,
.inboxCategorizeForm > .formMessage,
.inboxCategorizeForm > .inboxBatchPanel,
.inboxCategorizeForm > .dialogActions {
  flex: 0 0 auto;
}
.inboxBatchPanel {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  background: #f8f9fb;
}
.inboxBatchActions { display: flex; gap: 7px; flex-wrap: wrap; }
.inboxBatchActions button { flex: 0 1 auto; }
.inboxCategorizeList {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 120px;
  max-height: min(46vh, 420px);
  overflow: auto;
  padding-right: 2px;
}
.inboxCategorizeItem {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  background: #fff;
}
.inboxCategorizeHeader { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inboxCategorizeHeader input { width: 22px; height: 22px; flex: 0 0 auto; }
.inboxSubtaskButton {
  min-width: 0;
  flex: 1 1 auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.inboxAppliedSummary { padding-left: 30px; color: #6b717a; font-size: 12px; font-weight: 650; }
.inboxCategorizeGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.inboxCategorizeGrid[hidden],
.inboxBatchActions button[hidden] { display: none; }
.projectInfo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 4px;
  padding: 3px 3px 2px;
  color: #666c76;
  font-size: 14px;
  font-weight: 650;
}
.projectSubtaskSummary {
  display: contents;
}
.projectSubtaskSummary[hidden] { display: none; }
.projectSearchControls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding-top: 1px;
  order: 100;
}
.projectSearchControls .taskSearchBar { flex: 0 1 480px; }
.projectSearchControls .taskViewModeControl { margin-left: 0; }
.projectSummaryBadges {
  display: contents;
}
.projectInfo > .projectSummaryButton,
.projectInfo > .projectPercentBadge,
.projectInfo > .syncStatus,
.projectSummaryBadges > .projectSummaryButton,
.projectSummaryBadges > .projectPercentBadge,
.projectSubtaskSummary > .projectSummaryButton { flex: 0 0 auto; }
.projectSummaryBadges .syncStatus { order: 99; margin-left: auto; }
.projectSummaryBadges .networkPanel {
  left: auto;
  right: 0;
}
body.scheduleBadgesOnlySelected #projectSummary > :not(#selectedTasksSummaryBadge),
body.scheduleBadgesOnlySelected #projectSubtaskSummary {
  display: none !important;
}
.projectSummaryButton {
  appearance: none;
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #f4f6f8;
  color: #3d434c;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.15;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  box-shadow: 0 2px 0 #aeb5bc;
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}
.projectSummaryButton:active { transform: translateY(2px); box-shadow: none; }
.projectSummaryButton.isWarning {
  border-color: #e5b7b7;
  background: #fff0f0;
  color: #8a2424;
}
.projectSummaryButton.isActive {
  border-color: #1f6feb;
  background: #dbeafe;
  color: #123f8c;
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgb(18 63 140 / .35), inset 0 0 0 1px rgb(31 111 235 / .45);
}
.projectSummaryButton.isProminent {
  min-height: 34px;
  padding: 6px 12px;
  border-color: #15803d;
  background: #dcfce7;
  color: #14532d;
  font-size: 15px;
}
.projectSummaryButton.isProminent.isActive {
  background: #15803d;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
}
.projectSummaryButton.isWarning.isActive {
  border-color: #c2410c;
  background: #ffedd5;
  color: #7c2d12;
}
.projectPercentBadge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #e8ebef;
  color: #3d434c;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.15;
}
.projectPercentBadge.is-red,
.projectPercentBadge.is-problem { border-color: #b91c1c; background: #dc2626; color: #fff; }
.projectPercentBadge.is-orange { border-color: #b45309; background: #f59e0b; color: #271500; }
.projectPercentBadge.is-yellow { border-color: #a17c00; background: #facc15; color: #292000; }
.projectPercentBadge.is-green { border-color: #15803d; background: #16a34a; color: #fff; }
.projectInfoDialog { width: min(820px, calc(100% - 24px)); height: min(760px, calc(100vh - 24px)); }
.projectInfoPanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  overflow: hidden;
  padding: 0;
}
.projectInfoPanel > .dialogHeading { flex: 0 0 auto; padding: 18px 20px 12px; border-bottom: 1px solid #e3e5e8; }
.projectInfoDialogBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
}
.projectInfoFields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.projectInfoPanel .toggle { align-content: end; display: flex; align-items: center; gap: 8px; min-height: 42px; }
.projectInfoPanel .toggle input { width: 20px; min-height: 20px; }
.projectInfoStages { display: grid; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #d9dde3; }
.projectInfoStagesHeading,
.projectInfoStagesActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.projectInfoStagesHeading strong { font-size: 18px; }
.projectInfoStagesHeading span { color: #666c76; font-size: 13px; }
.projectInfoStages .managerList { flex: none; max-height: none; overflow: visible; }
.projectInfoActions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e3e5e8; background: #fff; }
.projectChoiceList { display: grid; gap: 8px; max-height: min(58vh, 520px); overflow: auto; padding: 2px 0; }
.projectChoice {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
}
.projectChoice span { color: #666c76; font-size: 13px; }
.projectChoice.isSelected { border-color: #1769d2; background: #e8f1ff; color: #103c73; }
.viewTabs { position: relative; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 0; border-bottom: 1px solid #aeb6c2; margin-bottom: 10px; }
.projectChooserBar > .viewTabs { margin: 5px 0 5px; }
.historyActions { display: flex; gap: 6px; }
.historyActions button { width: 36px; height: 36px; min-height: 0; padding: 0; font-size: 19px; line-height: 1; }
.tabList {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  gap: 3px;
  min-width: 0;
  margin-bottom: -1px;
  padding: 0 3px;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabList::-webkit-scrollbar { display: none; }
.tabList button {
  flex: 0 0 auto;
  border: 1px solid #c8ccd2;
  border-bottom-color: #aeb6c2;
  border-radius: 7px 7px 0 0;
  padding: 8px 13px 9px;
  background: #e9edf2;
  color: #3d434c;
  font-weight: 750;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tabList button:hover { background: #f4f6f8; }
.tabList button.isSelected {
  position: relative;
  z-index: 1;
  padding-top: 9px;
  background: #fff;
  border-color: #aeb6c2;
  border-bottom-color: #fff;
  color: #1769d2;
  box-shadow: inset 0 3px #1769d2;
}
.viewTabs .addTaskAction {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  margin-left: auto;
  padding: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}
.quickAddSubtaskForm { width: min(92vw, 480px); }
.quickAddSubtaskForm > label { display: grid; gap: 5px; font-weight: 700; }
.quickAddSubtaskForm select,
.quickAddSubtaskForm input,
.quickAddSubtaskForm textarea { width: 100%; }
.captureBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #9fc3f4;
  border-radius: 7px;
  background: #e8f1ff;
  color: #103c73;
}
.captureBanner span { display: block; margin-top: 2px; font-weight: 650; }
.captureBanner button { background: #fff; }
.taskSearchOptionsRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 2px 7px;
}
.taskSearchOptionsRow[hidden], .taskSearchBar[hidden], .criteriaToggleButton[hidden] { display: none; }
.taskSearchBar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  flex: 0 1 480px;
  max-width: 480px;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
}
.taskSearchBar input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
  color: #17191d;
  font: inherit;
}
.criteriaToggleButton { min-height: 38px; white-space: nowrap; }
.criteriaPanel { margin-bottom: 8px; border-bottom: 1px solid #d8dbe0; }
.criteriaNativeSummary { display: none; }
.criteriaSummary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 3px 6px;
}
.criteriaEnableToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.criteriaEnableToggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1769d2;
}
.criteriaProfileSelect {
  width: 100%;
  max-width: 230px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
  color: #17191d;
  font: inherit;
}
.criteriaSubtaskCount {
  white-space: nowrap;
  color: #596170;
  font-size: 13px;
  font-weight: 700;
  justify-self: start;
}
.criteriaProfileSummary {
  grid-column: 2 / -1;
  min-width: 0;
  color: #6a7280;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.criteriaDefinitionControls {
  display: grid;
  grid-template-columns: minmax(128px, 230px) auto;
  align-items: end;
  gap: 8px;
  padding-bottom: 9px;
}
.criteriaDefinitionControls label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.criteriaDefinitionControls select {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
  color: #17191d;
}
.criteriaDefinitionControls button { padding: 7px 10px; }
body.workerMode .adminCriteriaControls { display: none; }
.emptyState { text-align: center; padding: 18vh 20px; color: #666c76; }
.emptyState h2 { color: #272b31; }
.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  padding-bottom: 9px;
}
.filters .searchField { grid-column: span 2; }
.filters label:not(.toggle) { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.filters input, .filters select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
  color: #17191d;
}
.filters select[multiple] {
  min-height: 78px;
  padding: 5px;
}
.filters select[multiple] option {
  padding: 5px 7px;
  border-radius: 4px;
}
.quickDateCriteria {
  display: flex;
  gap: 6px;
  align-self: end;
  min-height: 42px;
}
.quickDateCriteria button {
  flex: 1 1 0;
  padding: 7px 9px;
}
.quickDateCriteria button.isActive {
  background: #1769d2;
  border-color: #1769d2;
  color: #fff;
}
.toggle { display: flex; align-items: center; gap: 7px; min-height: 42px; white-space: nowrap; }
.filters .completedGroupsToggle { white-space: normal; }
.filters .toggle input {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  flex: 0 0 18px;
}
.clearCriteriaButton {
  width: 34px;
  height: 34px;
  min-height: 0;
  align-self: end;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.criteriaActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 9px;
}
.criteriaActions button { padding: 7px 10px; }
.summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 2px solid #252a32; }
.summary strong:empty { display: none; }
.summary button { padding: 7px 12px; }
.summary span { color: #666c76; }
.summary .iconActionButton { width: 32px; height: 32px; padding: 0; }
.jobFlowLockToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #b7bec8;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  font-weight: 750;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jobFlowLockToggle input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
}
#jobFlowView > .summary {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f4f5f7;
}
.criteriaContext { color: #6b717a; font-size: 13px; font-weight: 700; padding: 8px 0 2px; }
.emptyTaskActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0 14px;
}
.emptyTaskActions button {
  min-width: 96px;
}
.stage { margin-top: 22px; }
.stageHeading { padding: 10px 10px; font-size: 19px; font-weight: 800; border-bottom: 1px solid #aeb6c2; cursor: pointer; background: #eaf2ff; color: #103c73; border-radius: 7px 7px 0 0; }
.stageHeading.isCompleteGroup { opacity: .52; filter: grayscale(.18); }
.stageHeading.isFocusedStage {
  outline: 2px solid #1769d2;
  outline-offset: 2px;
  background: #dcecff;
}
.stagePercentBadge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgb(23 105 210 / .12);
  border: 1px solid rgb(23 105 210 / .24);
  color: #103c73;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
}
.stageActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #d7dee8;
  background: #f6f9fd;
}
.taskGroup { padding: 10px 0 2px; border-bottom: 1px solid #c8ccd2; background: #fbfcfe; }
.taskGroupHeading { margin: 0 0 8px; padding: 8px 10px; font-size: 17px; font-weight: 750; cursor: pointer; background: #f1f5fa; color: #202a36; border-left: 4px solid #4f8edc; border-radius: 6px; }
.taskGroupHeading.isCompleteGroup { opacity: .52; filter: grayscale(.18); }
.taskGroupHeading.isFocusedTask {
  outline: 2px solid #1769d2;
  outline-offset: 2px;
  background: #e2efff;
  border-left-color: #1769d2;
}
.stageHeading, .taskGroupHeading { align-items: center; justify-content: space-between; gap: 10px; }
.stageHeading::-webkit-details-marker, .taskGroupHeading::-webkit-details-marker { margin-right: 4px; }
.taskGroupMeta {
  display: inline-block;
  margin-left: 8px;
  color: #5d6672;
  font-size: 13px;
  font-weight: 650;
  vertical-align: baseline;
}
.taskViewModeControl {
  display: inline-flex;
  gap: 0;
  margin-left: auto;
  border: 1px solid #b8c0cb;
  border-radius: 5px;
  overflow: hidden;
}
.taskViewModeControl[hidden] { display: none; }
.taskViewModeControl button {
  width: 34px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #48515c;
  font-size: 19px;
  line-height: 1;
}
.taskViewModeControl button + button { border-left: 1px solid #b8c0cb; }
.taskViewModeControl button.isSelected { background: #1769d2; color: #fff; }
.compactTaskTableScroll {
  position: relative;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #c8ced6;
  border-radius: 6px;
  background: #fff;
}
.compactTaskTableEditToggle {
  position: sticky;
  top: 4px;
  left: calc(100% - 40px);
  z-index: 8;
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  margin: 4px 4px -34px auto;
  padding: 0;
  border: 1px solid #9ca7b4;
  border-radius: 5px;
  background: #fff;
  color: #26313e;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 1px 4px rgb(15 23 42 / .16);
}
.compactTaskTableEditToggle.isEditing { background: #1769d2; border-color: #1769d2; color: #fff; }
.compactTaskReadOnlyValue {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compactTaskDescriptionCell .compactTaskReadOnlyValue { font-weight: 750; }
.compactTaskTable:not(.isEditing) tbody tr { cursor: pointer; }
.compactTaskTable:not(.isEditing) tbody tr:hover { outline: 2px solid rgb(23 105 210 / .25); outline-offset: -2px; }
.compactTaskTable {
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}
.compactTaskTable th,
.compactTaskTable td {
  padding: 5px 7px;
  border-right: 1px solid #dfe3e8;
  border-bottom: 1px solid #dfe3e8;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compactTaskTable th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e8eef5;
  color: #26313e;
  font-weight: 800;
  overflow: visible;
}
.compactTaskColumnLabel {
  display: block;
  padding-right: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compactTaskTable tbody tr:last-child td { border-bottom: 0; }
.compactTaskTable th:last-child,
.compactTaskTable td:last-child { border-right: 0; }
.compactTaskTable tbody tr:nth-child(even) { background: #f7f9fb; }
.compactTaskTable tbody tr.isWorkerColourCoded {
  background: color-mix(in srgb, var(--worker-colour) 11%, #fff);
}
.compactTaskTable tbody tr.isWorkerColourCoded > td:first-child {
  box-shadow: inset 4px 0 var(--worker-colour);
}
.compactTaskTable tbody tr.isComplete { opacity: .58; }
.compactTaskTable tbody tr.isFocusedSubtask { background: #e4f0ff; box-shadow: inset 4px 0 #1769d2; }
.compactTaskTable .isFocusedGroupCell { background: #dcecff; box-shadow: inset 0 0 0 1px #1769d2; }
.compactMobileTaskTableScroll { overflow-x: hidden; }
.compactMobileTaskTable { width: 100%; min-width: 0; table-layout: fixed; }
.compactMobileTaskTable td { padding: 8px 9px; }
.compactMobileTaskPrimary,
.compactMobileTaskSecondary { display: flex; align-items: center; min-width: 0; }
.compactMobileTaskPrimary { gap: 7px; }
.compactMobileTaskGrouping { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; }
.progress.compactMobileProgressIcon {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-width: 2px;
  color: #172536;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}
.compactMobileProgressFlash {
  position: fixed;
  z-index: 10020;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #0d4f9f;
  border-radius: 4px;
  background: rgb(23 105 210 / .96);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
  animation: compactMobileProgressConfirmation 1.25s ease-out forwards;
}
.compactMobileProgressFlash.progress-complete,
.compactMobileProgressFlash.progress-inspected { border-color: #18743e; background: rgb(31 145 74 / .96); }
.compactMobileProgressFlash.progress-problem { border-color: #991b1b; background: rgb(220 38 38 / .97); }
.compactMobileProgressFlash.progress-waiting,
.compactMobileProgressFlash.progress-on-hold { border-color: #946408; background: rgb(202 138 4 / .97); color: #18130a; }
@keyframes compactMobileProgressConfirmation {
  0%, 62% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.985); }
}
.compactMobileTaskSecondary { justify-content: space-between; gap: 8px; padding: 5px 0 0 27px; }
.compactMobileTaskSecondary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.compactMobileTaskSecondary span { flex: 0 0 auto; color: #5f6670; font-size: 12px; }
.compactTaskSelectCell { text-align: center; }
.compactTaskTable .taskSelectCheckbox { width: 20px; height: 20px; margin: 0; vertical-align: middle; }
.compactTaskIndicators { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; font-size: 15px; }
.compactTaskIndicators span { display: inline-flex; line-height: 1; }
.compactTaskColumnResize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 11px;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.compactTaskColumnResize::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 5px;
  width: 2px;
  background: #8d98a6;
}
.compactTaskColumnResize:hover::after,
.compactTaskColumnResize:active::after { top: 8%; bottom: 8%; background: #1769d2; }
body.taskTableColumnResizing { cursor: col-resize; user-select: none; }
.compactTaskCellEditor {
  width: 100%;
  min-width: 0;
  min-height: 27px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
}
.compactTaskCellEditor:hover { border-color: #c8ccd2; background: #fff; }
.compactTaskCellEditor:focus { border-color: #1769d2; background: #fff; outline: 2px solid rgb(23 105 210 / .18); }
.compactTaskDescriptionCell .compactTaskCellEditor { font-weight: 750; }
.compactTaskDateEditor { padding-inline: 3px; }
.compactTaskEmptyDate {
  width: 100%;
  min-height: 27px;
  padding: 3px 5px;
  border: 1px dashed #c8ccd2;
  border-radius: 3px;
  background: transparent;
  color: #68717d;
  text-align: left;
  font: inherit;
}
.compactTaskEmptyDate:hover { border-color: #1769d2; color: #1769d2; background: rgb(23 105 210 / .06); }
.taskView.tableModeActive,
#taskView.tableModeActive,
#materialsView.tableModeActive,
#toolsView.tableModeActive {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#taskView:not(.tableModeActive) { overflow-y: auto; }
#taskView.tableModeActive .taskViewSummary { display: none; }
#taskView.tableModeActive .taskList,
#materialsView.tableModeActive .materialsList,
#toolsView.tableModeActive .materialsList {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.compactMaterialTitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-align: left;
}
a.compactMaterialTitle { color: #1769d2; text-decoration: underline; text-underline-offset: 2px; }
.compactMaterialStatus,
.compactTableActions { display: flex; align-items: center; gap: 6px; min-width: 0; }
.compactMaterialStatus .materialStatus { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compactMaterialStatus .materialStatusIconButton { flex: 0 0 auto; padding: 4px 6px; }
.compactTableActions .compactTaskTableLink { width: 34px; min-width: 34px; text-align: center; }
.compactMaterialLocations { display: flex; flex-wrap: wrap; gap: 3px 8px; min-width: 0; }
.compactMaterialLocationLink {
  min-width: 0;
  min-height: 0;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: #1769d2;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compactTaskTableLink {
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 2px 3px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compactTaskTableLink:hover { background: rgb(23 105 210 / .09); }
.compactTaskDescriptionCell .compactTaskTableLink { font-weight: 750; }
.compactTaskProgress {
  width: auto;
  padding: 3px 7px;
  border: 1px solid #c4cad2;
  border-radius: 4px;
  background: #e8ebef;
}
.compactTaskProgress.isProblemAlert { animation: problemProgressBadgePulse .62s steps(1, end) infinite; }
.compactTaskNotesCell { color: #59616d; }
.stageHeading .groupSelectCheckbox,
.taskGroupHeading .groupSelectCheckbox {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0 6px 0 0;
  accent-color: #1769d2;
  vertical-align: middle;
}
.stageHeading .headingAddButton, .taskGroupHeading .headingAddButton, .stageActions .headingAddButton {
  float: right;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.longPressEditTarget {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.stageHeading .headingTextButton, .stageActions .headingTextButton {
  float: right;
  min-height: 32px;
  padding: 4px 10px;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 750;
}
.iconActionButton {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.stageHeading .iconActionButton, .taskGroupHeading .iconActionButton {
  float: right;
  margin-left: 8px;
}
.taskGroupActions { display: flex; gap: 8px; padding: 0 3px 8px 24px; }
.taskGroupActions button, .editButton { padding: 5px 9px; font-size: 13px; }
.taskGroupActions .iconActionButton { padding: 0; flex: 0 0 32px; }
.taskToolCategorySummary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 0 3px 8px 24px;
  color: #59616d;
  font-size: 13px;
}
.toolCategoryChips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.toolCategoryChip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f1ff;
  color: #103c73;
  font-weight: 700;
}
.toolCategoryEmpty { color: #7b838e; font-weight: 650; }
.taskToolCategorySummary button { padding: 5px 9px; font-size: 13px; }
.toolCategoryList { display: grid; gap: 7px; }
.toolCategoryOption {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 9px !important;
  padding: 8px 10px;
  border: 1px solid #e3e5e8;
  border-radius: 6px;
}
.toolCategoryOption input { width: 18px; height: 18px; min-height: 0; }
.stageHeading::marker, .taskGroupHeading::marker { color: #727985; }
.taskOrderList { display: grid; gap: 8px; width: 100%; }
#taskOrderDialog {
  width: min(780px, calc(100% - 24px));
  height: min(720px, calc(100vh - 24px));
}
#taskOrderForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
#taskOrderForm > .dialogHeading,
#taskOrderForm > .formMessage,
#taskOrderForm > .dialogActions {
  flex: 0 0 auto;
}
#taskOrderList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#taskOrderForm > .dialogActions {
  margin: 0 -20px -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e3e5e8;
  background: #fff;
}
.taskOrderRow {
  display: grid;
  grid-template-columns: 34px 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #e3e5e8;
  border-radius: 7px;
  background: #fff;
  color: #17191d;
}
.taskOrderRow.isDragging { opacity: .55; }
.taskOrderRow.isDragOver {
  border-color: #1769d2;
  box-shadow: 0 0 0 2px rgba(23, 105, 210, .18);
}
#taskOrderList .taskOrderDragHandle {
  grid-column: 1;
  grid-row: 1;
}
#taskOrderList .reorderControls {
  order: 0;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 32px 32px;
  justify-content: start;
}
#taskOrderList .taskOrderLabel {
  grid-column: 3;
  grid-row: 1;
}
.taskOrderLabel { display: grid; gap: 3px; min-width: 0; }
.taskOrderLabel strong { overflow-wrap: anywhere; }
.taskOrderLabel span { color: #666c76; font-size: 13px; }
.managerForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(720px, calc(100vh - 24px));
  max-height: none;
  overflow: hidden;
}
.managerForm > .dialogHeading,
.managerForm > .formMessage,
.managerForm > .managerNewRow,
.managerForm > .dialogActions {
  flex: 0 0 auto;
}
.managerList {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.managerRow {
  display: grid;
  grid-template-columns: 34px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #e3e5e8;
  border-radius: 7px;
  background: #fff;
}
.managerRow.hasCurrentToggle { grid-template-columns: 34px 24px minmax(0, 1fr) auto auto auto; }
.managerCurrentToggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.managerCurrentCheckbox { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: #1769d2; }
.projectAcronymBadge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 7px;
  border: 1px solid #aeb8c5;
  border-radius: 5px;
  background: #eef3f8;
  color: #3c4652;
  font-size: 11px;
  font-weight: 800;
}
.managerRow.isSelected { border-color: #1769d2; background: #edf5ff; }
.managerSelectCheckbox {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  accent-color: #1769d2;
}
.managerRow.isDragging { opacity: .58; }
.managerRowDragging,
.managerRowDragging * { cursor: grabbing !important; }
.managerRow.isDragOver {
  border-color: #1769d2;
  box-shadow: 0 0 0 2px rgba(23, 105, 210, .18);
}
.managerDragHandle {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.managerDragHandle:active { cursor: grabbing; }
.managerRowText {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
  user-select: none;
  -webkit-user-select: none;
}
.managerRowText.isEditing {
  padding: 6px 8px;
  border: 1px solid #1769d2;
  border-radius: 6px;
  background: #f6f9ff;
  user-select: text;
  -webkit-user-select: text;
}
.managerRowActions {
  display: flex;
  gap: 4px;
}
.managerRowActions .iconActionButton {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  line-height: 1;
}
.managerNewRow input,
.managerNewRow textarea {
  width: 100%;
  min-width: 0;
}
.managerNewRow textarea {
  min-height: 42px;
  max-height: 92px;
  resize: vertical;
}
.managerNewRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.managerForm > .dialogActions {
  margin: 0 -20px -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e3e5e8;
  background: #fff;
}
.cloudUserAdminForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(820px, calc(100vh - 24px));
  max-height: none;
  overflow: hidden;
}
.cloudUserAdminForm > .dialogHeading,
.cloudUserAdminForm > .formMessage,
.cloudUserAdminForm > .dialogActions {
  flex: 0 0 auto;
}
.cloudUserAdminSection {
  display: grid;
  gap: 8px;
}
.cloudUserAdminSection[hidden] { display: none; }
.cloudUserAdminSection h3 {
  margin: 0;
  font-size: 15px;
}
.cloudUserAdminList,
.cloudProjectAccessList,
.cloudUserProjectList {
  display: grid;
  gap: 7px;
  overflow-y: auto;
  min-height: 0;
}
.cloudUserAdminList {
  max-height: 190px;
}
.cloudProjectAccessList {
  max-height: 150px;
}
.cloudUserProjectList {
  max-height: 260px;
  padding-right: 2px;
}
.cloudProjectAccessRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 30px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e3e5e8;
  border-radius: 7px;
}
.cloudUserAdminRow {
  display: block;
  padding: 0;
  border: 1px solid #e3e5e8;
  border-radius: 7px;
  overflow: clip;
}
.cloudUserSummary {
  display: grid;
  grid-template-columns: auto 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  cursor: pointer;
  list-style-position: inside;
}
.cloudUserSummary::marker { content: ""; }
.cloudUserSummary::before { content: "▸"; color: #68717d; font-size: 13px; }
.cloudUserAdminRow[open] > .cloudUserSummary::before { content: "▾"; }
.cloudUserColourSwatch {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #aeb4bd;
}
.cloudUserColourField { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; gap: 8px; }
.cloudUserColourField input[type="color"] { width: 52px; min-height: 38px; padding: 3px; cursor: pointer; }
.cloudUserRoleBadge { text-transform: capitalize; }
.cloudUserOverview { display: grid; gap: 8px; padding: 0 10px 10px 28px; }
.cloudUserSettingsOverview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 9px; border: 1px solid #d8dbe0; border-radius: 6px; background: #f8f9fa; }
.cloudUserSettingsText { display: flex; flex-wrap: wrap; gap: 5px 18px; min-width: 0; }
.cloudUserSettingsText > span { display: inline-flex; gap: 5px; min-width: 0; font-size: 12px; }
.cloudUserSettingsText strong { color: #4f5864; }
.cloudUserSettingsText span span { overflow-wrap: anywhere; }
.cloudUserDayRate { display: grid; grid-template-columns: auto 100px auto; justify-content: start; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; }
.cloudUserDayRate input { width: 100px !important; min-height: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.cloudUserDayRate button { width: auto !important; min-height: 36px; padding: 5px 11px; }
.cloudUserNestedDetails,
.cloudUserEditorDisclosure {
  border: 1px solid #d8dbe0;
  border-radius: 6px;
  overflow: clip;
}
.cloudUserNestedDetails > summary,
.cloudUserEditorDisclosure > summary {
  padding: 8px 10px;
  background: #f4f6f8;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.cloudUserPermissionOverview,
.cloudUserNestedDetails > .cloudUserJobsList,
.cloudUserNestedDetails > .cloudUserAttendanceList,
.cloudUserEditorDisclosure > .cloudUserProjectList,
.cloudUserEditorDisclosure > .cloudUserAttendanceList { padding: 8px; }
.cloudUserPermissionOverview { display: grid; gap: 5px; }
.cloudUserPermissionActions { display: flex; justify-content: flex-end; padding: 0 8px 8px; }
.cloudUserPermissionActions button { min-height: 36px; }
.cloudUserJobsList { display: grid; gap: 9px; }
.cloudUserJobSection { display: grid; gap: 5px; }
.cloudUserJobSection h4 { margin: 0; font-size: 12px; color: #4f5864; }
.cloudUserJobSection .cloudUserAttendanceEmpty { margin: 0; }
.cloudUserJobButton { display: grid; gap: 2px; width: 100%; padding: 7px 9px; text-align: left; white-space: normal; }
.cloudUserJobButton strong { font-size: 13px; }
.cloudUserJobButton small { color: #68717d; font-size: 11px; }
.cloudUserPermissionOverviewRow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 2px; border-bottom: 1px dotted #aeb4bd; font-size: 12px; }
.cloudUserPermissionOverviewRow span { color: #68717d; text-transform: capitalize; }
.cloudUserOverviewActions { display: flex; justify-content: flex-end; gap: 8px; }
.cloudUserOverviewActions > button:not(.iconActionButton) { min-height: 36px; padding: 6px 11px; }
.cloudUserPickButton {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cloudUserPickName {
  font-weight: 600;
}
.cloudUserActivity {
  color: #68717d;
  font-size: 0.82em;
}
.cloudUserActivity::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #9aa1aa;
  vertical-align: 1px;
}
.cloudUserActivity.isOnline {
  color: #176b3a;
}
.cloudUserActivity.isOnline::before {
  background: #21a45d;
}
.cloudUserAdminRow .iconActionButton {
  min-width: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cloudProjectAccessRow span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cloudUserProjectRow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(105px, 150px);
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid #e3e5e8;
  border-radius: 7px;
}
.cloudUserProjectRow input { width: 18px; height: 18px; margin: 0; }
.cloudUserProjectRow span { min-width: 0; overflow-wrap: anywhere; }
.cloudUserProjectRow select { width: 100%; min-width: 0; }
.cloudUserEditorActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#cloudUserEditor {
  min-height: 0;
  overflow: hidden;
}
#cloudUserEmailsInput { width: 100%; resize: vertical; }
.cloudUserAdminGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cloudUserAdminGrid h3,
.cloudUserAdminGrid .cloudProjectAccessList,
.cloudUserAdminGrid .cloudUserEditorDisclosure {
  grid-column: 1 / -1;
}
.cloudUserAdminForm > .dialogActions {
  margin: 0 -20px -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e3e5e8;
  background: #fff;
}
.userAdminView .cloudUserAdminForm {
  width: min(100%, 1040px);
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 12px;
  overflow: visible;
}
.cloudUserAdminToolbar { position: sticky; top: 0; z-index: 8; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid #d8dbe0; border-radius: 7px; background: #fff; box-shadow: 0 2px 6px rgb(25 40 55 / .1); }
.cloudUserAdminToolbar button:last-child { margin-left: auto; }
.cloudflareSettingsPanel { padding: 0; border: 1px solid #d8dbe0; border-radius: 7px; background: #fff; }
.cloudflareSettingsPanel > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 12px; cursor: pointer; font-weight: 800; list-style: none; }
.cloudflareSettingsPanel > summary::-webkit-details-marker { display: none; }
.cloudflareSettingsPanel > summary::before { content: "›"; font-size: 20px; line-height: 1; transition: transform .15s ease; }
.cloudflareSettingsPanel[open] > summary::before { transform: rotate(90deg); }
.cloudflareSettingsPanel > summary .statusBadge { margin-left: auto; }
.cloudflareSettingsHelp { margin: 0; padding: 0 12px 10px; color: #626a75; font-size: 12px; }
.cloudflareSettingsGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.cloudflareSettingRow { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 9px; border: 1px solid #e0e4e9; border-radius: 6px; background: #f7f9fb; }
.cloudflareSettingRow strong { font-size: 11px; color: #626a75; text-transform: uppercase; }
.cloudflareSettingRow span, .cloudflareSettingRow small { overflow-wrap: anywhere; }
.cloudflareSettingRow span { font-weight: 700; }
.cloudflareSettingRow small { color: #68717c; line-height: 1.3; }
.cloudflareSettingsActions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 12px 12px; }
.cloudflareSettingsActions .buttonLike { min-height: 38px; }
.userAdminView .cloudUserAdminList { max-height: none; }
.invoiceView[hidden] { display: none; }
.invoiceView:not([hidden]) { display: flex; justify-content: center; align-items: flex-start; padding: 14px 14px max(96px, calc(76px + env(safe-area-inset-bottom))); }
.invoicePanel { position: relative; display: grid; gap: 12px; width: min(100%, 760px); padding: 16px; border: 1px solid #d8dbe0; border-radius: 7px; background: #fff; }
.invoicePanel.hasInvoicePayment { width: 100%; }
.invoicePanel > p { margin: 0; color: #5d6570; }
.invoiceToolbar { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.invoiceToolbar > strong { flex: 1 1 auto; min-width: 0; }
.invoiceAddButton { flex: 0 0 42px; width: 42px; height: 42px; font-size: 26px; line-height: 1; }
.invoiceAddMenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; display: grid; min-width: 190px; padding: 6px; border: 1px solid #c8ccd2; border-radius: 7px; background: #fff; box-shadow: 0 10px 24px rgb(20 30 42 / .2); }
.viewTabs > .invoiceAddMenu { right: 0; left: auto; z-index: 80; }
.invoiceAddMenu[hidden] { display: none; }
.invoiceAddMenu button { justify-content: flex-start; min-height: 40px; border: 0; background: transparent; text-align: left; }
.invoiceAddMenu button:hover { background: #eef3f7; }
.invoiceGeneratorLine { display: flex; align-items: center; gap: 10px 16px; min-width: 0; }
.invoiceGeneratorLine > .summary { flex: 1 1 auto; min-width: 0; }
.invoiceNumberDisplay { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.invoiceActionLine { display: flex; align-items: center; gap: 10px; }
.invoiceNumberDisplay span,
.invoiceGeneratedRow span { color: #626a75; font-size: 12px; font-weight: 700; }
.invoiceNumberDisplay strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.invoiceGeneratedRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; padding: 11px; border: 1px solid #b9d4e6; border-radius: 6px; background: #eef7fc; }
.invoiceGeneratedRow[hidden] { display: none; }
.invoiceGeneratedRow span { grid-column: 1 / -1; }
.invoiceGeneratedRow strong { min-width: 0; font-size: 23px; overflow-wrap: anywhere; }
.invoiceGenerateButton { justify-self: start; min-height: 42px; }
@media (max-width: 620px) {
  .invoiceToolbar { align-items: flex-start; flex-wrap: wrap; }
  .invoiceToolbar > strong { align-self: center; }
  .invoiceToolbar .invoiceNumberDisplay { flex: 1 0 100%; padding-left: 52px; }
  .invoiceGeneratorLine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .invoiceGeneratorLine > .summary { grid-column: 1 / -1; }
  .invoiceGeneratorLine .invoiceGenerateButton { min-height: 38px; }
  .invoiceActionLine > button { flex: 1 1 0; }
}
.invoicePaymentHistorySection { display: grid; gap: 8px; border-top: 1px solid #e3e5e8; padding-top: 14px; }
.invoicePaymentHistory { display: grid; gap: 6px; }
.invoicePaymentHistoryItem { border-bottom: 1px solid #e3e5e8; padding: 5px 0; }
.invoicePaymentHistoryItem > summary { cursor: pointer; font-weight: 700; }
.invoicePaymentHistoryItem ul { margin: 8px 0 4px; padding-left: 22px; }
.invoicePaymentHistoryActions { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.invoicePaymentDialog { position: static; inset: auto; width: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: visible; border: 1px solid #d8dbe0; border-radius: 6px; background: inherit; color: inherit; }
.invoicePaymentDialog[hidden],
.invoicePaymentEditorDialog[hidden] { display: none !important; }
.invoicePaymentShell { position: relative; min-width: 0; }
.invoicePaymentEditorDialog {
  width: min(760px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c8ccd2;
  border-radius: 7px;
  background: inherit;
  color: inherit;
}
.invoicePaymentEditorDialog .invoicePaymentForm { box-sizing: border-box; max-height: calc(100dvh - 26px); overflow: auto; }
.invoicePaymentInspectorResizeHandle,
.invoicePaymentInspectorCollapseButton { display: none; }
.invoicePaymentDialog .invoicePaymentForm { max-height: none; padding: 14px; overflow: visible; overscroll-behavior: auto; }
.invoicePaymentDialog[data-mode="browse"] .dialogHeading,
.invoicePaymentDialog[data-mode="browse"] .invoicePaymentStickyHeader,
.invoicePaymentDialog[data-mode="browse"] .invoicePaymentMessage { display: none; }
.invoicePaymentDialog[data-mode="browse"] .invoicePaymentForm { padding-top: 12px; }
.invoicePaymentStickyHeader {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 -14px;
  background: #fff;
  box-shadow: 0 3px 8px rgb(20 30 42 / .08);
}
.invoicePaymentFields {
  display: grid;
  grid-template-columns: minmax(140px, .65fr) minmax(140px, .65fr) minmax(210px, 1fr) 145px 145px auto;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #d8dbe0;
  background: #fff;
}
.invoicePaymentFieldActions { align-self: end; display: flex; gap: 8px; }
.invoicePaymentFieldActions button { min-height: 42px; white-space: nowrap; }
.invoicePaymentFieldActions button[hidden] { display: none !important; }
@media (max-width: 1099px) {
  .invoicePaymentEditorDialog[open] {
    position: fixed;
    inset: 12px;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: 0;
  }
  .invoicePaymentFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoicePaymentFields > label:nth-child(3),
  .invoicePaymentFieldActions { grid-column: 1 / -1; }
  .invoicePaymentFieldActions { justify-content: flex-end; flex-wrap: wrap; }
}
.invoicePaymentTotals { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 9px 10px; border-block: 1px solid #d8dbe0; background: #f6f8fa; font-variant-numeric: tabular-nums; }
.invoicePaymentTotals span { white-space: nowrap; }
.invoicePaymentTotals .hasValue { color: #b42318; }
.invoicePaymentAttachmentsSection {
  margin: 0;
  padding: 0;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
}
.invoicePaymentAttachmentsSection[hidden] { display: none !important; }
.invoicePaymentAttachmentsSection > summary { padding: 9px 11px; background: #edf1f5; cursor: pointer; font-weight: 800; }
.invoicePaymentAttachmentControls { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 11px 0; }
.invoicePaymentAttachmentControls button { flex: 1 1 110px; min-height: 38px; }
.invoicePaymentAttachmentsSection > .formMessage { margin: 9px 11px; }
.invoicePaymentAttachmentsSection .receiptAttachmentList { margin: 0 11px 11px; }
.invoicePaymentItems { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 32px; }
.invoicePaymentItems section { min-width: 0; }
.invoicePaymentItems h3 { margin: 0 0 7px; font-size: 16px; }
.invoicePaymentTableHeading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.invoicePaymentTableHeading h3 { margin: 0; }
.invoicePaymentFilterDisclosure > summary { display: none; }
.invoicePaymentTableControls { display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0; }
.invoicePaymentTableHeading label:not(.toggle) { display: grid; grid-template-columns: auto minmax(150px, 220px); align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.invoicePaymentTableHeading .invoicePaymentHideAllocated {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0;
  white-space: nowrap;
}
.invoicePaymentTableHeading .invoicePaymentHideAllocated input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.invoicePaymentTableHeading select { min-height: 36px; }
.invoicePaymentTimesheetScroll {
  width: 100%;
  max-width: 100%;
  max-height: min(68dvh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 8px;
}
.invoicePaymentTimesheetWrapper { min-width: 0; }
.invoicePaymentTablePaging { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; }
.invoicePaymentTablePaging span { margin-right: auto; color: #626a75; font-size: 13px; font-weight: 700; }
.invoicePaymentTablePaging button { min-height: 36px; padding: 7px 10px; }
.invoicePaymentTimesheetTable { min-width: 1180px; }
.invoicePaymentTimesheetTable th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px rgb(255 255 255 / .35); }
.invoicePaymentTimesheetTable tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid #8795a5;
  background: #e8eef5;
  color: #202a36;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.invoicePaymentTableTotalsLabel { text-align: left !important; }
.invoicePaymentTimesheetRow .invoicePaymentCurrentAllocation { font-weight: 700; }
.invoicePaymentTimesheetRow.isPartPaid .invoicePaymentItemStatus { color: #9a6700; font-weight: 700; }
.invoicePaymentTimesheetRow.isPaid { opacity: .62; }
.invoicePaymentTimesheetRow.isPaid .invoicePaymentItemStatus { color: #137333; font-weight: 700; }
.invoicePaymentTimeRow { background: #eef8f0; }
.invoicePaymentReceiptRow { background: #fff7e6; }
.invoicePaymentDisplayPaymentRow { background: #eef7fc; font-weight: 700; }
.invoicePaymentDisplayPaymentRow .invoicePaymentItemStatus { color: #176b94; }
.invoicePaymentDisplayPaymentRow .invoicePaymentUnallocatedBalance { color: #b42318; font-weight: 850; }
.invoicePaymentDisplayPaymentRow.isCurrentPaymentAllocation,
.invoicePaymentDisplayPaymentRow.isAllocationPreview {
  background: #fff1b8;
  outline: 3px solid #c87900;
  outline-offset: -3px;
}
.invoicePaymentDisplayInvoiceRow { background: #f4f0fb; font-weight: 700; }
.invoicePaymentDisplayInvoiceRow .invoicePaymentItemStatus { color: #6941a5; }
.invoicePaymentTimesheetRow.isPaymentAllocationMatch { outline: 2px solid #2f7fa8; outline-offset: -2px; }
.invoicePaymentTimesheetRow { cursor: pointer; }
.invoicePaymentTimesheetRow:focus-visible { outline: 3px solid #1769d2; outline-offset: -3px; }
.invoicePaymentTimesheetRow button,
.invoicePaymentTimesheetRow input { cursor: auto; }
.invoicePaymentActionsColumn { width: 80px; min-width: 80px; max-width: 80px; }
.invoicePaymentRowControls { display: flex; align-items: center; gap: 4px; min-width: 68px; white-space: nowrap; }
.invoicePaymentTimesheetTable td.adminRecordDescriptionCell { text-align: left !important; }
.invoicePaymentDescriptionButton { display: block; justify-content: flex-start; width: 100%; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left !important; text-decoration: underline; overflow-wrap: anywhere; }
.invoicePaymentDescriptionButton:hover { background: transparent; }
.invoicePaymentItemList { display: grid; gap: 0; border-top: 1px solid #d8dbe0; }
.invoicePaymentItemRow { display: grid; grid-template-columns: 28px minmax(180px, 1fr) minmax(210px, auto); gap: 8px; align-items: center; min-width: 0; padding: 9px 4px; border-bottom: 1px solid #d8dbe0; }
.invoicePaymentItemRow > input { width: 18px; height: 18px; margin: 0; }
.invoicePaymentItemIdentity,
.invoicePaymentItemValues { display: grid; gap: 2px; min-width: 0; }
.invoicePaymentItemIdentity strong { overflow-wrap: anywhere; }
.invoicePaymentItemIdentity small,
.invoicePaymentItemValues small { color: #626a75; }
.invoicePaymentItemValues { text-align: right; font-variant-numeric: tabular-nums; }
.invoicePaymentItemStatus { color: #59616c; }
.invoicePaymentItemRow.isPartPaid .invoicePaymentItemStatus { color: #9a6700; }
.invoicePaymentItemRow.isPaid { opacity: .62; }
.invoicePaymentItemRow.isPaid .invoicePaymentItemStatus { color: #137333; }
.invoicePaymentForm > .dialogActions { position: sticky; bottom: 0; z-index: 7; margin: 0 -14px -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: inherit; border-top: 1px solid #d8dbe0; box-shadow: 0 -3px 8px rgb(20 30 42 / .08); }
@media (min-width: 1100px) {
  .invoicePaymentDialog.desktopPaymentInspector { position: relative; }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > dialog.invoiceActivityRecordInspector[open] {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 12;
    display: block;
    width: var(--invoice-payment-inspector-width, 440px);
    max-width: min(720px, calc(100% - 340px));
    height: min(100%, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    margin: 0;
    padding: 0;
    overflow: auto;
    border: 0;
    border-left: 1px solid #c8ccd2;
    border-radius: 0;
    background: inherit;
    color: inherit;
    box-shadow: -8px 0 20px rgb(20 30 42 / .12);
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > dialog.invoiceActivityRecordInspector[open] > .editorForm {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: 12px;
    align-content: start;
    background: inherit;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > dialog.invoiceActivityRecordInspector[open] > .editorForm > .dialogActions {
    position: sticky;
    bottom: -12px;
    z-index: 4;
    margin: auto -12px -12px;
    padding: 10px 12px;
    background: inherit;
    border-top: 1px solid #c8ccd2;
    box-shadow: 0 -3px 8px rgb(20 30 42 / .1);
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > dialog.invoiceActivityRecordInspector[open] > .editorForm > label,
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > dialog.invoiceActivityRecordInspector[open] > .editorForm input,
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > dialog.invoiceActivityRecordInspector[open] > .editorForm select,
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > dialog.invoiceActivityRecordInspector[open] > .editorForm textarea {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .dialogHeading {
    justify-content: flex-end;
    min-height: 42px;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .dialogHeading h2,
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector #expenseMessage {
    display: none;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentHeading {
    display: contents;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentHeading > strong {
    grid-column: 1 / -1;
    order: 1;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentList {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    order: 2;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentHeading > .receiptAttachmentAddButton {
    justify-content: center;
    width: 100%;
    order: 3;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .attachmentPasteTarget,
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentHelp {
    grid-column: 1 / -1;
    order: 4;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentCard {
    grid-template-rows: auto auto auto auto;
    width: 100%;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentPreview {
    width: 100%;
    height: auto;
    min-height: 160px;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentPreview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentActions {
    grid-row: 2;
  }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentName { grid-row: 3; }
  .invoicePaymentDialog.desktopPaymentInspector > .invoicePaymentShell > #expenseDialog.invoiceActivityRecordInspector .receiptAttachmentStatus { grid-row: 4; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentShell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--invoice-payment-inspector-width, 440px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 0;
  }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentItems {
    grid-column: 1;
    grid-row: 1 / 5;
    min-width: 0;
    padding: 14px 0 32px 14px;
  }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentEditorDialog .dialogHeading { margin: 0; padding: 10px 12px; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentEditorDialog .dialogHeading > div { min-width: 0; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentEditorDialog .dialogHeading h2 { margin: 0; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentInspectorCollapseButton { display: inline-grid; place-items: center; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentStickyHeader { position: static; margin: 0; box-shadow: none; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentFields { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentFields > label:nth-child(3),
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentFieldActions { grid-column: 1 / -1; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentFieldActions { justify-content: flex-end; flex-wrap: wrap; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentTotals { padding: 9px 12px; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentAttachmentsSection { margin: 10px 12px 0; overflow: visible; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentMessage { margin: 0; padding: 10px 12px 12px; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentInspectorResizeHandle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--invoice-payment-inspector-width, 440px) - 7px);
    z-index: 14;
    display: block;
    width: 14px;
    cursor: col-resize;
    touch-action: none;
  }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentInspectorResizeHandle::after { content: ""; position: absolute; inset-block: 0; left: 6px; width: 3px; background: #8794a5; opacity: .72; }
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentInspectorResizeHandle:hover::after,
  .invoicePaymentDialog.desktopPaymentInspector .invoicePaymentInspectorResizeHandle:focus-visible::after,
  body.invoicePaymentInspectorResizing .invoicePaymentInspectorResizeHandle::after { width: 4px; background: #1769d2; opacity: 1; }
  body.invoicePaymentInspectorResizing,
  body.invoicePaymentInspectorResizing * { cursor: col-resize !important; user-select: none !important; }
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed .invoicePaymentShell { grid-template-columns: minmax(0, 1fr) 46px; }
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed > .invoicePaymentShell > .invoicePaymentEditorDialog { width: 46px; }
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed .invoicePaymentInspectorResizeHandle,
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed .invoicePaymentStickyHeader,
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed .invoicePaymentAttachmentsSection,
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed .invoicePaymentMessage,
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed .invoicePaymentEditorDialog .dialogHeading > div { display: none; }
  .invoicePaymentDialog.desktopPaymentInspector.isCollapsed .invoicePaymentEditorDialog .dialogHeading { justify-content: center; padding: 8px 5px; }
}
@media (max-width: 720px) {
  .cloudflareSettingsGrid { grid-template-columns: 1fr; }
  .cloudflareSettingsActions { justify-content: stretch; }
  .cloudflareSettingsActions > * { flex: 1 1 0; }
  .invoicePaymentFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoicePaymentFields > label:nth-child(3) { grid-column: 1 / -1; }
  .invoicePaymentFieldActions { grid-column: 1 / -1; justify-content: flex-end; }
  .invoicePaymentTableHeading { align-items: stretch; flex-direction: column; }
  .invoicePaymentTableHeading > h3 { display: none; }
  .invoicePaymentFilterDisclosure > summary { display: flex; align-items: center; min-height: 36px; padding: 6px 9px; border: 1px solid #c8ccd2; border-radius: 5px; background: #eef3f7; font-size: 13px; font-weight: 750; cursor: pointer; }
  .invoicePaymentFilterDisclosure[open] > summary { margin-bottom: 8px; }
  .invoicePaymentTableControls { justify-content: space-between; }
  .invoicePaymentTableHeading label:not(.toggle) { grid-template-columns: auto minmax(0, 1fr); flex: 1 1 auto; }
  .invoicePaymentItemRow { grid-template-columns: 26px minmax(0, 1fr); }
  .invoicePaymentItemValues { grid-column: 2; text-align: left; }
  .invoicePaymentAttachmentControls { display: grid; grid-template-columns: 1fr 1fr; }
  .invoicePaymentAttachmentControls .receiptAttachmentPasteTarget { grid-column: 1 / -1; }
}
.userAdminView .cloudUserAdminForm > .dialogActions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -12px -12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.selectedTaskPanel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #c8ccd2;
  border-radius: 7px;
  background: #f5f7fa;
  box-shadow: 0 6px 14px rgba(12, 16, 22, .08);
}
.selectedTaskPanel[hidden] { display: none; }
#selectedTaskPanel,
#selectedMaterialPanel {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 28;
  width: min(1676px, calc(100vw - 48px));
  margin: 0;
  transform: translateX(-50%);
}
body.dialogLocked #selectedTaskPanel,
body.dialogLocked #selectedMaterialPanel { display: none !important; }
#selectedTaskPanel:not([hidden]) ~ .taskList { padding-bottom: 92px; }
#selectedMaterialPanel:not([hidden]) ~ .materialsList { padding-bottom: 92px; }
.selectedMaterialStatusLabel { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.selectedMaterialStatusLabel select { min-width: 118px; padding: 6px 8px; }
.selectedTaskPanel strong { margin-right: auto; }
.selectedTaskPanel .iconActionButton {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
}
.removeLinkIconButton { position: relative; }
.removeLinkIconButton .removeLinkMark {
  position: absolute;
  right: 1px;
  bottom: 0;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #b42318;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}
.bulkTaskUnlinkButton { margin-right: auto; }
.selectedTaskDeleteButton { margin-left: auto; }
.subtaskManagerSelectionActions { position: sticky; top: 0; z-index: 5; margin: 8px 0; }
.taskRow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; margin-left: 12px; padding: 10px 3px 10px 14px; border-top: 1px solid #e3e5e8; border-left: 3px solid #d7dee8; background: #fff; }
.dragHandle { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background-color: transparent; background-image: linear-gradient(#727985, #727985), linear-gradient(#727985, #727985), linear-gradient(#727985, #727985); background-size: 18px 2px, 18px 2px, 18px 2px; background-position: center 9px, center 16px, center 23px; background-repeat: no-repeat; }
.subtaskDragHandle { order: 1; }
.reorderControls { order: 2; display: none; grid-template-columns: 28px 28px; flex: 0 0 auto; gap: 4px; }
.reorderControls button { width: 32px; height: 28px; padding: 0; font-size: 16px; line-height: 1; }
.taskSelectCheckbox {
  order: 3;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 5px 0 0;
  accent-color: #1769d2;
}
.taskRow.isDragging { opacity: .55; background: #e8ebef; }
.taskRow.isDragOver { border-color: #1769d2; box-shadow: inset 0 0 0 2px rgba(23, 105, 210, .18); }
.taskRow.isFocusedSubtask,
.taskRow.isNotificationTarget {
  border-top-color: #76aeff;
  border-left-color: #1769d2;
  background: #edf5ff;
  box-shadow: inset 0 0 0 1px rgb(23 105 210 / .22);
}
.taskRow.isFocusedSubtask .taskContent,
.taskRow.isNotificationTarget .taskContent { opacity: 1; }
.completeButton { order: 5; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 18px; touch-action: manipulation; }
.checkmark { visibility: visible; opacity: .35; font-weight: 800; }
.taskRow.isComplete .completeButton { background: #198754; border-color: #198754; color: #fff; }
.taskRow.isComplete .checkmark { opacity: 1; }
.taskRow.isComplete .taskContent { opacity: .58; }
.taskContent { order: 1; min-width: 0; flex: 1 1 100%; }
.taskRowActions { order: 6; display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; align-self: start; }
.taskRowActions .iconActionButton { width: 32px; height: 30px; }
.clickableTaskContent { cursor: pointer; border-radius: 4px; }
.clickableTaskContent:focus-visible { outline: 2px solid #1769d2; outline-offset: 3px; }
.taskHeading { display: flex; justify-content: space-between; gap: 12px; }
.taskName { font-size: 17px; font-weight: 700; color: #151a22; }
.taskFocusBadge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid #1769d2;
  border-radius: 4px;
  background: #1769d2;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: 2px;
}
.rowIcon, .materialIcon { display: inline-block; margin-left: 7px; font-size: 15px; line-height: 1; vertical-align: baseline; }
.progress { order: 4; flex: none; align-self: center; padding: 3px 7px; border-radius: 4px; background: #e8ebef; color: #3d434c; font-size: 12px; font-weight: 650; }
.progress.isProblemAlert {
  border-color: #b91c1c;
  animation: problemProgressBadgePulse .62s steps(1, end) infinite;
}
@keyframes problemProgressBadgePulse {
  0%, 49% { background: #dc2626; border-color: #b91c1c; color: #fff; }
  50%, 100% { background: #facc15; border-color: #ca8a04; color: #352900; }
}
.progress.clickableProgress { cursor: pointer; user-select: none; -webkit-user-select: none; }
.progress.clickableProgress:active { transform: translateY(1px); }
.subtask { margin-top: 3px; font-size: 15px; }
.meta { margin-top: 5px; color: #6b717a; font-size: 13px; }
.noResults { padding: 40px 0; text-align: center; color: #6b717a; }

@media (min-width: 901px) {
  .taskRow {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    padding: 8px 6px 8px 12px;
  }
  .taskContent {
    order: 4;
    flex: 1 1 auto;
    min-width: 220px;
  }
  .taskHeading,
  .taskName,
  .meta {
    min-width: 0;
  }
  .taskName,
  .meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .progress {
    order: 5;
  }
  .completeButton {
    order: 6;
  }
  .taskRowActions {
    order: 7;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

dialog { width: min(620px, calc(100% - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid #c8ccd2; border-radius: 8px; background: #fff; color: #17191d; overscroll-behavior: contain; }
dialog::backdrop { background: rgb(0 0 0 / .42); }
.editorForm { display: grid; gap: 14px; padding: 20px; overflow-y: auto; max-height: calc(100vh - 26px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#taskToolCategoriesDialog,
#toolSettingsDialog {
  height: min(760px, calc(100vh - 24px));
}
#taskToolCategoriesForm,
#toolSettingsForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
#taskToolCategoriesForm > .dialogHeading,
#toolSettingsForm > .dialogHeading {
  flex: 0 0 auto;
}
#taskToolCategoryList,
#toolSettingsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#taskToolCategoriesForm > .dialogActions,
#toolSettingsForm > .dialogActions {
  flex: 0 0 auto;
  margin: 0 -20px -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e3e5e8;
  background: #fff;
}
#dependencyPickerDialog {
  height: min(760px, calc(100vh - 24px));
}
#dependencyPickerForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
#dependencyPickerForm > .dialogHeading,
#dependencyPickerForm > label,
#dependencyPickerForm > .formMessage {
  flex: 0 0 auto;
}
#dependencyPickerList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#dependencyPickerForm > .dialogActions {
  flex: 0 0 auto;
  margin: 0 -20px -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e3e5e8;
  background: #fff;
}
#taskDialog { height: min(760px, calc(100vh - 24px)); }
#taskForm {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  max-height: none;
  overflow: hidden;
  padding: 0;
}
#taskForm > .dialogHeading {
  flex: 0 0 auto;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #e3e5e8;
}
.taskDialogBody {
  display: grid;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.taskDialogFooter {
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e3e5e8;
  background: #fff;
}
.taskDialogFooter .dialogActions .iconButton { flex: 0 0 38px; width: 38px; min-width: 38px; }
.dialogHeading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialogHeading h2 { margin: 0; font-size: 21px; }
.taskDialogHeadingActions { display: flex; align-items: center; gap: 6px; }
.taskInspectorCollapseButton { display: none; }
.taskInspectorResizeHandle { display: none; }
.taskEditorSection {
  margin: 0;
  padding: 0;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
}
.taskEditorSection > summary {
  min-height: 38px;
  margin: 0;
  padding: 9px 11px;
  border-radius: 5px;
  background: #edf1f5;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}
.taskEditorSection[open] > summary { border-bottom: 1px solid #c8ccd2; border-radius: 5px 5px 0 0; }
.taskEditorSection > :not(summary) { margin-left: 11px; margin-right: 11px; }
.taskEditorSection > :nth-child(2) { margin-top: 11px; }
.taskEditorSection > :last-child { margin-bottom: 11px; }
.taskEditorSection > .taskEditorSectionContent { display: grid; gap: 12px; margin: 0; padding: 11px; }
.taskQuickActions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.taskQuickSubtaskText { margin: 0; font-weight: 750; white-space: pre-wrap; overflow-wrap: anywhere; }
.taskQuickActions .workerProgressButton { min-height: 42px; }
.taskEditorMaterialActions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.taskEditorMaterialActions button { flex: 1 1 120px; }
.taskEditorAttachmentPreview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.taskEditorAttachmentPreview:empty { display: none; }
.taskEditorAttachmentPreview button {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 110px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #c8ccd2;
  border-radius: 5px;
  background: #f4f6f8;
}
.taskEditorAttachmentPreview img { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: contain; border-radius: 3px; }
.taskEditorAttachmentPreview .taskEditorPDFPreview { width: 100%; min-height: 260px; aspect-ratio: 0.707; max-height: 70dvh; }

@media (min-width: 1100px) {
  body.taskInspectorOpen main {
    max-width: 100vw;
    margin-inline: 0;
    padding-inline: 0;
  }
  body.taskInspectorOpen #taskView {
    width: 100%;
    padding-right: calc(var(--task-inspector-width, 460px) + 1px);
  }
  body.taskInspectorOpen.taskInspectorCollapsed #taskView { padding-right: 47px; }
  #taskDialog.desktopTaskInspector {
    position: fixed;
    top: var(--task-inspector-top, 8px);
    right: var(--task-inspector-right, 0px);
    bottom: auto;
    left: auto;
    width: var(--task-inspector-width, 460px);
    height: var(--task-inspector-height, calc(100dvh - 16px));
    max-height: var(--task-inspector-height, calc(100dvh - 16px));
    margin: 0;
    overflow: visible;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    z-index: 90;
    box-shadow: 0 10px 30px rgb(12 16 22 / .22);
  }
  #taskDialog.desktopTaskInspector #taskForm {
    overflow: hidden;
    border-radius: inherit;
  }
  #taskDialog.desktopTaskInspector .taskInspectorCollapseButton { display: inline-grid; place-items: center; }
  #taskDialog.desktopTaskInspector.isCollapsed { width: 46px; min-width: 46px; }
  #taskDialog.desktopTaskInspector.isCollapsed .taskInspectorResizeHandle,
  #taskDialog.desktopTaskInspector.isCollapsed .taskDialogBody,
  #taskDialog.desktopTaskInspector.isCollapsed .taskDialogFooter,
  #taskDialog.desktopTaskInspector.isCollapsed .dialogHeading h2,
  #taskDialog.desktopTaskInspector.isCollapsed .dialogHeading [data-close] { display: none; }
  #taskDialog.desktopTaskInspector.isCollapsed #taskForm > .dialogHeading {
    justify-content: center;
    padding: 8px 5px;
    border-bottom: 0;
  }
  #taskDialog.desktopTaskInspector.isCollapsed .taskDialogHeadingActions { gap: 0; }
  #taskDialog.desktopTaskInspector .taskInspectorResizeHandle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -7px;
    z-index: 3;
    display: block;
    width: 14px;
    cursor: col-resize;
    touch-action: none;
  }
  #taskDialog.desktopTaskInspector .taskInspectorResizeHandle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    width: 3px;
    background: #8794a5;
    opacity: .72;
  }
  #taskDialog.desktopTaskInspector .taskInspectorResizeHandle:hover::after,
  #taskDialog.desktopTaskInspector .taskInspectorResizeHandle:focus-visible::after,
  body.taskInspectorResizing #taskDialog.desktopTaskInspector .taskInspectorResizeHandle::after {
    width: 4px;
    background: #1769d2;
    opacity: 1;
  }
  body.taskInspectorResizing,
  body.taskInspectorResizing * { cursor: col-resize !important; user-select: none !important; }
  #taskDialog.desktopTaskInspector .taskDialogFooter .dialogActions { flex-wrap: wrap; }
}
.iconButton { width: 34px; height: 34px; padding: 0; font-size: 24px; line-height: 1; }
.editorForm label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; }
.editorForm input, .editorForm select, .editorForm textarea { width: 100%; padding: 9px 10px; border: 1px solid #c8ccd2; border-radius: 6px; background: #fff; color: #17191d; }
.editorForm .managerCurrentToggle {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-self: start;
}
.editorForm .managerCurrentCheckbox {
  appearance: auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.editorForm .toolCategoryOption input[type="checkbox"],
.editorForm .toolSelectRow input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  flex: 0 0 20px;
}
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formMessage { min-height: 18px; margin: 0; color: #666c76; font-size: 13px; }
.diagnosticLogSection { display: grid; gap: 8px; margin-top: 4px; }
.diagnosticLogHeading { align-items: center; }
.diagnosticLogHeading h3 { margin: 0; font-size: 15px; }
.diagnosticLogActions { display: flex; gap: 8px; }
.diagnosticLogText { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; line-height: 1.4; resize: vertical; }
.inlineInput { display: flex; gap: 8px; }
.inlineInput select, .inlineInput input { min-width: 0; flex: 1; }
.toolRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .7fr) auto; gap: 10px; align-items: center; padding: 12px 3px; border-bottom: 1px solid #e3e5e8; }
.toolRequiredRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr) auto; gap: 10px; align-items: center; padding: 11px 3px; border-bottom: 1px solid #e3e5e8; }
.toolRequiredMain { min-width: 0; display: grid; gap: 4px; }
.toolUsageList { color: #6b717a; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.toolTypeHeading { margin: 18px 0 2px; padding-bottom: 6px; border-bottom: 1px solid #c8ccd2; font-size: 17px; }
.toolGroup > .toolTypeHeading { cursor: pointer; font-weight: 700; }
.toolSearchInput { width: 100%; margin: 4px 0 8px; padding: 9px 10px; border: 1px solid #c8ccd2; border-radius: 6px; background: #fff; color: #17191d; }
.toolCategoryFilter { width: 100%; margin: 3px 0 8px; padding: 9px 10px; border: 1px solid #c8ccd2; border-radius: 6px; background: #fff; color: #17191d; }
.toolCategoryControls { display: flex; flex-wrap: wrap; gap: 7px; padding: 7px 0; }
.toolCategoryControls button { padding: 5px 9px; font-size: 13px; }
.selectedToolSummary, .toolPicker { display: grid; gap: 7px; }
.selectedToolSummary h3, .toolPicker h3 { margin: 0; font-size: 15px; }
.selectedToolRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #e3e5e8; }
.selectedToolRow span { min-width: 0; color: #3d434c; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.selectedToolRow button { padding: 5px 8px; font-size: 12px; }
.toolSelectRow {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #e3e5e8;
}
.toolSelectRow input { width: 20px; height: 20px; min-height: 0; padding: 0; }
.toolSelectRow span { color: #6b717a; font-size: 12px; }
.toolSelectRow.isSelected strong { color: #1769d2; }
.toolSettingsList { display: grid; gap: 12px; padding-right: 2px; }
.toolSettingsGroup { border-top: 1px solid #e3e5e8; padding-top: 8px; }
.toolSettingsGroup summary { cursor: pointer; font-weight: 750; padding: 6px 0; }
.toolSettingsRow {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, .75fr) minmax(110px, .6fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid #eef0f3;
}
.toolSettingsRow input, .toolSettingsRow select { min-width: 0; }
.dialogActions { display: flex; justify-content: flex-end; gap: 8px; }
.exportFormatActions { flex-wrap: wrap; }
.exportFormatActions button { flex: 1 1 150px; }
.dialogSpacer { flex: 1; }
.choiceDialog { display: grid; gap: 18px; padding: 20px; }
.choiceDialog p { margin: 0; color: #666c76; }
.optionList { display: grid; gap: 8px; }
.optionRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d8dbe0;
  border-radius: 7px;
  background: #fbfcfe;
  font-weight: 700;
}
.optionRow input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: #1769d2;
}
.criteriaProfilesDialog {
  min-width: min(92vw, 520px);
}
.criteriaProfilesList {
  display: grid;
  gap: 8px;
  max-height: min(56vh, 420px);
  overflow: auto;
}
.criteriaProfileEntry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.criteriaProfileRow {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c8ccd2;
  border-radius: 8px;
  background: #fff;
  color: #17191d;
  text-align: left;
}
.criteriaProfileBadgeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 72px;
  padding: 8px;
  border: 1px solid #c8ccd2;
  border-radius: 8px;
  background: #f5f6f8;
  font-size: 12px;
  font-weight: 700;
}
.criteriaProfileBadgeToggle input { margin: 0; }
.criteriaProfileRow.isSelected {
  border-color: #1769d2;
  box-shadow: 0 0 0 2px rgb(23 105 210 / .2);
}
.criteriaProfileRow strong {
  font-size: 15px;
}
.criteriaProfileRow span {
  color: #596170;
  font-size: 12px;
  line-height: 1.35;
}
.existingMaterials { border-top: 1px solid #c8ccd2; padding-top: 12px; }
.existingMaterials h3 { margin: 0 0 8px; font-size: 16px; }
.existingMaterials > summary { cursor: pointer; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.existingMaterials.taskEditorSection { padding-top: 0; border: 1px solid #c8ccd2; }
.existingMaterials.taskEditorSection > summary { margin-bottom: 0; font-size: 15px; }
.materialFormSection { border-top: 1px solid #c8ccd2; padding-top: 8px; }
.materialFormSection > summary { cursor: pointer; font-size: 15px; font-weight: 750; padding: 4px 0; }
.materialFormSection[open] > summary { margin-bottom: 9px; }
.materialFormSection > label { display: grid; gap: 5px; margin-bottom: 9px; }
.existingMaterialRow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px 8px; padding: 8px 0; border-top: 1px solid #e3e5e8; }
.existingMaterialRow > span { grid-column: 1; }
.existingMaterialActions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.existingMaterialActions button { padding: 5px 9px; font-size: 13px; }
.existingMaterialRow:first-child { border-top: 0; }
.existingMaterialRow span { color: #6b717a; font-size: 13px; }
.dependencyList,
.dependencyPickerList,
.jobFlowGraph {
  display: grid;
  gap: 8px;
}
.dependencyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #e3e5e8;
}
.dependencyRow button {
  padding: 5px 8px;
  font-size: 13px;
}
.dependencyStageGroup,
.dependencyTaskGroup {
  display: grid;
  gap: 7px;
  padding: 7px 0 0;
  border-top: 1px solid #e3e5e8;
}
.dependencyStageGroup > summary,
.dependencyTaskGroup > summary {
  cursor: pointer;
  font-weight: 800;
}
.dependencyTaskGroup {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 2px solid #e3e5e8;
}
.dependencyTaskGroup > summary {
  color: #3d4652;
  font-size: 14px;
}
.dependencyTaskGroup .dependencyRow,
.dependencyTaskGroup .dependencyOption {
  margin-left: 8px;
}
.dependencyUnlockRow {
  justify-content: flex-start;
  color: #5f6670;
}
.dependencyOption {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px;
  border: 1px solid #d8dbe0;
  border-radius: 6px;
}
.dependencyOption input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #1769d2;
}
.jobFlowGraph {
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  padding: 10px 0 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  -webkit-overflow-scrolling: touch;
}
.jobFlowExpandedControls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 8px;
}
.jobFlowExpandedControls button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 750;
}
.jobFlowTaskGroup {
  margin: 0 0 9px;
  border: 1px solid #c8ccd2;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.jobFlowTaskSummary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 750;
}
.jobFlowTaskSummary span {
  color: #666c76;
  font-size: 12px;
  font-weight: 650;
}
.jobFlowTaskBody {
  border-top: 1px solid #d8dbe0;
  padding: 8px 10px;
  overflow-x: auto;
}
.jobFlowSimpleList {
  display: grid;
  gap: 6px;
}
.jobFlowSimpleTask {
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.jobFlowSvg {
  display: block;
  min-width: max-content;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jobFlowPath {
  fill: none;
  stroke: #7b8492;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jobFlowArrow {
  fill: #7b8492;
}
.jobFlowDeleteLink {
  cursor: pointer;
}
.jobFlowDeleteLink circle {
  fill: #fff;
  stroke: #b02a2a;
  stroke-width: 1.5;
}
.jobFlowDeleteLink text {
  fill: #b02a2a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 800;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.jobFlowDeleteLink:focus-visible circle,
.jobFlowDeleteLink:hover circle {
  fill: #fff0f0;
  stroke-width: 2.2;
}
.jobFlowSvgNode {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jobFlowSvg.isLayoutMode .jobFlowSvgNode {
  cursor: move;
}
.jobFlowSvgNode rect {
  fill: #fff;
  stroke: #b8c0cc;
  stroke-width: 1.4;
}
.jobFlowTaskNode rect {
  fill: #eef5ff;
  stroke: #4f8edc;
  stroke-width: 2;
}
.jobFlowTaskNode .jobFlowSvgTitle {
  font-weight: 850;
}
.jobFlowSvgNode:focus-visible rect,
.jobFlowSvgNode:hover rect {
  stroke-width: 2.2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.14));
}
.jobFlowSubtaskNode {
  touch-action: none;
}
.jobFlowSvgNode.isLinkDragging rect {
  opacity: .7;
  stroke-dasharray: 5 3;
}
.jobFlowSvgNode.isLinkTarget rect {
  stroke: #0d6efd;
  stroke-width: 3;
  filter: drop-shadow(0 3px 7px rgba(13,110,253,.28));
}
.jobFlowSvgNode.isLayoutDragging rect {
  opacity: .82;
  stroke: #1769d2;
  stroke-width: 3;
}
.jobFlowSvgTitle {
  fill: #151a22;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.jobFlowSvgMeta {
  fill: #66707c;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.jobFlowSvgContext {
  fill: #7a828d;
  font-size: 9px;
  font-weight: 650;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.jobFlowSvgNode.progressComplete rect { fill: #edf7f0; stroke: #198754; opacity: .82; }
.jobFlowSvgNode.progressReady rect { fill: #eef5ff; stroke: #1769d2; }
.jobFlowSvgNode.progressStarted rect { fill: #f4efff; stroke: #6f42c1; stroke-width: 2; }
.jobFlowSvgNode.progressWaiting rect { fill: #faf7ec; stroke: #b3953f; }
.jobFlowSvgNode.progressProblem rect { fill: #fff0f0; stroke: #b02a2a; stroke-width: 2.1; }
.jobFlowSvgNode.progressProblem .jobFlowSvgTitle,
.jobFlowSvgNode.progressProblem .jobFlowSvgMeta { fill: #8f1d1d; }
.materialLink { color: #1769d2; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.materialsList { display: grid; }
.materialLine { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 2fr) auto auto; gap: 6px 14px; align-items: center; padding: 13px 3px; border-bottom: 1px solid #e3e5e8; }
.materialPrimary { grid-column: 1 / -1; display: flex; min-width: 0; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.materialTitle { min-width: 0; justify-self: start; text-align: left; }
.materialPrimary .materialTitle { flex: 0 1 auto; }
.materialLine.isSelected { background: #edf5ff; }
.materialSelectCheckbox { width: 20px; height: 20px; margin: 0; accent-color: #2879df; }
.materialLine > span { color: #6b717a; font-size: 13px; }
.materialLocations { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.materialLocationLink { appearance: none; border: 0; background: transparent; color: #1769d2; padding: 0; font: inherit; font-size: 13px; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.materialLocationText,
.toolLocationText {
  color: #6b717a;
  font-size: 13px;
}
.materialLineActions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.materialDeleteButton { justify-self: end; }
.materialLineActions button { padding: 5px 9px; font-size: 13px; }
.materialProgressButton { font-weight: 700; }
.materialStatusIconButton {
  min-width: 40px;
  min-height: 36px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.materialStatusIconButton-ordered { border-color: #1769d2; background: #e8f1ff; }
.materialStatusIconButton-delivered { border-color: #198754; background: #e9f7ef; }
.materialStatusIconButton-complete { border-color: #198754; background: #e9f7ef; }
.materialStatusIconButton-order { border-color: #b26a00; background: #fff4dd; }
.materialsTotal { display: flex; justify-content: space-between; padding: 14px 3px; border-top: 2px solid #252a32; }
.materialStatus { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.materialCaptureView { position: relative; padding-bottom: 86px; }
.pasteMaterialsPanel { display: grid; gap: 10px; padding-top: 14px; }
.pasteMaterialsPanel textarea {
  width: 100%;
  min-height: 210px;
  padding: 10px;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
  color: #17191d;
  font: inherit;
  resize: vertical;
}
.floatingCaptureButton {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 5;
  padding: 13px 17px;
  border-radius: 999px;
  background: #1769d2;
  border-color: #1769d2;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 28px rgb(0 0 0 / .24);
}

@media (max-width: 700px) {
  .toolbar { display: block; padding: calc(24px + env(safe-area-inset-top)) 12px 6px; }
  .workerTimesheetView { padding: 12px; }
  .workerTimesheetTable { min-width: 620px; font-size: 12px; }
  h1 { margin-bottom: 1px; font-size: 17px; line-height: 1.12; }
  #fileStatus { font-size: 12px; line-height: 1.2; }
  .syncStatus { margin-left: 6px; }
  .statusBadge, .statusButton { font-size: 11px; padding: 2px 6px; }
  .networkPanel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(12px + env(safe-area-inset-top));
    width: auto;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    z-index: 1000;
  }
  body.workerMode .networkPanel {
    left: auto;
    right: 12px;
    width: max-content;
    max-width: calc(100vw - 24px);
    min-width: 0;
  }
  .actions { margin-top: 8px; gap: 6px; }
  .actions button, .actions .fileButton { padding: 7px 9px; }
  .actions button, .actions .fileButton { flex: 1; text-align: center; }
  main { padding: 6px 12px 12px; }
  .projectChooserBar { margin-bottom: 1px; }
  .projectChooserLine {
    grid-template-columns: minmax(0, auto) 34px minmax(72px, auto) minmax(72px, auto);
    gap: 5px;
  }
  body.workerMode .projectChooserLine {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  body.workerMode .workerAttendanceButton {
    min-width: 96px;
    min-height: 48px;
    padding: 1px 2px;
  }
  .projectChooserButton { grid-column: 1 / -1; }
  body.workerMode .projectChooserButton { grid-column: 1; }
  .adminCurrentDate { padding: 0 6px; font-size: 11px; }
  .projectChooserButton { grid-template-columns: 1fr; gap: 0; padding: 6px 8px; }
  .projectChooserButton span { display: none; }
  .projectChooserButton strong { font-size: 16px; white-space: normal; }
  .projectAddButton { width: 34px; min-width: 34px; font-size: 20px; }
  .inboxButton { min-width: 72px; padding: 6px 7px; font-size: 12px; }
  .pmskCaptureButton { min-width: 72px; padding: 6px 7px; font-size: 12px; }
  body.workerMode .projectSummaryButton,
  body.workerMode #connectionIndicator {
    height: 34px;
    min-height: 34px;
    padding: 6px 10px;
    line-height: 1.15;
  }
  .notificationTypeSettings { grid-template-columns: 1fr; }
  .inboxButton span { min-width: 19px; min-height: 19px; font-size: 11px; }
  .inboxCategorizeGrid { grid-template-columns: 1fr; }
  .projectInfo { padding: 1px 2px 2px; font-size: 12px; line-height: 1.2; }
  .projectSearchControls { gap: 5px; }
  .projectSearchControls .taskSearchBar { flex: 1 1 auto; }
  .projectInfoFields { grid-template-columns: 1fr; gap: 10px; }
  .criteriaPanel { margin-bottom: 5px; }
  .taskSearchOptionsRow { gap: 5px; padding: 2px 2px 5px; }
  .taskSearchBar { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .taskSearchBar span { display: none; }
  .taskSearchBar input { min-height: 34px; padding: 5px 8px; }
  .criteriaToggleButton { min-height: 34px; padding: 5px 8px; }
  .criteriaSummary { grid-template-columns: auto auto minmax(0, 1fr); gap: 6px; }
  .criteriaProfileSelect { max-width: 190px; min-height: 34px; padding: 5px 8px; }
  .criteriaSubtaskCount { font-size: 12px; }
  .criteriaDefinitionControls { grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 6px; }
  .criteriaDefinitionControls button { min-height: 34px; padding: 7px 6px; }
  .viewTabs { gap: 6px; padding-bottom: 0; margin-bottom: 7px; }
  .tabList { flex: 1 1 auto; padding: 0 2px; }
  .tabList button { flex: 0 0 auto; min-width: 70px; padding: 7px 9px 8px; }
  .tabList button.isSelected { padding-top: 8px; }
  .historyActions { flex: 0 0 auto; }
  .historyActions button { width: 32px; height: 32px; font-size: 17px; }
  .viewTabs .addTaskAction { flex: 0 0 34px; width: 34px; height: 34px; min-height: 34px; padding: 0; }
  .filters { grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 6px; }
  .criteriaActions { gap: 6px; padding-bottom: 6px; }
  .criteriaActions button { flex: 1 1 calc(50% - 6px); padding: 7px 6px; }
  #selectedTaskPanel,
  #selectedMaterialPanel {
    width: calc(100vw - 24px);
    gap: 6px;
    padding: 7px 8px;
  }
  #selectedTaskPanel {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #selectedTaskPanel strong {
    flex: 0 0 auto;
    margin-right: 0;
    white-space: nowrap;
    font-size: 12px;
  }
  #selectedTaskPanel > button { flex: 0 0 auto; min-height: 34px; padding: 6px 8px; }
  #selectedTaskPanel .iconActionButton { flex-basis: 34px; padding: 0; }
  #selectedTaskPanel .selectedTaskDeleteButton { margin-left: 0; }
  #selectedTaskPanel:not([hidden]) ~ .taskList { padding-bottom: 132px; }
  #selectedMaterialPanel:not([hidden]) ~ .materialsList { padding-bottom: 150px; }
  .filters .searchField { grid-column: 1 / -1; }
  .filters label:not(.toggle) { gap: 3px; font-size: 12px; }
  .filters input, .filters select { min-height: 34px; padding: 6px 8px; }
  .quickDateCriteria { min-height: 34px; }
  .quickDateCriteria button { padding: 6px; font-size: 12px; }
  .toggle { min-height: 34px; font-size: 12px; }
  .filters .completedGroupsToggle { grid-column: 1 / -1; }
  .summary { display: block; }
  .summary span { display: block; margin-top: 4px; }
  .captureBanner { align-items: flex-start; }
  .taskHeading { align-items: flex-start; }
  .taskToolCategorySummary { grid-template-columns: 1fr; padding-left: 10px; }
  .taskToolCategorySummary button { justify-self: start; }
  .toolRow, .toolRequiredRow { grid-template-columns: 1fr; }
  .toolSettingsRow { grid-template-columns: 1fr; }
  .managerRow.hasCurrentToggle { grid-template-columns: 32px 22px minmax(0, 1fr) auto auto; }
  .managerRow.hasCurrentToggle .managerRowActions { grid-column: 5; grid-row: 1; }
  .managerRow.hasCurrentToggle .projectAcronymBadge { grid-column: 3; grid-row: 2; justify-self: start; }
  .managerRow.hasCurrentToggle .managerCurrentToggle { grid-column: 4; grid-row: 2; justify-self: start; }
  .formGrid { grid-template-columns: 1fr; }
  .materialLine { grid-template-columns: auto minmax(0, 1fr) auto; }
  .materialTitle { grid-column: 2; grid-row: 1; }
  .materialLineTotal { grid-column: 2; }
  .materialDeleteButton { grid-column: 3; grid-row: 1; }
  .materialLine > span, .materialLocations { grid-column: 1 / -1; }
  #projectInfoDialog,
  #taskDialog,
  #taskOrderDialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .projectInfoPanel > .dialogHeading { padding: calc(32px + env(safe-area-inset-top)) 16px 10px; }
  .projectInfoDialogBody { padding: 14px 16px; }
  .projectInfoActions { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  #taskForm > .dialogHeading { padding: calc(32px + env(safe-area-inset-top)) 16px 10px; }
  #taskOrderForm > .dialogHeading { padding-top: calc(20px + env(safe-area-inset-top)); }
  #dependencyPickerForm {
    padding: 0 16px;
  }
  #dependencyPickerForm > .dialogHeading {
    margin: 0 -16px;
    padding: calc(32px + env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid #e3e5e8;
  }
  #dependencyPickerForm > .dialogActions {
    margin: 0 -16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .taskDialogBody { padding: 14px 16px; }
  .taskDialogFooter { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .taskDialogFooter .dialogActions { justify-content: stretch; }
  .taskDialogFooter .dialogActions button { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
  #taskToolCategoriesDialog,
  #toolSettingsDialog,
  #dependencyPickerDialog,
  #stageManagerDialog,
  #taskManagerDialog,
  #subtaskManagerDialog,
  #cloudUserAdminDialog,
  #inboxCategorizeDialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .inboxCategorizeForm {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
  }
  .inboxCategorizeForm > .dialogHeading {
    padding: calc(32px + env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid #e3e5e8;
  }
  .inboxCategorizeForm > .formMessage,
  .inboxCategorizeForm > .inboxBatchPanel {
    margin: 10px 16px 0;
  }
  .inboxCategorizeList {
    flex: 1 1 auto;
    padding: 10px 16px;
  }
  .inboxCategorizeForm > .dialogActions {
    flex: 0 0 auto;
    justify-content: stretch;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #e3e5e8;
    background: #fff;
  }
  .inboxCategorizeForm > .dialogActions button { flex: 1 1 auto; }
  .cloudUserAdminForm {
    width: 100%;
    height: 100dvh;
    max-height: none;
  }
  .userAdminView .cloudUserAdminForm {
    height: auto;
    min-height: 0;
    padding: 8px;
  }
  .userAdminView .cloudUserAdminForm > .dialogActions {
    margin: 0 -8px -8px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .cloudUserAdminGrid {
    grid-template-columns: 1fr;
  }
  .cloudUserOverview { padding-left: 12px; }
  .cloudUserSummary { padding: 8px; }
  .userTimesheetViewModeControl { display: inline-flex !important; }
  .monthlyTimesheetTableScroll { max-height: calc(100dvh - 230px); }
  .cloudUserAdminList {
    max-height: 28vh;
  }
  .cloudProjectAccessList {
    max-height: 22vh;
  }
  .cloudUserProjectList { max-height: 32vh; }
  .cloudUserProjectRow { grid-template-columns: 28px minmax(0, 1fr) 110px; }
  .cloudUserPermissionActions button { width: 100%; }
  .userAdminView #cloudUserEditor { overflow: visible; }
  #taskToolCategoriesForm > .dialogActions,
  #toolSettingsForm > .dialogActions,
  #dependencyPickerForm > .dialogActions {
    justify-content: stretch;
  }
  #taskToolCategoriesForm > .dialogActions button,
  #toolSettingsForm > .dialogActions button,
  #dependencyPickerForm > .dialogActions button {
    flex: 1 1 auto;
  }
}

@media (prefers-color-scheme: dark) {
  :root, body { background: #15171a; color: #f1f2f4; }
  .dataZoomButton { background: #292d33; border-color: #59616d; color: #8fc2ff; }
  body.dataZoomMode .dataZoomButton { background: #e7eaf0; border-color: #e7eaf0; color: #202329; }
  .toolbar { background: #202329; border-color: #3b4048; }
  .workspaceControls { background: #15171a; }
  .workspaceControlsPanel { border-color: #3b4048; }
  #fileStatus, .summary span, .meta, .emptyState, .projectInfo, .criteriaProfileSummary, .criteriaSubtaskCount { color: #aeb4bd; }
  .statusBadge { background: #353a42; color: #dce0e5; }
  .statusBadge.online { background: #174d32; color: #b7f0d0; }
  .statusBadge.offline { background: #572929; color: #ffd0d0; }
  .statusBadge.pending { background: #55451f; color: #ffe8a6; }
  .networkPanel { background: #202329; border-color: #4b515b; box-shadow: 0 14px 30px rgb(0 0 0 / .36); }
  .workerTimesheetHeading span, .workerTimesheetEmpty { color: #aeb5bf; }
  .workerTimesheetRateDisplay { color: #8fd1ff; }
  .workerTimesheetTable td { border-color: #626a75; }
  .workerTimesheetTable tfoot th,
  .workerTimesheetTable tfoot td { border-color: #c6ccd4; background: transparent; color: #f2f4f7; }
  .cloudUserAttendanceTable td { border-color: #626a75; }
  .adminRecordSelectionActions { background: #24333d; border-color: #4a6575; }
  .cloudUserAdminToolbar { background: #292d33; border-color: #4b515b; }
  .cloudflareSettingsPanel { background: #1d2025; border-color: #4b515b; }
  .cloudflareSettingsHelp, .cloudflareSettingRow strong, .cloudflareSettingRow small { color: #aeb5bf; }
  .cloudflareSettingRow { background: #252a31; border-color: #4b515b; }
  .invoicePanel { background: #1d2025; border-color: #4b515b; }
  .invoiceAddMenu { background: #292d33; border-color: #59616d; box-shadow: 0 12px 26px rgb(0 0 0 / .4); }
  .invoiceAddMenu button { color: #f1f2f4; }
  .invoiceAddMenu button:hover { background: #373c44; }
  .invoicePanel > p,
  .invoiceNumberDisplay span,
  .invoiceGeneratedRow span { color: #aeb5bf; }
  .invoiceNumberDisplay { border-color: #4b515b; }
  .invoiceGeneratedRow { background: #20313b; border-color: #4a6575; }
  .invoicePaymentHistorySection,
  .invoicePaymentHistoryItem,
  .invoicePaymentItemList,
  .invoicePaymentItemRow,
  .invoicePaymentForm > .dialogActions { border-color: #4b515b; }
  .invoicePaymentStickyHeader { background: #1d2025; box-shadow: 0 3px 10px rgb(0 0 0 / .28); }
  .invoicePaymentFilterDisclosure > summary { background: #292d33; border-color: #4b515b; color: #f1f2f4; }
  .invoicePaymentFields { background: #1d2025; border-color: #4b515b; }
  .invoicePaymentTimeRow { background: #193126; }
  .invoicePaymentReceiptRow { background: #352b17; }
  .invoicePaymentDisplayPaymentRow { background: #172d39; }
  .invoicePaymentDisplayPaymentRow .invoicePaymentUnallocatedBalance { color: #ff9388; }
  .invoicePaymentDisplayPaymentRow.isCurrentPaymentAllocation,
  .invoicePaymentDisplayPaymentRow.isAllocationPreview { background: #5a3a00; outline-color: #ffb52e; }
  .invoicePaymentDisplayInvoiceRow { background: #2b2538; }
  .invoicePaymentDisplayInvoiceRow .invoicePaymentItemStatus { color: #cfb7ff; }
  .invoicePaymentTimesheetTable tfoot td { border-color: #6b7786; background: #292d33; color: #f1f2f4; }
  .invoicePaymentTotals { background: #22262b; border-color: #4b515b; }
  .invoicePaymentAttachmentsSection { background: #1d2025; border-color: #4b515b; }
  .invoicePaymentAttachmentsSection > summary { background: #292d33; color: #f1f2f4; }
  .invoicePaymentItemIdentity small,
  .invoicePaymentItemValues small { color: #b7bdc5; }
  .invoicePaymentItemStatus { color: #d7dbe0; }
  .invoicePaymentTimesheetRow.isPartPaid .invoicePaymentItemStatus { color: #ffd166; }
  .invoicePaymentTimesheetRow.isPaid .invoicePaymentItemStatus { color: #7ee2a8; }
  .invoicePaymentItemRow.isPartPaid .invoicePaymentItemStatus { color: #ffd166; }
  .invoicePaymentItemRow.isPaid .invoicePaymentItemStatus { color: #7ee2a8; }
  .cloudUserSettingsOverview { background: #22262b; border-color: #4b515b; }
  .cloudUserSettingsText strong { color: #b7bdc5; }
  .cloudUserJobSection h4,
  .cloudUserJobButton small { color: #b7bdc5; }
  .attendanceWeekGroup,
  .attendanceProjectGroup { border-color: #4b515b; }
  .attendanceWeekGroup > summary { background: #292d33; }
  .attendanceProjectGroup > summary { background: #22262b; }
  .attendanceTimestampButton { color: #8fd1ff; }
  .attendanceReceivedTime { color: #aeb5bf; }
  .cloudUserDayRate input,
  .workerTimesheetRateField input { background: #292d33; border-color: #555c66; color: #f2f4f7; }
  .networkErrorDetail { color: #ffb8b8; }
  .loggedInUserPanel strong { color: #f1f2f4; }
  .loggedInUserPanel span { color: #aeb4bd; }
  .emptyState h2 { color: #f1f2f4; }
  button, .fileButton, .filters input, .filters select, .taskSearchBar input, .criteriaDefinitionControls select, .criteriaProfileSelect, .adminWorkingUserField select, .workerViewDateField input, .workerViewUserField select, dialog, .editorForm input, .editorForm select, .editorForm textarea { background: #292d33; border-color: #4b515b; color: #f1f2f4; }
  .adminWorkingUserField, .workerViewDateField, .workerViewUserField { color: #aeb4bd; }
  .projectSummaryButton { background: #292d33; border-color: #4b515b; color: #dce0e5; }
  .projectSummaryButton.isWarning { background: #572929; border-color: #8a4a4a; color: #ffd0d0; }
  .projectSummaryButton.isActive { background: #123f8c; border-color: #60a5fa; color: #eff6ff; }
  .projectSummaryButton.isProminent { background: #163b25; border-color: #37b26c; color: #c8f7d9; }
  .projectSummaryButton.isProminent.isActive { background: #168044; border-color: #6ee7a8; color: #fff; }
  body.clientMode .clientItemsSummaryButton.isProminent { background: #163b25; border-color: #37b26c; color: #c8f7d9; }
  body.clientMode .clientItemsSummaryButton.isProminent.isActive { background: #168044; border-color: #6ee7a8; color: #fff; }
  .quickDateCriteria button.isActive { background: #2879df; border-color: #66a5ff; color: #fff; }
  .projectSummaryButton.isWarning.isActive { background: #7c2d12; border-color: #fb923c; color: #ffedd5; }
  .projectPercentBadge { background: #353a42; border-color: #4b515b; color: #dce0e5; }
  .projectInfo .projectPercentBadge.is-red,
  .projectInfo .projectPercentBadge.is-problem { border-color: #ff8b8b; background: #b91c1c; color: #fff; }
  .projectInfo .projectPercentBadge.is-orange { border-color: #fbbf72; background: #c66a08; color: #fff4df; }
  .projectInfo .projectPercentBadge.is-yellow { border-color: #ffe66d; background: #b58a00; color: #fffbd1; }
  .projectInfo .projectPercentBadge.is-green { border-color: #6ee7a8; background: #168044; color: #fff; }
  .projectInfoPanel > .dialogHeading,
  .projectInfoStages,
  .projectInfoActions { border-color: #4b515b; }
  .projectInfoStagesHeading span { color: #aeb4bd; }
  .projectInfoActions { background: #292d33; }
  .inboxButton { background: #463913; border-color: #816b29; color: #ffe49b; }
  .pmskCaptureButton { background: #1c3048; border-color: #557fae; color: #dcecff; }
  .notificationBanner { background: #3d3024; color: #fff1dd; border-color: #b87333; }
  .workerSyncNotice { background: #3d3024; color: #fff1dd; border-color: #b87333; }
  .notificationBannerDismissButton { border-color: #78583d; }
  .notificationSettings { border-color: #5d6873; }
  .notificationItem.isUnread { background: #3b302d; }
  .notificationItem span, .notificationItem time { color: #c3cbd0; }
  .pushSettings { border-color: #5d6873; }
  .inboxButton span { background: #e4ba42; color: #1b1d21; }
  .inboxBatchPanel { background: #1b1e23; border-color: #4b515b; }
  .inboxCategorizeItem { background: #202329; border-color: #4b515b; }
  .inboxAppliedSummary { color: #aeb4bd; }
  .inboxSubtaskButton { color: #f1f2f4; }
  button.primary { background: #2879df; }
  .destructiveButton { border-color: #d45b5b; color: #ff9a9a; }
  .projectChooserButton { background: #18314f; border-color: #33577f; color: #dbeaff; }
  .adminCurrentDate { background: #292d33; border-color: #4b515b; color: #f1f2f4; }
  .projectAddButton { background: #18314f; border-color: #33577f; color: #dbeaff; }
  .projectChoice span { color: #aeb4bd; }
  .projectChoice.isSelected { border-color: #66a5ff; background: #18314f; color: #dbeaff; }
  .captureBanner { background: #18314f; border-color: #33577f; color: #dbeaff; }
  .captureBanner button { background: #292d33; }
  .viewTabs { border-color: #3b4048; }
  .tabList { background: transparent; }
  .tabList button { background: #292d33; border-color: #4b515b; color: #dce0e5; }
  .tabList button:hover { background: #343941; }
  .tabList button.isSelected { background: #15171a; border-color: #59616d; border-bottom-color: #15171a; color: #8fc2ff; box-shadow: inset 0 3px #4d9aff; }
  .summary, .stageHeading, .taskGroup, .taskRow, .criteriaPanel, .selectedTaskPanel { border-color: #3b4048; }
  #jobFlowView > .summary { background: #15171a; }
  .jobFlowLockToggle { background: #202329; border-color: #586272; color: #f1f2f4; }
  .stageHeading { background: #18314f; color: #dbeaff; border-color: #33577f; }
  .stageHeading.isFocusedStage { background: #214d7c; outline-color: #8fc2ff; }
  .stagePercentBadge, .taskPercentBadge { background: #24486f; border-color: #4474a8; color: #dbeaff; }
  .stageActions { background: #1b2027; border-color: #3b4048; }
  .taskGroup { background: #181b20; }
  .selectedTaskPanel { background: #1d2025; }
  .removeLinkIconButton .removeLinkMark { background: #1d2025; color: #ff8278; }
  .taskGroupHeading { background: #222832; color: #f2f5f8; border-left-color: #66a5ff; }
  .taskGroupHeading.isFocusedTask { background: #253e5c; outline-color: #8fc2ff; border-left-color: #8fc2ff; }
  .taskGroupMeta { color: #aab2bd; }
  .taskViewModeControl { border-color: #59616d; }
  .taskViewModeControl button { background: #292d33; color: #dce0e5; }
  .taskViewModeControl button + button { border-left-color: #59616d; }
  .taskViewModeControl button.isSelected { background: #1769d2; color: #fff; }
  .monthlyTimesheetHeading { background: #252b33; border-color: #4b515b; }
  .monthlyTimesheetTableScroll { background: #181b20; border-color: #4b515b; }
  .monthlyTimesheetTable tfoot th { background: #252b33; border-color: #4f9dcc; color: #f1f2f4; }
  .compactTaskTableScroll { border-color: #4b515b; background: #181b20; }
  .compactTaskTableEditToggle { border-color: #687383; background: #292d33; color: #f1f2f4; }
  .compactTaskTableEditToggle.isEditing { border-color: #76aeff; background: #1769d2; color: #fff; }
  .compactTaskTable { color: #f1f2f4; }
  .compactTaskTable th { background: #252b33; color: #f1f2f4; }
  .compactTaskTable th, .compactTaskTable td { border-color: #3b4048; }
  .compactTaskTable tbody tr:nth-child(even) { background: #1d2127; }
  .compactTaskTable tbody tr.isWorkerColourCoded { background: color-mix(in srgb, var(--worker-colour) 22%, #181b20); }
  .compactTaskTable tbody tr.isFocusedSubtask { background: #18314f; }
  .compactTaskTable .isFocusedGroupCell { background: #214d7c; box-shadow: inset 0 0 0 1px #8fc2ff; }
  .compactMobileTaskSecondary span { color: #aeb4bd; }
  .compactTaskProgress { background: #292d33; border-color: #59616d; color: #f1f2f4; }
  .compactTaskNotesCell { color: #aeb4bd; }
  .compactTaskColumnResize::after { background: #657181; }
  .compactTaskCellEditor:hover,
  .compactTaskCellEditor:focus { background: #292d33; border-color: #667384; color: #f1f2f4; }
  .compactTaskEmptyDate { border-color: #59616d; color: #aeb4bd; }
  .compactTaskEmptyDate:hover { border-color: #8fc2ff; color: #8fc2ff; background: #18314f; }
  .taskToolCategorySummary { color: #aeb4bd; }
  .toolCategoryChip { background: #18314f; color: #dbeaff; }
  .toolCategoryOption, .toolSelectRow { border-color: #3b4048; }
  .taskOrderRow { background: #181b20; border-color: #3b4048; color: #f1f2f4; }
  .taskOrderLabel span { color: #aeb4bd; }
  .managerRow { background: #181b20; border-color: #3b4048; color: #f1f2f4; }
  .managerRow.isSelected { background: #172b43; border-color: #66a5ff; }
  .projectAcronymBadge { background: #27313d; border-color: #596675; color: #dce5ef; }
  .managerRowText.isEditing { background: #1c3048; border-color: #66a5ff; }
  .cloudUserAdminRow, .cloudProjectAccessRow, .cloudUserProjectRow { background: #181b20; border-color: #3b4048; color: #f1f2f4; }
  .cloudUserNestedDetails, .cloudUserEditorDisclosure { border-color: #4b515b; }
  .cloudUserNestedDetails > summary, .cloudUserEditorDisclosure > summary { background: #292d33; color: #f1f2f4; }
  .cloudUserPermissionOverviewRow { border-color: #626a75; }
  .cloudUserPermissionOverviewRow span { color: #aeb4bd; }
  #taskForm > .dialogHeading, .taskDialogFooter, #taskToolCategoriesForm > .dialogActions, #toolSettingsForm > .dialogActions, #dependencyPickerForm > .dialogActions, #taskOrderForm > .dialogActions, .managerForm > .dialogActions, .cloudUserAdminForm > .dialogActions, .inboxCategorizeForm > .dialogHeading, .inboxCategorizeForm > .dialogActions { border-color: #3b4048; }
  .taskDialogFooter, #taskToolCategoriesForm > .dialogActions, #toolSettingsForm > .dialogActions, #dependencyPickerForm > .dialogActions, #taskOrderForm > .dialogActions, .managerForm > .dialogActions, .cloudUserAdminForm > .dialogActions, .inboxCategorizeForm > .dialogActions { background: #292d33; }
  .toolSearchInput, .toolCategoryFilter { background: #292d33; border-color: #4b515b; color: #f1f2f4; }
  .toolUsageList, .selectedToolRow span { color: #aeb4bd; }
  .toolRequiredRow, .selectedToolRow { border-color: #3b4048; }
  .toolSelectRow span { color: #aeb4bd; }
  .toolSelectRow.isSelected strong { color: #76aeff; }
  .toolSettingsGroup, .toolSettingsRow { border-color: #3b4048; }
  .taskRow { background: #15171a; border-left-color: #3a4655; }
  .taskRow.isFocusedSubtask,
  .taskRow.isNotificationTarget { background: #172b43; border-top-color: #66a5ff; border-left-color: #66a5ff; box-shadow: inset 0 0 0 1px rgb(102 165 255 / .3); }
  .taskName { color: #f1f2f4; }
  .workerProgressButton { background: #292d33; border-color: #4b515b; color: #f1f2f4; }
  .workerProgressButton.isActive { background: #1769d2; border-color: #76aeff; color: #fff; }
  .workerProgressButton.isProblem.isActive { background: #8f1d1d; border-color: #ff8b8b; color: #fff; }
  .workerNotesPreview { color: #aeb4bd; }
  .workerExistingNotes a { color: #8fc2ff; }
  .workerTaskAttachmentThumbnail { background: #15171a; border-color: #59616d; color: #f1f2f4; }
  .existingMaterials, .existingMaterialRow, .materialFormSection { border-color: #3b4048; }
  .taskEditorSection { border-color: #4b515b; background: #20242a; }
  .taskEditorSection > summary { border-color: #4b515b; background: #292f37; color: #f1f2f4; }
  .taskEditorAttachmentPreview button { border-color: #4b515b; background: #292d33; color: #f1f2f4; }
  .dependencyRow, .dependencyOption, .dependencyStageGroup, .dependencyTaskGroup { border-color: #3b4048; }
  .dependencyTaskGroup > summary { color: #d7dbe1; }
  .dependencyUnlockRow { color: #aeb4bd; }
  .jobFlowTaskGroup { background: #202329; border-color: #3b4048; }
  .jobFlowTaskSummary span { color: #aeb4bd; }
  .jobFlowTaskBody { border-color: #3b4048; }
  .jobFlowPath { stroke: #8994a4; }
  .jobFlowArrow { fill: #8994a4; }
  .jobFlowDeleteLink circle { fill: #292d33; stroke: #ff8a8a; }
  .jobFlowDeleteLink text { fill: #ffb3b3; }
  .jobFlowDeleteLink:focus-visible circle,
  .jobFlowDeleteLink:hover circle { fill: #3a2428; }
  .jobFlowSvgNode rect { fill: #202329; stroke: #586272; }
  .jobFlowSvgTitle { fill: #f1f2f4; }
  .jobFlowSvgMeta { fill: #aeb4bd; }
  .jobFlowSvgNode.progressComplete rect { fill: #173523; stroke: #37b26c; }
  .jobFlowSvgNode.progressReady rect { fill: #1c3048; stroke: #66a5ff; }
  .jobFlowSvgNode.progressStarted rect { fill: #312445; stroke: #b493ff; }
  .jobFlowSvgNode.progressWaiting rect { fill: #352e1d; stroke: #d7bb6a; }
  .jobFlowSvgNode.progressProblem rect { fill: #442224; stroke: #ff8b8b; }
  .jobFlowSvgNode.progressProblem .jobFlowSvgTitle,
  .jobFlowSvgNode.progressProblem .jobFlowSvgMeta { fill: #ffc1c1; }
  .materialLine, .materialsTotal { border-color: #3b4048; }
  .materialLine.isSelected { background: #172b43; }
  .materialStatusIconButton-ordered { border-color: #66a5ff; background: #1c3048; }
  .materialStatusIconButton-delivered, .materialStatusIconButton-complete { border-color: #37b26c; background: #173523; }
  .materialStatusIconButton-order { border-color: #d69638; background: #3f2d13; }
  .materialLine > span { color: #aeb4bd; }
  .existingMaterialRow span { color: #aeb4bd; }
  .materialLocationText,
  .toolLocationText { color: #aeb4bd; }
  .choiceDialog p { color: #aeb4bd; }
  .optionRow { background: #202329; border-color: #4b515b; color: #f1f2f4; }
  .criteriaProfileRow { background: #202329; border-color: #4b515b; color: #f1f2f4; }
  .criteriaProfileRow span { color: #aeb4bd; }
  .criteriaProfileBadgeToggle { background: #202329; border-color: #4b515b; color: #f1f2f4; }
  .materialLink { color: #76aeff; }
  .materialLocationLink { color: #76aeff; }
  .criteriaContext { color: #aeb4bd; }
  .pasteMaterialsPanel textarea { background: #292d33; border-color: #4b515b; color: #f1f2f4; }
  .progress { background: #353a42; color: #dce0e5; }
  .progress.compactMobileProgressIcon { border-color: #8f9aaa; color: #fff; }
  .taskRow.isDragging { background: #353a42; }
  .workerHome > div,
  .workerInboxButton,
  .workerTaskCard,
  .workerHelpSubtask {
    background: #202329;
    border-color: #4b515b;
  }
  .workerHelpSubtask { border-left-color: #66a5ff; }
  .workerHelpSubtask > span,
  .workerHelpSubtask small {
    color: #aeb4bd;
  }
  .workerHelpNotes p {
    background: #292d33;
    border-color: #4b515b;
  }
  .workerTaskPath,
  .workerStatusLine {
    color: #aeb4bd;
  }
  .workerInlineField select,
  .workerNoteField textarea,
  .workerInlineAssign select,
  .workerNotesBlock textarea {
    background: #292d33;
    border-color: #4b515b;
    color: #f1f2f4;
  }
  .taskRow.workerTaskRow {
    border-bottom-color: #3b4048;
  }
  .workerExistingNotes {
    background: #181b20;
    border-color: #3b4048;
    color: #f1f2f4;
  }
}

.lastEditedStar {
  display: inline-block;
  margin-left: 6px;
  color: #d69638;
  font-size: .9em;
  line-height: 1;
}

.lowStockText {
  color: #a64b00;
  font-weight: 700;
}

.scheduleView {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scheduleView[hidden] { display: none !important; }

.scheduleToolbar {
  position: sticky;
  top: var(--workspace-sticky-offset, 0);
  z-index: 24;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 0;
  background: #fff;
  border-bottom: 1px solid #d7dde1;
}

.scheduleDateNavigation,
.scheduleModeControl,
.scheduleWorkerFilter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scheduleDateNavigation strong { min-width: 180px; }
.scheduleWeekStartField { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #435466; }
.scheduleWeekStartField[hidden] { display: none; }
.scheduleWeekStartField input { width: auto; min-height: 34px; padding: 4px 6px; }
.scheduleModeControl button.isSelected { background: #1769d2; border-color: #1769d2; color: #fff; }
.scheduleModeIcon { display: none; }
.scheduleWorkerFilter span { font-size: 12px; font-weight: 700; color: #435466; }
.scheduleWorkerFilter select { width: auto; min-width: 130px; min-height: 34px; padding: 4px 28px 4px 8px; }
.scheduleWorkerLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  padding: 8px 0;
  font-size: 12px;
}

.scheduleWorkerLegend span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--worker-colour);
}

.scheduleWorkspace {
  display: grid;
  grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.scheduleWorkspace.hasNoUnscheduled { grid-template-columns: minmax(0, 1fr); }

.unscheduledTasksPanel {
  position: sticky;
  top: calc(var(--workspace-sticky-offset, 0px) + 50px);
  max-height: calc(100dvh - 210px);
  overflow: auto;
  border: 1px solid #cbd3d9;
  border-radius: 6px;
  background: #f7f9fa;
}
.unscheduledTasksPanel[hidden] { display: none !important; }

.unscheduledTasksPanel > summary {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 10px;
  background: #e9f0f5;
  font-weight: 700;
  cursor: pointer;
}

.unscheduledTasksPanel > summary span {
  display: inline-grid;
  min-width: 23px;
  min-height: 23px;
  place-items: center;
  margin-left: 5px;
  border-radius: 50%;
  background: #1769d2;
  color: #fff;
  font-size: 11px;
}

.unscheduledTaskList { padding: 4px 7px 9px; }
.scheduleStageGroup > summary { padding: 8px 3px 5px; font-weight: 750; color: #24465e; cursor: pointer; }
.scheduleTaskGroup { margin: 3px 0 6px 7px; border-left: 2px solid #9fb4c3; }
.scheduleTaskGroup > summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 2px 2px 2px 6px;
  background: #eef3f6;
  cursor: pointer;
  list-style: none;
}
.scheduleTaskGroup > summary::-webkit-details-marker { display: none; }
.scheduleTaskGroup > summary > strong { font-size: 14px; line-height: 1.2; }
.scheduleTaskGroup > summary > span { font-size: 11px; color: #65727d; }

.scheduleTaskRow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 4px;
  min-height: 39px;
  padding: 3px 2px 3px 7px;
  border-bottom: 1px solid #dbe1e5;
  border-left: 4px solid var(--worker-colour);
  background: #fff;
}

.scheduleTaskRow.isSelected { background: #e8f2ff; }
.scheduleTaskRow.isDragging, .scheduleTaskGroup.isDragging, .scheduleCalendarTaskGroup.isDragging { opacity: .5; }
.scheduleTaskName {
  min-width: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.scheduleTaskName strong, .scheduleTaskName span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheduleTaskName strong { font-size: 12px; font-weight: 650; line-height: 1.25; }
.scheduleTaskName span { margin-top: 2px; color: #64717d; font-size: 11px; }
.scheduleDragGrip { width: 30px; min-width: 30px; height: 30px; padding: 0; touch-action: none; cursor: grab; font-size: 18px; }
.scheduleDragGrip.isCompact { width: 24px; min-width: 24px; height: 24px; font-size: 15px; }
.scheduleDragGrip:active { cursor: grabbing; }

.scheduleCalendar { min-width: 0; min-height: 0; max-height: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.scheduleMonthGrid { display: grid; grid-template-columns: repeat(7, minmax(105px, 1fr)); min-width: 760px; border-top: 1px solid #ccd4d9; border-left: 1px solid #ccd4d9; }
.scheduleMonthGrid.isMonth { grid-template-rows: 28px; grid-auto-rows: 104px; }
.scheduleMonthGrid.isDay { grid-template-columns: minmax(280px, 1fr); min-width: 0; }
.scheduleWeekday { position: sticky; top: 0; z-index: 3; padding: 6px; background: #e9f0f5; border-right: 1px solid #ccd4d9; border-bottom: 1px solid #ccd4d9; text-align: center; font-size: 11px; font-weight: 750; }
.scheduleDateCell { position: relative; min-height: 116px; padding: 4px; border-right: 1px solid #ccd4d9; border-bottom: 1px solid #ccd4d9; background: #fff; }
.scheduleMonthGrid.isMonth .scheduleDateCell { min-height: 0; overflow: hidden; }
.scheduleMonthGrid.isWeek .scheduleDateCell { min-height: 380px; }
.scheduleMonthGrid.isDay .scheduleDateCell { min-height: 420px; }
body.dataZoomMode .scheduleWorkspace { align-items: stretch; }
body.dataZoomMode .scheduleCalendar { height: 100%; }
body.dataZoomMode .scheduleMonthGrid.isMonth {
  grid-auto-rows: minmax(150px, calc((100dvh - 112px) / 6));
}
body.dataZoomMode .scheduleMonthGrid.isWeek .scheduleDateCell,
body.dataZoomMode .scheduleMonthGrid.isDay .scheduleDateCell {
  min-height: calc(100dvh - 112px);
}
body.dataZoomMode .unscheduledTasksPanel { max-height: calc(100dvh - 82px); }
.scheduleDateCell.isOutside { background: #f4f5f6; color: #9099a0; }
.scheduleDateCell.isToday { box-shadow: inset 0 0 0 2px #1769d2; }
.scheduleDateCell.isDropTarget { background: #dceeff; box-shadow: inset 0 0 0 3px #1769d2; }
.scheduleDateHeading { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; min-height: 25px; padding: 2px 25px 2px 4px; border: 0; background: transparent; color: inherit; text-align: left; font-weight: 700; }
.scheduleDateHeading.canShiftWeek { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.scheduleDateHeading.isDraggingWeek { background: #dceeff; }
.scheduleDaySelect { position: absolute; z-index: 2; top: 7px; right: 6px; width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: #1769d2; }
.scheduleSelectedTaskBadge { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.scheduleSelectedTaskBadge:active { cursor: grabbing; }
.scheduleTodayIndicator { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 5px; border-radius: 999px; background: #1769d2; color: #fff; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.scheduleDayTaskIndicator { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 28px; padding: 2px; border: 0; background: transparent; color: #1769d2; font-size: 12px; font-weight: 800; }
.scheduleDayTaskIndicator::before { width: 9px; height: 9px; border-radius: 50%; background: currentColor; content: ""; }
.scheduleCalendarTaskGroup { margin: 3px 0; border-left: 5px solid var(--worker-colour); border-radius: 4px; background: #edf2f5; }
.scheduleCalendarTaskGroup > summary {
  display: grid;
  grid-template-columns: 10px 20px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 2px 3px 2px 6px;
  list-style: none;
  cursor: pointer;
}
.scheduleCalendarTaskGroup > summary::-webkit-details-marker { display: none; }
.scheduleCalendarTaskGroup > summary::before { content: "▸"; font-size: 9px; }
.scheduleCalendarTaskGroup[open] > summary::before { content: "▾"; }
.scheduleCalendarTaskGroup.isSelected > summary { background: #dcecff; }
.scheduleCalendarTaskGroup > summary > input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #1769d2; }
.scheduleCalendarTaskGroup > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.scheduleCalendarTaskGroup > summary span { min-width: 18px; color: #596975; text-align: center; font-size: 9px; font-weight: 700; }
.scheduleCalendarTaskGroup .scheduleTaskChip { margin: 2px 3px 3px; width: calc(100% - 6px); background: #fff; }
.scheduleCalendarTaskGroup .scheduleTaskChip strong { font-size: 10px; font-weight: 650; line-height: 1.2; }
.scheduleCalendarTaskRow {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 3px;
  margin: 2px 3px 3px;
  padding: 2px;
  border-radius: 4px;
  background: #fff;
}
.scheduleCalendarTaskRow > input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #1769d2; }
.scheduleCalendarTaskRow .scheduleTaskChip { width: 100%; margin: 0; }
.scheduleCalendarTaskRow.isSelected { background: #dcecff; box-shadow: inset 0 0 0 1px #78aef0; }
.scheduleCalendarTaskRow.isDragging { opacity: .5; }
.scheduleTaskChip { display: block; width: 100%; min-height: 0; margin: 3px 0; padding: 5px 6px; overflow: hidden; border: 0; border-left: 5px solid var(--worker-colour); border-radius: 4px; background: #edf2f5; color: #18232b; text-align: left; cursor: grab; }
.scheduleTaskChip strong, .scheduleTaskChip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheduleTaskChip span { margin-top: 2px; color: #596975; font-size: 10px; }
.scheduleTaskChip.isCompact { padding: 2px 3px; border-left-width: 3px; font-size: 9px; }
.scheduleTaskChip.isComplete { cursor: pointer; opacity: .62; }
.scheduleMoreCount { display: block; width: 100%; min-height: 18px; padding: 1px 3px; border: 0; background: transparent; color: #1769d2; text-align: left; font-size: 10px; font-weight: 700; }

.scheduleYearGrid { display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 12px; min-width: 850px; padding-bottom: 20px; }
.scheduleMobileMonthLabel { display: none; }
.scheduleMiniMonth h3 { margin: 0; padding: 6px; background: #e9f0f5; font-size: 13px; text-align: center; }
.scheduleMonthGrid.isMini { min-width: 0; grid-template-columns: repeat(7, minmax(32px, 1fr)); }
.scheduleMonthGrid.isMini .scheduleDateCell { min-height: 55px; padding: 1px; }
.scheduleMonthGrid.isMini .scheduleDateHeading { min-height: 18px; padding: 1px; font-size: 9px; }
.scheduleMonthGrid.isMini .scheduleWeekday { padding: 3px; font-size: 9px; }
.scheduleDragGhost { position: fixed; z-index: 10000; pointer-events: none; padding: 7px 10px; border-radius: 5px; background: #1769d2; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 5px 18px rgba(0,0,0,.25); }

@media (max-width: 700px) {
  .scheduleToolbar { gap: 6px; }
  .scheduleDateNavigation { width: auto; flex: 1 1 auto; }
  .scheduleDateNavigation strong { display: none; }
  .scheduleWeekStartField { flex: 0 0 145px; }
  .scheduleWeekStartField input { min-width: 0; width: 108px; font-size: 12px; }
  .scheduleModeControl { order: 0; }
  .scheduleModeControl button { width: 36px; min-width: 36px; height: 34px; padding: 0; }
  .scheduleModeIcon { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 24px; line-height: 1; }
  .scheduleModeText { display: none; }
  .scheduleWorkerFilter { order: 2; min-width: 0; }
  .scheduleWorkerFilter span { display: none; }
  .scheduleWorkerFilter select { min-width: 118px; max-width: 42vw; }
  .scheduleModeControl #scheduleYearButton { display: none; }
  .scheduleWorkspace { display: block; }
  .unscheduledTasksPanel { position: relative; top: auto; max-height: 34dvh; margin-bottom: 9px; }
  .scheduleWorkspace { overflow-y: auto; }
  .scheduleCalendar { width: 100%; max-height: none; }
  .scheduleView.isMobileMonthOverview .scheduleWorkerLegend,
  .scheduleView.isMobileMonthOverview .unscheduledTasksPanel { display: none; }
  .scheduleView.isMobileMonthOverview .scheduleWorkspace,
  .scheduleView.isMobileMonthOverview .scheduleCalendar { overflow: visible; }
  .scheduleMobileMonthLabel { display: block; margin: 0; padding: 3px 4px 5px; font-size: 14px; line-height: 1.2; text-align: center; }
  .scheduleMonthGrid.isMonth { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; grid-template-rows: 24px; grid-auto-rows: 48px; }
  .scheduleMonthGrid.isMonth .scheduleWeekday { padding: 4px 1px; font-size: 9px; }
  .scheduleMonthGrid.isMonth .scheduleDateCell { min-height: 48px; padding: 1px 2px; }
  .scheduleMonthGrid.isMonth .scheduleDateHeading { min-height: 20px; padding: 1px 19px 1px 2px; font-size: 10px; }
  .scheduleMonthGrid.isMonth .scheduleDaySelect { top: 3px; right: 2px; width: 15px; height: 15px; }
  .scheduleMonthGrid.isMonth .scheduleTodayIndicator { width: 7px; min-height: 7px; padding: 0; overflow: hidden; color: transparent; }
  .scheduleMonthGrid.isMonth .scheduleDayTaskIndicator { min-height: 26px; padding: 1px; font-size: 11px; }
  .scheduleMonthGrid.isMonth .scheduleDayTaskIndicator::before { width: 7px; height: 7px; }
  .scheduleMonthGrid.isWeek { grid-template-columns: repeat(7, minmax(135px, 1fr)); min-width: 945px; }
  .scheduleMonthGrid.isDay { min-width: 0; }
  .scheduleMonthGrid.isWeek .scheduleDateCell { min-height: 360px; }
}

@media (prefers-color-scheme: dark) {
  .lowStockText { color: #ffbe72; }
  .workerAttendanceButton { background: #173523; border-color: #37b26c; color: #c8f7d9; }
  .workerAttendanceButton.isOnSite { background: #3f2d13; border-color: #d69638; color: #ffe0a3; }
  .cloudUserAttendanceRow { border-color: #4b515b; }
  .cloudUserAttendanceEmpty { color: #aeb4bd; }
  .clientDashboard { color: #f1f2f4; }
  .clientReportHeader,
  .clientOverview,
  .clientCompletionMetric,
  .clientTrafficMetric,
  .clientProjectDetails,
  .clientTaskProgressList,
  .clientActionSection,
  .clientActionItem { border-color: #4b515b; }
  .clientReportHeader small,
  .clientCompletionMetric > span,
  .clientTrafficMetric > span,
  .clientProjectDetailsList dt,
  .clientTaskProgressRow > span:first-child,
  .clientActionItemButton span { color: #aeb4bd; }
  .clientStatusTable td,
  .clientProgressTable td,
  .clientProgressTable tbody th,
  .clientTaskProgressRow,
  .dashboardTimesheetMetrics,
  .dashboardTimesheetMetrics > div,
  .dashboardTimesheetTable th,
  .dashboardTimesheetTable td,
  .dashboardTaskCostTable th,
  .dashboardTaskCostTable td { border-color: #555c66; }
  .dashboardTaskCostAllocation > p { color: #aeb4bd; }
  .dashboardTaskCostTable tr.isUnallocated { background: #493a18; }
  .clientProgressTaskDetailRow > td { background: #202b32; }
  .clientStageExpandButton > span,
  .clientDashboardSummary > summary.clientDashboardHeading,
  .clientProjectDetails > summary,
  .clientReportSection > summary,
  .clientDisclosureHeading { color: #79b8d8; }
  .clientProblemsPanel > header,
  .clientProblemList article { border-color: #4b515b; }
  .clientProblemList article > span { color: #aeb4bd; }
  .clientProblemList article > strong { color: #79b8d8; }
  .clientStageTaskRow > span { color: #aeb4bd; }
  .adminMetricStageButton,
  .adminMetricTaskButton { color: #76aeff; }
  .clientActionItemButton { color: #f1f2f4; }
  .dashboardTimesheetMetrics span { color: #aeb4bd; }
  .dashboardTimesheetMetrics .isAmountPaid strong { color: #76aeff; }
  .dashboardTimesheetMetrics .isUnassignedPayment strong { color: #ffd166; }
  .dashboardCostOverview,
  .dashboardCostStage > summary,
  .dashboardCostTask > summary { background: #202b32; border-color: #555c66; }
  .dashboardCostStage,
  .dashboardCostTask,
  .dashboardCostSubtask { border-color: #555c66; }
  .dashboardCostSubtask:hover { background: #27343c; }
  .dashboardCostMetric small { color: #aeb4bd; }
  .workerTimesheetExpenseRow td { background: #202b32; }
  .scheduleToolbar { background: #181b20; border-color: #4b515b; }
  .scheduleWorkerFilter span { color: #c4cbd2; }
  .unscheduledTasksPanel { background: #202329; border-color: #4b515b; }
  .unscheduledTasksPanel > summary,
  .scheduleTaskGroup > summary,
  .scheduleWeekday,
  .scheduleMiniMonth h3 { background: #29323a; color: #f1f2f4; }
  .scheduleStageGroup > summary { color: #79b8d8; }
  .scheduleTaskGroup { border-color: #61717d; }
  .scheduleTaskRow { background: #202329; border-bottom-color: #3b4048; }
  .scheduleTaskRow.isSelected { background: #1c3048; }
  .scheduleCalendarTaskGroup.isSelected > summary,
  .scheduleCalendarTaskRow.isSelected { background: #1c3048; }
  .scheduleCalendarTaskRow { background: #202329; }
  .scheduleTaskName span { color: #aeb4bd; }
  .scheduleMonthGrid,
  .scheduleDateCell,
  .scheduleWeekday { border-color: #4b515b; }
  .scheduleDateCell { background: #202329; }
  .scheduleDateCell.isOutside { background: #181b20; color: #7f8790; }
  .scheduleDateCell.isDropTarget { background: #1c3048; }
  .scheduleTaskChip { background: #303840; color: #f1f2f4; }
  .scheduleCalendarTaskGroup { background: #303840; }
  .scheduleCalendarTaskGroup > summary span { color: #bac2ca; }
  .scheduleCalendarTaskGroup .scheduleTaskChip { background: #202329; }
  .scheduleTaskChip span, .scheduleMoreCount { color: #bac2ca; }
}

@media (max-width: 600px) {
  .cloudUserAttendanceRow { grid-template-columns: 1fr; gap: 3px; }
  .clientDashboard { margin-top: 2px; }
  .clientReportHeader { align-items: center; padding-top: 8px; }
  .clientReportHeader span { font-size: 20px; }
  .clientReportHeader > strong { font-size: 14px; }
  .clientReportHeader small { font-size: 11px; }
  .clientOverview { grid-template-columns: 1fr 1fr; min-height: 0; }
  .clientCompletionMetric,
  .clientTrafficMetric { min-height: 138px; padding: 13px 8px; }
  .clientTrafficMetric { border-right: 0; }
  .clientCompletionMetric > strong { font-size: 42px; }
  .clientTrafficLight { width: 52px; height: 52px; }
  .clientTrafficLightButton { width: 62px; height: 62px; }
  .clientProjectDetails { grid-column: 1 / -1; padding: 8px 10px 12px; border-top: 1px solid #d7dde1; }
  .clientProjectDetailsList { gap: 7px 12px; padding-top: 10px; }
  .clientReportSection { margin-top: 24px; }
  .clientActionSection > h2 { font-size: 15px; }
  .clientStatusTable { font-size: 12px; }
  .clientStatusTable th,
  .clientStatusTable td { padding: 7px 6px; }
  .clientProgressTaskDetailRow > td { position: relative; padding-left: 6px; padding-right: 6px; }
  .clientStageTaskList {
    position: sticky;
    left: 6px;
    width: calc(100vw - 60px);
    max-width: 430px;
  }
  .clientStageTaskRow { grid-template-columns: minmax(0, 1fr) 76px 40px; gap: 6px; padding: 7px 5px; }
  .clientStageTaskRow strong { overflow-wrap: anywhere; }
  .clientActionSection { margin-top: 8px; }
  .dashboardTimesheetMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboardTimesheetMetrics.isCostComparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboardTimesheetMetrics > div:nth-child(even) { border-right: 0; }
  .dashboardTimesheetMetrics > div:not(:nth-last-child(-n+2)) { border-bottom: 1px solid #d8dde1; }
  .dashboardTimesheetMetrics.isCostComparison > div { min-width: 0; padding: 9px 8px; }
  .dashboardTimesheetMetrics.isCostComparison span,
  .dashboardTimesheetMetrics.isCostComparison strong { min-width: 0; overflow-wrap: anywhere; }
  .dashboardTimesheetMetrics.isCostComparison strong { font-size: 16px; }
  .dashboardTimesheetSection > summary { line-height: 1.35; overflow-wrap: anywhere; }
  .dashboardCostOverview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboardCostStage > summary,
  .dashboardCostTask > summary { grid-template-columns: minmax(0, 1fr) minmax(72px, auto); }
  .dashboardCostStage > summary .dashboardCostMetric:nth-of-type(-n+2),
  .dashboardCostTask > summary .dashboardCostMetric:nth-of-type(-n+2) { display: none; }
  .dashboardCostTask { margin-left: 8px; }
  .dashboardCostSubtask {
    width: calc(100% - 16px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 16px;
  }
  .dashboardCostSubtask > strong { grid-column: 1 / -1; }
  .dashboardCostMetric { text-align: left; }
}
/* Receipt attachments */
.receiptAttachments {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid var(--border, #c8cdd2);
  border-bottom: 1px solid var(--border, #c8cdd2);
}

.receiptAttachmentHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.buttonLike.receiptAttachmentAddButton {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border, #aab2bb);
  border-radius: 6px;
  background: var(--button-bg, #f2f4f6);
  color: var(--text, #17202a);
  font-weight: 600;
  cursor: pointer;
}

.receiptAttachmentHelp,
.receiptAttachmentStatus {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted, #59636e);
}

.attachmentPasteTarget {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border: 1px dashed #8b96a5;
  border-radius: 6px;
  background: #f7f8fa;
  color: #46505c;
  font-size: 0.86rem;
  font-weight: 650;
  text-align: center;
  cursor: text;
}

.attachmentPasteTarget:focus {
  outline: 2px solid #1769d2;
  outline-offset: 2px;
  border-color: #1769d2;
}

.attachmentPasteTarget.isReceiving {
  border-style: solid;
  border-color: #23814c;
  background: #e4f5ea;
  color: #126436;
}

.receiptAttachmentList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.receiptAttachmentCard {
  display: grid;
  grid-template-rows: 104px auto auto;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border, #c8cdd2);
  border-radius: 6px;
  background: var(--panel, #fff);
}

.receiptAttachmentPreview {
  display: grid;
  place-items: center;
  width: 100%;
  height: 104px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: var(--soft-bg, #eef1f4);
  color: inherit;
  cursor: pointer;
}

.receiptAttachmentPreview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.receiptAttachmentPDF {
  width: 100%;
  height: 100%;
}

.receiptAttachmentName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

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

.receiptAttachmentActions button {
  min-height: 32px;
  padding: 4px 8px;
}

.receiptAttachmentCard.isFailed .receiptAttachmentStatus { color: #b42318; }
.receiptAttachmentCard.isUploaded .receiptAttachmentStatus { color: #18734b; }
.receiptAttachmentCard progress { width: 100%; height: 8px; }
.receiptAttachmentIndicator { margin-left: 6px; white-space: nowrap; font-size: 0.9rem; }

.taskAttachmentLauncher {
  justify-self: start;
  min-height: 38px;
  font-weight: 650;
}

.workerTaskAttachmentLauncher {
  width: 100%;
  margin-top: 8px;
}

.taskAttachmentDialog {
  width: min(760px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  padding: 0;
}

.taskAttachmentEditor {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 20px);
  padding: 14px;
  overflow: hidden;
}

.taskAttachmentEditor > .receiptAttachmentList {
  overflow: auto;
  min-height: 100px;
  padding-bottom: 8px;
}

.taskAttachmentDialogActions {
  position: sticky;
  bottom: 0;
  margin: 0 -14px -14px;
  padding: 10px 14px;
  background: var(--panel, #fff);
  border-top: 1px solid var(--border, #c8cdd2);
}

@media (max-width: 520px) {
  .receiptAttachmentList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiptAttachmentCard { grid-template-rows: 88px auto auto; }
  .receiptAttachmentPreview { height: 88px; }
}

@media (prefers-color-scheme: dark) {
  .receiptAttachments { border-color: #4b515b; }
  .buttonLike.receiptAttachmentAddButton {
    background: #292d33;
    border-color: #59616d;
    color: #f1f2f4;
  }
  .receiptAttachmentHelp,
  .receiptAttachmentStatus { color: #b7bdc5; }
  .attachmentPasteTarget {
    background: #202329;
    border-color: #66717e;
    color: #d7dbe0;
  }
  .attachmentPasteTarget:focus { border-color: #76aeff; outline-color: #76aeff; }
  .attachmentPasteTarget.isReceiving {
    background: #173523;
    border-color: #37b26c;
    color: #c8f7d9;
  }
  .receiptAttachmentCard {
    background: #202329;
    border-color: #4b515b;
    color: #f1f2f4;
  }
  .receiptAttachmentPreview { background: #15171a; color: #f1f2f4; }
  .receiptAttachmentCard.isFailed .receiptAttachmentStatus { color: #ff9a9a; }
  .receiptAttachmentCard.isUploaded .receiptAttachmentStatus { color: #7ee2a8; }
  .taskAttachmentDialogActions { background: #292d33; border-color: #4b515b; }
}