/* Candidate19: presentation-only pilot for Task Register and the task form. */
#tab-tasks,
#taskDialog {
  --task-ink: #17334c;
  --task-muted: #58697a;
  --task-line: #dde5eb;
  --task-surface: #f5f8fa;
  --task-accent: #ba302a;
  --task-focus: #376785;
  color: var(--task-ink);
}

#tab-tasks .task-register-panel {
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid var(--task-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fcfdfe 100%);
  box-shadow: 0 5px 20px rgb(23 51 76 / 4%);
}
#tab-tasks .toolbar { align-items: flex-start; gap: 20px; }
#tab-tasks h2,
#taskDialog h2 {
  margin: 0;
  color: var(--task-ink);
  font-family: inherit;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
}
#tab-tasks .eyebrow,
#taskDialog .eyebrow {
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--task-accent);
}
#tab-tasks .task-intro,
#taskFormIntroduction {
  margin: 8px 0 0;
  color: var(--task-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
#tab-tasks .toolbar-actions { gap: 8px; justify-content: flex-end; }
#tab-tasks .button,
#taskDialog .button {
  min-height: 40px;
  padding: 10px 15px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  box-shadow: none;
  transition: background-color .15s, border-color .15s;
}
#tab-tasks .button:hover,
#taskDialog .button:hover { transform: none; }
#tab-tasks .button.primary,
#taskDialog .button.primary { background: var(--task-accent); color: #fff; }
#tab-tasks .button.primary:hover:not(:disabled),
#taskDialog .button.primary:hover:not(:disabled) { background: #a12723; }
#tab-tasks .button.neutral,
#taskDialog .button.neutral {
  border: 1px solid #cdd8e1;
  background: #fff;
  color: var(--task-ink);
}
#tab-tasks .button.neutral:hover:not(:disabled),
#taskDialog .button.neutral:hover:not(:disabled) { background: #f2f6f9; }
#tab-tasks .task-register-filters {
  display: grid;
  grid-template-columns: minmax(230px, 1.7fr) repeat(3, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 22px 0 0;
  padding: 16px;
  border: 1px solid var(--task-line);
  border-radius: 10px;
  background: var(--task-surface);
}
#tab-tasks .task-register-filters label,
#taskForm .form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #354f65;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
#tab-tasks .task-register-filters input,
#tab-tasks .task-register-filters select,
#taskForm input:not([type="hidden"]),
#taskForm select,
#taskForm textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #cbd6df;
  border-radius: 7px;
  background: #fff;
  color: var(--task-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: none;
}
#tab-tasks input::placeholder,
#taskForm input::placeholder,
#taskForm textarea::placeholder { color: #687b8c; opacity: 1; }
#tab-tasks :is(input, select):focus,
#taskForm :is(input, select, textarea):focus {
  border-color: var(--task-focus);
  outline: 3px solid rgb(55 103 133 / 16%);
  outline-offset: 1px;
}
#tab-tasks :is(button, .table-wrap):focus-visible,
#taskDialog :is(button, summary):focus-visible {
  outline: 3px solid var(--task-focus);
  outline-offset: 3px;
}
#taskForm :is(input, select):disabled,
#taskForm input[readonly] { background: #f1f5f8; color: #5d7081; }
#tab-tasks .task-table-guide {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0 9px;
  color: var(--task-muted);
  font-size: 11px;
  line-height: 1.5;
}
#tab-tasks .table-wrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--task-line);
  border-radius: 9px;
  overscroll-behavior: contain;
}
#tab-tasks table { width: 100%; min-width: 1360px; }
#tab-tasks thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 14px;
  border-bottom: 1px solid #cdd9e2;
  background: #eaf0f5;
  color: #294960;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
