/* Candidate20: Project Portfolio and project form, matching the task pilot. */
#tab-projects,
#projectDialog {
  --project-ink: #17334c;
  --project-muted: #58697a;
  --project-line: #dde5eb;
  --project-surface: #f5f8fa;
  --project-accent: #ba302a;
  --project-focus: #376785;
  color: var(--project-ink);
}
#tab-projects .project-register-panel {
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid var(--project-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fcfdfe);
  box-shadow: 0 5px 20px rgb(23 51 76 / 4%);
}
#tab-projects .toolbar { align-items: flex-start; gap: 20px; }
#tab-projects h2,
#projectDialog h2 {
  margin: 0;
  color: var(--project-ink);
  font-family: inherit;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
}
#tab-projects .eyebrow,
#projectDialog .eyebrow {
  margin-bottom: 7px;
  color: var(--project-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
#tab-projects .project-intro,
#projectFormIntroduction {
  margin: 8px 0 0;
  max-width: 650px;
  color: var(--project-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
#tab-projects .toolbar-actions { gap: 8px; justify-content: flex-end; }
#tab-projects .button,
#projectDialog .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-projects .button:hover,
#projectDialog .button:hover { transform: none; }
#tab-projects .button.primary,
#projectDialog .button.primary { background: var(--project-accent); color: #fff; }
#tab-projects .button.primary:hover:not(:disabled),
#projectDialog .button.primary:hover:not(:disabled) { background: #a12723; }
#tab-projects .button.neutral,
#projectDialog .button.neutral { border: 1px solid #cdd8e1; background: #fff; color: var(--project-ink); }
#tab-projects .button.neutral:hover:not(:disabled),
#projectDialog .button.neutral:hover:not(:disabled) { background: #f2f6f9; }
#tab-projects .project-portfolio-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin: 22px 0 12px;
  padding: 16px;
  border: 1px solid var(--project-line);
  border-radius: 10px;
  background: var(--project-surface);
}
#tab-projects .project-search-field { grid-column: span 2; }
#tab-projects .project-portfolio-filters label,
#projectForm .form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #354f65;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
#tab-projects .project-portfolio-filters input,
#tab-projects .project-portfolio-filters select,
#projectForm input:not([type="hidden"]),
#projectForm select,
#projectForm 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(--project-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: none;
}
#tab-projects input::placeholder,
#projectForm textarea::placeholder { color: #687b8c; opacity: 1; }
#tab-projects :is(input, select):focus,
#projectForm :is(input, select, textarea):focus {
  border-color: var(--project-focus);
  outline: 3px solid rgb(55 103 133 / 16%);
  outline-offset: 1px;
}
#tab-projects :is(button, .table-wrap):focus-visible,
#projectDialog :is(button, summary):focus-visible { outline: 3px solid var(--project-focus); outline-offset: 3px; }
#projectForm :is(input, select):disabled,
#projectForm input[readonly] { background: #f1f5f8; color: #5d7081; }
#tab-projects #clearProjectFilters { min-height: 42px; justify-self: start; }
#projectFilterCount { margin: 12px 0; color: var(--project-muted); font-size: 12px; line-height: 1.5; }
#tab-projects .project-table-guide {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 9px;
  color: var(--project-muted);
  font-size: 11px;
  line-height: 1.5;
}
#tab-projects .table-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--project-line); border-radius: 9px; overscroll-behavior: contain; }
#tab-projects table { width: 100%; min-width: 1390px; }
#tab-projects 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;
}
#projectTable td { padding: 13px 14px; border-bottom: 1px solid #e8edf2; color: #334b60; font-size: 12px; line-height: 1.55; vertical-align: top; }
#projectTable tr:nth-child(odd) { background: #fff; }
#projectTable tr:nth-child(even) { background: #f8fafc; }
#projectTable tr:hover { background: #eef4f8; }
#projectTable tr:last-child td { border-bottom: 0; }
#projectTable td:first-child { min-width: 130px; color: var(--project-ink); font-weight: 650; }
#projectTable td:nth-child(2),
#projectTable td:nth-child(3) { min-width: 145px; max-width: 210px; }
#projectTable td:nth-child(4) { min-width: 210px; max-width: 290px; }
#tab-projects th:nth-child(n+7):nth-child(-n+11),
#projectTable td:nth-child(n+7):nth-child(-n+11) { text-align: right; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
#projectTable .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; }
#projectTable .status:is(.paid, .approved, .ready) { background: #edf6f1; border-color: #d6e9df; color: #286344; }
#projectTable .status:is(.pending, .partially) { background: #fff7e6; border-color: #eedfbf; color: #805513; }
#projectTable .status:is(.rejected, .not-paid) { background: #fff0ee; border-color: #efdad6; color: #98382d; }
#projectTable .row-actions { gap: 6px; flex-wrap: wrap; }
#projectTable .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; }
#projectTable .row-actions button:hover { background: #edf3f7; border-color: #b9cbd8; }
#tab-projects .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 0; color: var(--project-muted); font-size: 12px; }
#tab-projects .pagination > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#tab-projects .pagination strong { font-size: 12px; font-weight: 600; }
#tab-projects .empty-state { margin: 0; padding: 25px 12px; color: var(--project-muted); font-size: 13px; }
.project-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

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