.cost-toolbar, .cost-section-head, .cost-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cost-toolbar { padding: 16px 0; border-bottom: 1px solid #d9e1e7; }
.cost-toolbar.hidden { display: none; }
.cost-filter { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.cost-filter label, .cost-fields label { display: flex; flex-direction: column; gap: 6px; color: #43535b; font-size: 12px; font-weight: 600; min-width: 0; }
.cost-filter select { width: 230px; max-width: 100%; }
.cost-filter input, .cost-filter select, .cost-fields input, .cost-fields select, .cost-fields textarea { box-sizing: border-box; border: 1px solid #ccd6dc; background: #fff; color: #202d33; border-radius: 5px; font: inherit; font-size: 14px; padding: 8px 10px; min-height: 36px; min-width: 0; max-width: 100%; }
.cost-filter button, .cost-dialog button, #costView button, .cost-teaser button { border-radius: 5px; }
.cost-tabs { display: flex; gap: 20px; border-bottom: 1px solid #d9e1e7; margin-bottom: 16px; overflow-x: auto; }
.cost-tabs button { background: transparent; color: #566771; border: 0; border-bottom: 3px solid transparent; border-radius: 0 !important; padding: 14px 0 10px; white-space: nowrap; }
.cost-tabs button[aria-selected="true"] { border-bottom-color: #138caa; color: #153a49; }
.cost-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; background: white; border-block: 1px solid #d9e1e7; }
.cost-metric { padding: 16px; min-width: 0; border-right: 1px solid #e2e8ec; }
.cost-metric:last-child { border-right: 0; }
.cost-metric span { display: block; font-size: 12px; color: #55656f; min-height: 32px; }
.cost-metric strong { display: block; font-size: 23px; font-weight: 700; color: #26333b; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cost-own strong { color: #167452; }
.cost-expense strong, .cost-negative { color: #b34e32; }
.cost-result-lines { max-width: 900px; margin: 18px 0 8px; }
.cost-result-lines > div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid #dfe6ea; font-size: 14px; }
.cost-result-lines strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-result-lines .cost-result { font-weight: 700; padding-block: 14px; border-bottom: 2px solid #8599a3; }
.cost-basis { font-size: 12px; line-height: 1.6; color: #576873; max-width: 900px; }
.cost-warning { background: #fff3d8; border-left: 3px solid #b77c16; padding: 10px 14px; font-size: 13px; color: #785315; }
.cost-section { padding-block: 16px; border-top: 1px solid #d9e1e7; margin-top: 18px; }
.cost-section h2, .cost-section-head h2 { font-size: 17px; margin: 0 0 12px; }
.cost-category-list { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.cost-category-list > div { display: flex; align-items: center; gap: 20px; padding: 8px 0; font-size: 14px; }
.cost-category-list span { color: #55656f; }
.cost-table-wrap { width: 100%; overflow-x: auto; }
.cost-table { width: 100%; min-width: 650px; border-collapse: collapse; table-layout: auto; font-size: 13px; background: white; }
.cost-table th { text-align: left; font-size: 11px; color: #52646d; background: #f4f7f8; padding: 10px; }
.cost-table td { padding: 10px; border-bottom: 1px solid #dfe6ea; height: auto; vertical-align: middle; font-size: 13px; color: #26333b; font-variant-numeric: tabular-nums; }
.cost-table th, .cost-table td { word-break: normal; overflow-wrap: anywhere; }
.cost-table small { display: block; color: #6b7880; font-size: 11px; padding-top: 4px; }
.employee-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 14px; }
.employee-toolbar label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #43535b; font-weight: 600; }
.employee-toolbar input:not([type="checkbox"]), .employee-table select { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 14px; border: 1px solid #ccd6dc; border-radius: 5px; background: white; color: #26333b; }
.employee-table select { width: 220px; }
.employee-toolbar .employee-archive-toggle { flex-direction: row; align-items: center; min-height: 36px; }
.employee-archive-toggle input { width: 16px; height: 16px; margin: 0; }
#employeeCount { color: #6b7880; font-size: 13px; font-weight: 400; }
#employeeStatus { font-size: 13px; color: #43535b; min-height: 18px; }
.resource-rate-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e1e7eb; font-size: 13px; }
#resourceRateHistory { margin-top: 16px; }
#resourceRateHistory h3 { font-size: 14px; margin: 0 0 8px; }
.employee-team-board { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.employee-team-column { min-width: 0; border-top: 3px solid #8a989e; background: #f3f6f7; padding: 0 8px 12px; }
.employee-team-column.team-tone-1 { border-color: #1997ac; }
.employee-team-column.team-tone-2 { border-color: #40885f; }
.employee-team-column.team-tone-3 { border-color: #b88225; }
.employee-team-column header button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 12px 4px; background: transparent; color: #26333b; border: 0; font-size: 14px; }
.employee-team-column header span { font-size: 12px; color: #667780; white-space: nowrap; }
.team-people { display: grid; align-content: start; gap: 8px; min-height: 120px; }
.team-person { padding: 10px; border: 1px solid #d3dfe3; border-radius: 6px; background: white; min-width: 0; }
.team-person[draggable="true"] { cursor: grab; }
.team-person-main { display: flex; align-items: center; gap: 7px; min-width: 0; }
.team-person-main > div { min-width: 0; flex: 1; }
.team-person strong { display: block; overflow-wrap: anywhere; font-size: 13px; }
.team-person small { display: block; color: #62747d; margin-top: 5px; font-size: 11px; }
.team-person button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; flex-shrink: 0; background: #f1f5f6; border: 0; }
.team-person .team-person-grip { cursor: grab; touch-action: none; background: transparent; }
.team-person-actions { display: flex; gap: 4px; justify-content: flex-end; margin-top: 7px; }
.team-person-draft { border-color: #b88225; }
.team-person .team-draft-label { color: #906416; }
.team-person-selected { outline: 2px solid #158e9d; }
.team-drop-active { outline: 2px dashed #158e9d; background: #e6f4f3; }
.team-empty { color: #75848b; font-size: 12px; padding: 16px 4px; }
@media (max-width: 1100px) { .employee-team-board { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .employee-team-board { grid-template-columns: minmax(0,1fr); } .team-person button { width: 36px; height: 36px; } }
.cost-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cost-actions .mini { font-size: 11px; padding: 6px 8px; text-decoration: none; white-space: nowrap; }
.cost-dialog { width: min(740px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; border: 1px solid #ccd6dc; border-radius: 8px; padding: 24px; color: #26333b; }
.cost-dialog::backdrop { background: #192d3b66; }
.resource-dialog { width: min(560px, calc(100vw - 32px)); }
.cost-dialog .cost-section-head { margin-bottom: 18px; }
.cost-dialog [data-close-cost] { width: 32px; height: 32px; padding: 0; background: #edf2f5; color: #455761; font-size: 20px; }
.cost-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.cost-fields input, .cost-fields select, .cost-fields textarea { width: 100%; }
.cost-fields input[type="file"] { font-size: 12px; position: static; inline-size: 100%; block-size: auto; opacity: 1; }
.cost-fields .cost-span { grid-column: 1 / -1; }
.cost-fields .hidden, [data-cost-panel].hidden, .cost-teaser.hidden { display: none; }
.cost-dialog-footer { margin-top: 22px; }
.cost-dialog-footer output { font-size: 16px; font-weight: 700; }
#costFormStatus, #resourceFormStatus, #costStatus { font-size: 13px; color: #b34e32; }
.cost-teaser { padding: 20px 0; margin-top: 20px; border-top: 1px solid #d9e1e7; }
.payroll-dialog { width: min(850px, calc(100vw - 32px)); }
.payroll-person { display: grid; grid-template-columns: minmax(0,1fr) 150px 130px; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #dfe6ea; font-size: 13px; }
.payroll-person small { display: block; color: #576873; margin-top: 6px; }
.payroll-person label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.payroll-person input { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #ccd6dc; border-radius: 5px; padding: 8px; font: inherit; background: white; }
.payroll-person output { text-align: right; font-weight: 700; }
#payrollTotal { display: block; text-align: right; font-size: 15px; font-weight: 700; padding-top: 14px; }
.payroll-dialog h3, #invoiceSuggestions h3 { font-size: 14px; margin: 0 0 12px; }
.allocation-input { display: grid; grid-template-columns: minmax(140px,1fr) 125px 125px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e2e8ec; font-size: 13px; }
.allocation-input input, .payroll-note textarea { min-width: 0; width: 100%; box-sizing: border-box; border: 1px solid #ccd6dc; border-radius: 5px; padding: 8px; font: inherit; background: white; }
.allocation-input input { text-align: right; }
.payroll-note { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
#payrollPreview { margin-top: 16px; }
#teamFormStatus, #payrollFormStatus { font-size: 13px; color: #b34e32; }
#invoiceSuggestions { padding: 12px; border: 1px solid #ccd6dc; border-radius: 5px; background: #f4f8fa; }
.cost-fields .invoice-choice { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; align-items: start; padding: 8px 0; }
.cost-fields .invoice-choice input { width: 16px; height: 16px; min-height: 0; margin: 1px 0 0; }
.invoice-choice strong { font-size: 12px; }
.invoice-choice small { display: block; padding-top: 4px; color: #65727a; font-weight: 400; overflow-wrap: anywhere; }
.nu-session #costTeaser, .nu-session #costView { display: none !important; }
.invoice-dialog { width: min(560px, calc(100vw - 32px)); }
#invoiceForm > label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
#invoiceForm > label select { width: 100%; box-sizing: border-box; border: 1px solid #ccd6dc; border-radius: 5px; padding: 10px; font: inherit; background: white; color: #26333b; }
#invoiceForm .invoice-upload { border: 1px dashed #8da9b6; border-radius: 6px; padding: 18px; background: #f5f9fa; }
#invoiceForm input[type="file"] { position: static; width: 100%; height: auto; opacity: 1; font-size: 13px; min-width: 0; }
#invoiceFileName { font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.invoice-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 16px 0; border-block: 1px solid #d9e1e7; margin-bottom: 16px; }
.invoice-summary span { display: block; font-size: 12px; color: #566771; margin-bottom: 6px; }
.invoice-summary strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
#invoiceDetails { margin-top: 16px; }
#invoiceDetails summary { color: #167c91; font-size: 13px; cursor: pointer; padding: 8px 0; }
#invoiceDetails .cost-fields { padding-top: 12px; }
#invoiceReadStatus { font-size: 13px; color: #566771; line-height: 1.5; }
#invoiceFormStatus { font-size: 13px; color: #b34e32; }
#invoiceForm .hidden { display: none; }
.invoice-batch-dialog { width: min(760px, calc(100vw - 32px)); }
.invoice-batch-project, .invoice-item-project { display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin-bottom: 14px; }
.invoice-batch-project select, .invoice-item-project select { box-sizing: border-box; width: 100%; border: 1px solid #ccd6dc; border-radius: 5px; background: white; color: #26333b; padding: 9px; font: inherit; min-width: 0; }
.invoice-drop-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; border: 2px dashed #a6bac3; border-radius: 6px; padding: 26px 16px; background: #f5f9fa; cursor: pointer; }
.invoice-drop-zone.drag-over { border-color: #148b9e; background: #e7f6f7; }
.invoice-drop-zone strong { font-size: 16px; }
#invoiceBatchFiles { position: static; opacity: 1; width: 100%; max-width: 320px; height: auto; font-size: 13px; }
.invoice-batch-list { display: grid; gap: 12px; margin-top: 18px; }
.invoice-batch-item { min-width: 0; padding: 14px; border: 1px solid #d9e1e7; border-radius: 6px; background: white; }
.invoice-batch-item header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice-batch-item header strong { font-size: 13px; overflow-wrap: anywhere; }
.invoice-batch-item .invoice-remove { flex-shrink: 0; width: 30px; height: 30px; padding: 0; background: #eef3f5; color: #52646d; font-size: 20px; }
.invoice-item-summary { font-size: 13px; font-weight: 600; padding-top: 6px; font-variant-numeric: tabular-nums; }
.invoice-item-status, #invoiceBatchStatus { color: #63747c; font-size: 12px; margin: 8px 0 12px; }
.invoice-batch-item details summary { color: #167c91; font-size: 12px; cursor: pointer; padding-top: 10px; }
.invoice-batch-item details .cost-fields { padding-top: 12px; }
.invoice-batch-item.invoice-duplicate { border-color: #d99a93; background: #fff4f2; }
.invoice-duplicate .invoice-item-status { color: #ab3e2f; }
.invoice-batch-item.invoice-saved { border-color: #a2cbb7; background: #f3faf6; }
.invoice-saved .invoice-item-status { color: #227451; }
@media (max-width: 1000px) { .cost-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .cost-metric { border-bottom: 1px solid #e2e8ec; } }
@media (max-width: 600px) {
  .payroll-person { grid-template-columns: minmax(0,1fr) 100px; gap: 8px; }
  .payroll-person output { grid-column: 1 / -1; }
  .allocation-input { grid-template-columns: minmax(0,1fr) 100px; gap: 8px; }
  .allocation-input > span:last-child { grid-column: 2; font-size: 11px; }
  .cost-filter { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .cost-filter label:first-child { grid-column: 1 / -1; }
  .cost-filter select, .cost-filter input { width: 100%; }
  .cost-metric { padding: 12px 8px; }
  .cost-metric strong { font-size: 19px; }
  .cost-fields { grid-template-columns: minmax(0,1fr); }
  .cost-dialog { padding: 16px; }
  .cost-tabs { gap: 16px; }
  .cost-tabs button { font-size: 12px; }
  .cost-result-lines > div { font-size: 12px; gap: 12px; }
}