#taskTable td {
  padding: 13px 14px;
  border-bottom: 1px solid #e8edf2;
  color: #334b60;
  font-size: 12px;
  line-height: 1.55;
  vertical-align: top;
}
#taskTable tr:nth-child(odd) { background: #fff; }
#taskTable tr:nth-child(even) { background: #f8fafc; }
#taskTable tr:hover { background: #eef4f8; }
#taskTable tr:last-child td { border-bottom: 0; }
#taskTable td:first-child { color: var(--task-ink); font-weight: 650; white-space: nowrap; }
#taskTable td:nth-child(4) { min-width: 160px; max-width: 230px; }
#taskTable td:nth-child(5),
#taskTable td:nth-child(6) { min-width: 145px; max-width: 220px; }
#tab-tasks th:nth-child(n+9):nth-child(-n+11),
#taskTable td:nth-child(n+9):nth-child(-n+11) {
  text-align: right;
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
#taskTable .status {
  padding: 5px 9px;
  border: 1px solid #dce4eb;
  border-radius: 20px;
  background: #eef2f6;
  color: #455b70;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
}
#taskTable .status:is(.paid, .approved, .ready) { background: #edf6f1; border-color: #d6e9df; color: #286344; }
#taskTable .status:is(.pending, .partially) { background: #fff7e6; border-color: #eedfbf; color: #805513; }
#taskTable .status:is(.rejected, .not-paid) { background: #fff0ee; border-color: #efdad6; color: #98382d; }
#taskTable .row-actions { gap: 6px; flex-wrap: wrap; }
#taskTable .row-actions button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid #d3dde5;
  border-radius: 6px;
  background: #fff;
  color: #31516b;
  font-size: 11px;
  font-weight: 600;
}
#taskTable .row-actions button:hover { background: #edf3f7; border-color: #b9cbd8; }
#tab-tasks .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 0;
  color: var(--task-muted);
  font-size: 12px;
}
#tab-tasks .pagination > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#tab-tasks .pagination strong { font-size: 12px; font-weight: 600; }
#tab-tasks .empty-state { margin: 0; padding: 25px 12px; color: var(--task-muted); font-size: 13px; }
.task-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#taskDialog {
  width: min(980px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #d5dfe7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 80px rgb(18 39 59 / 22%);
}
#taskDialog::backdrop { background: rgb(18 39 59 / 40%); backdrop-filter: blur(2px); }
#taskForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(92dvh, 960px);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#taskForm .dialog-head {
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 23px 26px 19px;
  border-bottom: 1px solid var(--task-line);
  background: linear-gradient(115deg, #fff, #f6f9fb);
}
#taskForm .icon-button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #dce4eb;
  border-radius: 8px;
  background: #fff;
  color: #536b7e;
  line-height: 1;
}
#taskForm .task-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 26px;
  scrollbar-gutter: stable;
}
#taskForm .task-form-section {
  min-inline-size: 0;
  margin: 0 0 22px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--task-line);
}
#taskForm legend {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: var(--task-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}
#taskForm .task-section-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #eaf0f5;
  color: #3c5c75;
  font-size: 10px;
  font-weight: 700;
}
#taskForm .task-section-note {
  margin: 0 0 16px;
  color: var(--task-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}
#taskForm .form-grid { gap: 16px; }
#taskForm .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#taskForm .form-grid .span-3 { grid-column: 1 / -1; }
#taskForm .task-fee-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#taskForm textarea { min-height: 78px; resize: vertical; }
#taskForm input[type="number"] { font-variant-numeric: tabular-nums; }
#taskForm .task-notes {
  padding: 14px 16px;
  border: 1px solid var(--task-line);
  border-radius: 9px;
  background: #f8fafc;
}
#taskForm .task-notes summary {
  color: #354f65;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#taskForm .task-notes summary span { margin-left: 7px; color: var(--task-muted); font-size: 11px; font-weight: 400; }
#taskForm .task-notes .form-grid { margin-top: 16px; }
#taskForm .task-form-footer {
  flex: 0 0 auto;
  padding: 14px 26px 18px;
  border-top: 1px solid var(--task-line);
  background: #fff;
  box-shadow: 0 -6px 18px rgb(23 51 76 / 3%);
}
#taskForm .form-error { min-height: 0; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
#taskForm .form-error:not(:empty) { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #edceca; border-radius: 7px; background: #fff4f2; color: #98382d; }
#taskForm .dialog-actions { margin: 0; padding: 0; border: 0; gap: 9px; }
#taskForm .task-save-note { margin-right: auto; color: var(--task-muted); font-size: 11px; }

@media (max-width: 1100px) {
  #tab-tasks .toolbar { flex-direction: column; align-items: stretch; }
  #tab-tasks .toolbar-actions { justify-content: flex-start; }
  #tab-tasks .task-register-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #taskForm .form-grid.three,
  #taskForm .task-fee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tab-tasks .table-wrap { max-height: 58dvh; }
}
@media (max-width: 520px) {
  #tab-tasks .task-register-filters { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  #tab-tasks .toolbar-actions { width: 100%; }
  #tab-tasks .toolbar-actions .button { flex: 1 1 auto; }
  #tab-tasks .pagination { align-items: flex-start; }
  #tab-tasks .task-table-guide { font-size: 10px; }
  #taskDialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
  #taskForm { max-height: calc(100dvh - 18px); }
  #taskForm .dialog-head { padding: 17px 16px 15px; }
  #taskForm .task-form-body { padding: 18px 16px; }
  #taskForm .task-form-footer { padding: 12px 16px 15px; }
  #taskForm .form-grid.three,
  #taskForm .task-fee-grid { grid-template-columns: minmax(0, 1fr); }
  #taskForm .task-save-note { display: none; }
  #taskForm .dialog-actions .button { flex: 1; min-height: 44px; }
  #taskFormIntroduction { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #tab-tasks .button,
  #taskDialog .button { transition: none; }
}
@media print {
  #tab-tasks .table-wrap { max-height: none; overflow: visible; }
  #tab-tasks .task-table-guide,
  #tab-tasks .pagination { display: none; }
}