/* The desktop home composition needs roughly 1,420px. Reflow it before its fixed
   columns begin to compete for space at intermediate desktop widths. */
@media (max-width: 1440px) {
  .workspace-home-body { grid-template-columns: 224px 24px minmax(0,1fr); }
  .workspace-home-main { grid-column: 3; }
  .workspace-home-aside { grid-column: 1 / -1; position: static; }
}

@media (max-width: 1200px) {
  .header-search,
  .header-search-divider { display: none; }
  .content-grid,
  .content-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid.two { grid-template-columns: 1fr; }
  .docs-card-grid,
  .docs-draft-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1350px) {
  .people-quick-tools-period-label { display: none; }
  .people-quick-tools-period { padding-left: 8px; }
}

@media (max-width: 820px) {
  .company-setup { align-items: flex-start; padding: 0; }
  .company-setup-card { border: 0; border-radius: 0; grid-template-columns: 1fr; min-height: 100dvh; width: 100%; }
  .company-setup-progress { padding: 18px 24px; }.company-setup-logo { margin-bottom: 18px; }.company-setup-progress ol { grid-template-columns: repeat(4, 1fr); gap: 6px; }.company-setup-progress li span { display: none; }.company-setup-progress li b { height: 25px; width: 25px; }.company-setup-form { min-height: calc(100dvh - 164px); padding: 32px 24px 24px; }.setup-fields,.setup-module-grid { grid-template-columns: 1fr; }
  .operation-header { padding: 0 var(--page-gutter); }
  .operation-header-row { flex-wrap: wrap; height: auto; padding: 10px 0; }
  .operation-header-actions { margin-left: 0; overflow: auto; width: 100%; }
  .people-quick-tools { margin: 8px 0 10px; min-height: 50px; padding-inline: 8px; }
  .docs-quick-tools { overflow-x: auto; }
  .workspace-home-body,
  .operation-frame { grid-template-columns: 1fr; padding: 14px var(--page-gutter); }
  .operation-frame.is-people-directory { grid-template-columns: 1fr; }
  .operation-frame.is-people-directory .operation-content { padding-left: 0; }
  .people-action-rail { border-bottom: 1px solid var(--border); border-right: 0; overflow-x: auto; width: 100%; }
  .people-action-rail nav { flex-direction: row; justify-content: flex-start; min-width: max-content; position: static; }
  .people-action-rail-divider { height: 30px; margin: 0 3px; width: 1px; }
  .workspace-modules,
  .workspace-home-main,
  .workspace-home-aside,
  .operation-sidebar,
  .workspace-home-aside { grid-column: 1 / -1; position: static; }
  .workspace-home-main { order: -1; }
  .workspace-shortcut-grid,
  .content-grid,
  .content-grid.four { grid-template-columns: 1fr; }
  .page-header { grid-template-columns: 1fr; }
  .page-header-actions { justify-content: flex-start; }
  .people-page-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .people-directory-shell { padding: var(--page-gutter); }
  .people-directory-topline { align-items: flex-start; grid-template-columns: 1fr; }
  .people-directory-topline .people-tabs,
  .people-directory-topline .people-directory-actions { grid-column: 1; }
  .people-directory-topline .people-directory-actions { justify-self: stretch; }
  .people-directory-actions { width: 100%; }
  .people-directory-actions .ui-button { flex: 1; justify-content: center; }
  .people-directory-results-header { align-items: stretch; flex-direction: column; gap: 8px; }
  .people-directory-search-tools { align-items: stretch; flex-direction: column; }
  .people-directory-search { width: 100%; }
  .people-directory-pagination { align-items: flex-start; flex-direction: column; gap: 10px; }
  .operation-frame.is-people-docs { padding: 12px var(--page-gutter) 26px; }
  .operation-frame.is-people-docs { grid-template-columns: 1fr; }
  .operation-frame.is-people-attendance { gap: 14px; grid-template-columns: 1fr; padding: 12px var(--page-gutter) 26px; }
  .attendance-action-rail nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .attendance-action-rail .people-action-rail-divider { height: 28px; width: 1px; }
  .operation-frame.is-people-attendance .operation-content { padding-left: 0; }
  .document-action-rail { border-radius: var(--radius-panel); }
  .document-action-rail nav { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; min-height: auto; }
  .document-action-rail a { min-height: 42px; padding: 0 8px; writing-mode: horizontal-tb; transform: none; }
  .document-action-rail a + a { border-left: 1px solid var(--border); border-top: 0; }
  .employment-document-layout { grid-template-columns: 1fr; }
  .document-library { grid-template-columns: 1fr; }
  .document-library-sidebar { border-bottom: 1px solid #d7e1e6; border-right: 0; }
  .document-library-content { padding: 22px var(--page-gutter); }
  .document-library-heading { flex-direction: column; }
  .document-agents-heading { flex-direction: column; }
  .document-library-heading h1 { font-size: 27px; }
  .document-library-heading > div:last-child { flex-wrap: wrap; }
  .document-library-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .migration-source-grid,.migration-summary-cards,.migration-import-mode { grid-template-columns: 1fr; }
  .migration-heading { flex-direction: column; }
  .migration-steps { gap:8px; }
  .migration-steps li { flex-wrap:wrap; font-size:12px; }
  .migration-panel { padding:18px; }
  .migration-panel-actions { flex-wrap:wrap; }
  .migration-panel-actions > span { flex-basis:100%; }
  .agent-lab :is(.agent-lab-main,.agent-editor,.agent-sources,.agent-lab-run-grid) { min-width:0; }
  .agent-lab :is(input,select,textarea) { max-width:100%; min-width:0; }
  .agent-lab :is(header,footer) { flex-wrap:wrap; }
  .migration-mapping-list { grid-template-columns: 1fr; }
  .migration-mapping-list > span:nth-child(odd) { border-right: 0; }
  .migration-mapping-list > span:nth-last-child(-n+2) { border-bottom: 1px solid #e3eaed; }
  .migration-mapping-list > span:last-child { border-bottom: 0; }
  .migration-modal { padding: 10px; }
  .migration-modal-tools { align-items: stretch; flex-direction: column; }
  .migration-status-filter { overflow-x: auto; }
  .migration-modal-tools input { width: 100%; }
  .control-center-heading,.control-onboarding-form footer { align-items: flex-start; flex-direction: column; }
  .control-onboarding,.control-dashboard { grid-template-columns: 1fr; }
  .control-progress { border-bottom: 1px solid #dce6e8; border-right: 0; }
  .control-progress ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-form-grid,.control-overview { grid-template-columns: 1fr; }
  .control-invite-form { grid-template-columns: 1fr; }
  .control-access-guide { grid-template-columns: 1fr; }
  .control-access-guide article { border-left: 0; border-top: 1px solid #dfe8eb; padding: 12px 0 0; }
  .document-library-table > header { align-items: flex-start; flex-wrap: wrap; }
  .document-paper { max-width: calc(100% - 24px); padding: 32px 24px 26px; }
  .document-preview-toolbar { align-items: flex-start; flex-direction: column; }
  .document-preview-toolbar > div { flex-wrap: wrap; }
  .docs-workspace { min-height: auto; padding: 16px; }
  .docs-workspace-heading { align-items: flex-start; flex-direction: column; }
  .docs-card-grid,
  .docs-draft-grid,
  .docs-control-summary { grid-template-columns: 1fr; }
  .employee-profile-workspace { grid-template-columns: 1fr; }.employee-profile-sidebar { border-bottom: 1px solid var(--border); border-right: 0; }.employee-profile-sidebar-section { padding: 12px; }.employee-profile-sidebar footer { display: none; }.employee-profile-tabs { display: flex; overflow-x: auto; }.employee-profile-tabs a { border-bottom: 3px solid transparent; border-left: 0; flex: 0 0 auto; }.employee-profile-tabs a.is-active { border-bottom-color: var(--primary); border-left-color: transparent; }.employee-profile-main { padding: 18px; }
  .employee-profile-grid { grid-template-columns: 1fr; }
  .employee-profile-card--wide { grid-column: auto; }
  .employee-profile-facts,.employee-profile-summary { grid-template-columns: 1fr; }
  .employee-profile-hero { align-items: flex-start; flex-wrap: wrap; }
  .employee-profile-status { margin-left: 0; }
  .portal-hero { align-items: flex-start; flex-wrap: wrap; }.portal-hero .employee-profile-status { margin-left: 0; }.portal-summary-metrics,.portal-shortcuts,.portal-facts { grid-template-columns: 1fr; }
  .docs-controlled-table > header { align-items: stretch; flex-wrap: wrap; }
  .docs-controlled-table > header > span { margin-left: 0; }
}

@media (max-width: 760px) {
  .payroll-heading { align-items: stretch; flex-direction: column; gap: 16px; }
  .payroll-runs-layout { grid-template-columns: minmax(0, 1fr); }
  .payroll-runs-layout > *, .payroll-run-form label { min-width: 0; }
  .payroll-run-form input, .payroll-run-form select { width: 100%; min-width: 0; max-width: 100%; }
  .payroll-run-form header p, .payroll-run-form small { overflow-wrap: anywhere; }
  .payroll-input-novelty { min-width: 0; }
}

.payroll-runs-layout > *, .payroll-run-form label { min-width: 0; }
.payroll-run-form input, .payroll-run-form select, .payroll-run-form textarea { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.payroll-input-novelty { border: 0; border-top: 1px solid var(--border); display: grid; gap: 10px; margin: 0; padding: 16px 0; min-width: 0; }
.payroll-run-form .payroll-input-checkbox { display: flex; align-items: center; }
.payroll-run-form .payroll-input-checkbox input { width: auto; }
[data-payroll-preparation] { display: grid; gap: 20px; min-width: 0; }
.payroll-export-dialog { width: min(660px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
.payroll-export-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.payroll-export-dialog header h2 { font-size: 20px; }
.payroll-export-dialog article { border-top: 1px solid var(--border); padding: 16px 0; }
.payroll-export-dialog p { overflow-wrap: anywhere; }
[data-payroll-parameters] { display: grid; gap: 20px; min-width: 0; }
[data-payroll-parameters] pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-payroll-parameters] article { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.payroll-run-form textarea { font: inherit; min-width: 0; max-width: 100%; width: 100%; }
.header-process-month { position: relative; font-size: 12px; }
.header-process-month summary { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.header-process-month > div { position:absolute; right:0; top:calc(100% + 12px); width:320px; max-width:calc(100vw - 32px); box-sizing:border-box; padding:16px; background:var(--surface, #fff); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px rgb(12 27 35 / 12%); z-index:70; display:grid; gap:14px; max-height:calc(100dvh - 88px); overflow:auto; }
.header-process-month > div > strong { display:block; padding-bottom:12px; border-bottom:1px solid var(--border); color:var(--text); font-size:13px; font-weight:600; line-height:1.5; }
.header-process-month label { display:grid; gap:7px; font-size:12px; font-weight:500; color:var(--text-muted); min-width:0; }
.header-process-month input,.header-process-month select { box-sizing:border-box; width:100%; min-width:0; height:38px; padding:0 10px; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; }
.header-process-month input:focus-visible,.header-process-month select:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.header-process-month form { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0; }
.header-process-month .ui-button { box-sizing:border-box; width:100%; min-height:38px; height:auto; white-space:normal; justify-content:center; gap:8px; padding:9px 12px; font-size:13px; line-height:1.4; }
.header-process-month .ui-button svg { flex-shrink:0; }
.header-process-month small { display:block; font-size:11px; line-height:1.6; color:var(--text-muted); overflow-wrap:anywhere; }
.header-process-month [data-header-month-message]:empty { display:none; }
.header-process-month [data-header-month-message]:not(:empty) { padding:9px 10px; background:var(--surface-subtle); border-left:3px solid var(--primary); }
.header-process-month > div > a { display:flex; align-items:center; min-height:32px; border-top:1px solid var(--border); padding-top:10px; color:var(--text-muted); font-size:12px; text-decoration:none; }
.header-process-month > div > a:hover { color:var(--primary-hover); text-decoration:underline; }
[data-monthly-estimate] table { border-collapse: collapse; min-width: 780px; width: 100%; }
[data-trial-history] table { border-collapse: collapse; min-width: 1100px; width: 100%; }
.payroll-workspace, .payroll-history { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.payroll-workspace > *, .payroll-history > * { min-width: 0; }
[data-trial-history] { min-width: 0; }
[data-trial-history] select { max-width: 100%; }
[data-trial-history] .ui-button { max-width: 100%; min-width: 0; white-space: normal; }
[data-trial-history] .payroll-run-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media(max-width: 760px) {
  [data-trial-history] > header { display: grid; gap: 12px; }
  [data-trial-history] > label { display: grid; gap: 6px; }
  [data-trial-history] select { min-width: 0; width: 100%; }
  .payroll-history-tools { flex-wrap: wrap; gap: 12px; }
  .payroll-history-tools label { min-width: 0; max-width: 100%; }
  .payroll-history-tools select { max-width: 100%; }
  .payroll-history header { flex-wrap: wrap; gap: 12px; }
  .payroll-reconciliation-form { grid-template-columns: minmax(0, 1fr); }
  .payroll-reconciliation-form label { min-width: 0; }
  .payroll-workspace { max-width: 100%; overflow-x: clip; }
}
[data-trial-history] th, [data-trial-history] td { border-bottom: 1px solid #d6e1e5; padding: 12px; text-align: left; }
[data-trial-history] .payroll-table-scroll { max-height: 500px; overflow: auto; }
[data-trial-history] .payroll-run-actions { margin: 18px 0; }
[data-monthly-estimate] th, [data-monthly-estimate] td { border-bottom: 1px solid #d6e1e5; padding: 12px; text-align: left; }
[data-monthly-estimate] input[type=number] { max-width: 180px; min-height: 38px; }
[data-monthly-estimate] summary, [data-process-month] > details > summary { cursor: pointer; }
@media(max-width: 760px) { [data-monthly-estimate] > header { display: grid; gap: 12px; } }
[data-reference-companies] { display: grid; gap: 24px; }
.attendance-person-link { background: none; border: 0; color: #087f76; cursor: pointer; font: inherit; padding: 4px 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.attendance-detail-dialog { border: 1px solid #d6e1e5; border-radius: 8px; color: #17343a; max-height: 88vh; overflow: auto; padding: 24px; width: min(1000px, calc(100vw - 32px)); }
.attendance-detail-dialog::backdrop { background: #142b3866; }
.attendance-detail-dialog > header { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.attendance-detail-dialog h2 { font-size: 24px; margin: 4px 0; }
.attendance-detail-dialog h3 { font-size: 18px; margin-top: 26px; }
.attendance-detail-metrics { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0; }
.attendance-detail-metrics article { border-bottom: 1px solid #d6e1e5; padding: 12px 0; }
.attendance-detail-metrics small { display: block; }
.attendance-detail-metrics strong { display: block; font-size: 24px; margin-top: 6px; }
.attendance-detail-notice { background: #fff4d6; color: #76520a; padding: 14px; }
.attendance-detail-table { max-height: 300px; overflow: auto; }
.attendance-detail-table table { border-collapse: collapse; min-width: 640px; width: 100%; }
.attendance-detail-table th, .attendance-detail-table td { border-bottom: 1px solid #d6e1e5; padding: 12px; text-align: left; }
@media (max-width: 600px) { .attendance-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .attendance-detail-dialog { padding: 16px; } }
.attendance-profile-dialog { width: calc(100vw - 24px); max-width: none; height: calc(100dvh - 24px); max-height: none; box-sizing: border-box; padding: 0; background: var(--surface); color: var(--text); }
.attendance-profile-dialog > header { padding: 24px 28px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--surface); }
.profile-avatar { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; flex: none; border-radius: 50%; background: var(--surface-subtle); color: var(--text-muted); font-size: 22px; font-weight: 600; }
.profile-heading { flex: 1; min-width: 180px; }
.profile-heading h2 { overflow-wrap: anywhere; }
.profile-heading p,.profile-section p,.profile-gauge p { color: var(--text-muted); margin: 4px 0; font-size: 13px; }
.profile-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-actions input { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; min-height: 38px; padding: 4px 8px; font: inherit; }
.profile-meta { width: 100%; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; margin: 12px 0 0; }
.profile-meta dt,.profile-controls dt { color: var(--text-muted); font-size: 12px; }
.profile-meta dd,.profile-controls dd { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.profile-body { display: grid; gap: 20px; padding: 24px 28px; }
.profile-gauges { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.profile-gauge { border: 1px solid var(--border); border-radius: 8px; padding: 16px; text-align: center; }
.attendance-profile-dialog .profile-gauge h3,.attendance-profile-dialog .profile-section h3 { margin: 0 0 8px; font-size: 16px; }
.profile-gauge svg { display: block; width: 100%; max-width: 200px; height: 118px; margin: 12px auto 0; }
.profile-gauge strong { display: block; font-size: 26px; }
.profile-gauge small { color: var(--text-muted); }
.profile-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-block: 1px solid var(--border); }
.profile-kpis > div { padding: 14px 12px; border-right: 1px solid var(--border); }
.profile-kpis strong { display: block; font-size: 22px; overflow-wrap: anywhere; }
.profile-kpis small { color: var(--text-muted); }
.profile-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.profile-section { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--border); }
.profile-bar-row { display: grid; grid-template-columns: 100px minmax(0,1fr) 30px; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; }
.profile-bar-row > div { height: 12px; background: var(--surface-subtle); border-radius: 4px; overflow: hidden; }
.profile-bar-row > div > span { display: block; height: 100%; }
.profile-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.profile-chart-scroll { overflow-x: auto; }
.profile-daily-chart { display: grid; grid-template-columns: repeat(var(--day-count),minmax(0,1fr)); gap: 6px; min-width: 720px; margin-top: 16px; }
.profile-day { min-width: 0; text-align: center; font-size: 11px; }
.profile-day-track { height: 150px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.profile-day-track span { width: 65%; background: #5486b4; border-radius: 3px 3px 0 0; }
.profile-day small,.profile-day b { display: block; height: 18px; color: var(--text-muted); }
.profile-absence { display: grid; gap: 4px; font-size: 13px; border-top: 1px solid var(--border); padding: 12px 0; }
.profile-absence span,.profile-absence small { color: var(--text-muted); }
.attendance-profile-dialog .attendance-detail-table { max-height: none; }
.attendance-profile-dialog .attendance-detail-table th,.attendance-profile-dialog .attendance-detail-table td { border-color: var(--border); font-size: 13px; color: var(--text); }
.profile-loading { padding: 24px; }
@media (max-width: 800px) {
  .profile-gauges { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-split { grid-template-columns: minmax(0,1fr); }
  .attendance-profile-dialog > header,.profile-body { padding: 16px; }
  .profile-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
[data-reference-lab] .payroll-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-reference-lab] .payroll-table-scroll { max-height: 460px; overflow: auto; }
[data-reference-lab] table { border-collapse: collapse; min-width: 820px; width: 100%; }
[data-reference-lab] th, [data-reference-lab] td { border-bottom: 1px solid #e1e8eb; padding: 12px; text-align: left; vertical-align: top; }
[data-reference-lab] th { background: #f4f7f8; position: sticky; top: 0; z-index: 1; }
[data-reference-lab] td small { color: #95630b; display: block; margin-top: 6px; }
[data-reference-lab] summary { cursor: pointer; }
[data-reference-lab] .payroll-panel { min-width: 0; }
@media (max-width: 760px) {
  [data-reference-lab] .payroll-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-reference-lab] .payroll-panel header { display: grid; gap: 12px; }
}
.process-month-absence { max-width: 600px; }
.individual-workbench { border-block: 1px solid var(--border); min-width: 0; }
.individual-workbench [hidden] { display: none !important; }
.individual-workbench > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; }
.individual-workbench h2 { font-size: 22px; margin-block: 8px; }
.individual-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.individual-picker select { width: min(300px,100%); min-width: 0; }
.individual-picker [data-individual-previous] svg { transform: rotate(180deg); }
.individual-workbench input:not([type="checkbox"]), .individual-workbench select, .individual-workbench textarea, .individual-concept-dialog input:not([type="checkbox"]), .individual-concept-dialog select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: white; color: inherit; max-width: 100%; }
.individual-workbench label, .individual-concept-dialog label { display: grid; gap: 8px; min-width: 0; font-size: 14px; }
.individual-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; padding: 22px 0; background: #f5f8f9; }
.individual-metrics article { padding: 18px; border: 1px solid #d4e0e4; border-radius: 8px; background: white; min-width: 0; min-height: 104px; box-shadow: 0 1px 4px rgb(23 51 55 / 7%); }
.individual-metrics article:nth-child(5) { background: #e1f4ee; border-color: #75b5a7; }
.individual-metrics span { font-size: 13px; color: #52676f; }
.individual-metrics strong { display: block; margin-top: 16px; font-size: 24px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.individual-metrics article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.individual-metrics svg { color: #6c8188; flex-shrink: 0; }
.individual-metrics .is-net strong, .individual-metrics .is-net svg { color: #007f78; }
.individual-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding-block: 20px; }
[data-individual-form] > details { padding-block: 16px; border-bottom: 1px solid var(--border); }
[data-individual-form] summary { cursor: pointer; font-weight: 600; }
[data-individual-form] textarea { width: 100%; font: 13px monospace; margin-bottom: 16px; }
[data-individual-form] .individual-confirm { display: flex; align-items: center; margin-block: 16px; }
[data-individual-calculate] { margin-block: 16px; }
.individual-goal { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,2fr) auto; gap: 16px; align-items: end; border-block: 1px solid var(--border); padding-block: 24px; }
.individual-goal p[data-individual-goal-result] { grid-column: 1/-1; }
.individual-calculation { display: grid; grid-template-columns: 280px minmax(0,1fr); }
.individual-calculation aside { background: #f4f7f8; padding: 20px; border-right: 1px solid var(--border); }
[data-individual-inputs] > div { padding-block: 16px; border-top: 1px solid var(--border); }
.individual-calculation table { width: 100%; min-width: 740px; border-collapse: collapse; }
.individual-calculation th, .individual-calculation td { padding: 14px 16px; text-align: right; border-bottom: 1px solid #d4dfe5; }
.individual-calculation td { height: 49px; font-size: 16px; font-variant-numeric: tabular-nums; }
.individual-calculation th { height: 52px; color: #536a75; font-size: 14px; font-weight: 600; text-transform: none; }
.individual-calculation th:first-child { width: 58%; }
.individual-calculation td:not(:first-child) { white-space: nowrap; }
.individual-calculation .individual-charge { color: #d51c15; }
.individual-calculation .individual-earning { color: #173337; }
.individual-net-footer { padding: 22px; border-top: 1px solid #d4dfe5; background: #f4f7f8; }
.individual-net-footer span { display: block; font-size: 14px; color: #536a75; }
.individual-net-footer strong { display: block; margin-top: 6px; font-size: 26px; color: #007f78; font-variant-numeric: tabular-nums; }
.individual-net-footer small { display: block; margin-top: 8px; font-size: 12px; color: #536a75; }
.individual-calculation th:first-child, .individual-calculation td:first-child { text-align: left; }
.individual-calculation small { display: block; color: #52676f; font-size: 12px; margin-top: 6px; }
.individual-calculation th { background: #f4f7f8; }
.individual-reference { padding-block: 20px; }
.individual-concept-dialog { width: min(500px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 8px; }
.individual-concept-dialog::backdrop { background: rgb(15 32 35 / 45%); }
.individual-concept-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.individual-concept-dialog form { display: grid; gap: 16px; }
.individual-concept-dialog form > div label { display: flex; margin-block: 8px; }
@media (max-width: 1000px) { .individual-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); } .individual-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } .individual-goal { grid-template-columns: repeat(2,minmax(0,1fr)); } .individual-calculation { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .individual-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .individual-fields, .individual-goal { grid-template-columns: minmax(0,1fr); } .individual-picker { width: 100%; } .individual-picker select { flex: 1; width: auto; } .individual-metrics strong { font-size: 18px; } }
.trial-history-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-block: 20px; }
.trial-history-tools label { display: grid; gap: 8px; min-width: 0; font-size: 14px; }
.trial-history-tools input, .trial-history-tools select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: white; color: inherit; }
[data-trial-rows] td { vertical-align: middle; }
[data-trial-rows] td small { display: block; margin-top: 6px; font-size: 12px; color: #566b73; }
[data-trial-rows] .ui-button { white-space: nowrap; }
.trial-individual-link { display: block; margin-top: 8px; font-size: 12px; color: #007d73; }
.trial-state, .trial-reception { display: inline-block; padding: 4px 9px; border-radius: 4px; background: #fff0c4; color: #745208; font-size: 13px; }
.trial-reception { background: #f0f4f5; color: #52676f; }
.trial-history-notice { color: #62777e; font-size: 13px; }
.trial-detail-dialog { width: min(1100px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #d6e1e5; border-radius: 8px; color: #173337; background: white; overflow: auto; }
.trial-detail-dialog::backdrop { background: rgb(15 32 35 / 45%); }
.trial-detail-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: 1px solid #d6e1e5; margin: 0; }
.trial-detail-dialog h2 { font-size: 26px; margin: 8px 0; text-transform: capitalize; }
.trial-detail-dialog header p { margin-block: 6px; }
.trial-detail-body { padding: 24px; min-width: 0; }
.trial-detail-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.trial-detail-tabs [aria-pressed="true"] { background: #e0f4ed; border-color: #087e75; color: #006d64; }
.trial-detail-notice, .trial-detail-warning { padding: 12px 16px; border-left: 3px solid #b68218; background: #fff8e2; font-size: 14px; }
.trial-detail-totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-block: 20px; }
.trial-detail-totals article { border: 1px solid #d6e1e5; border-radius: 6px; padding: 14px; min-width: 0; }
.trial-detail-totals span { display: block; font-size: 13px; color: #566b73; }
.trial-detail-totals strong { display: block; margin-top: 8px; font-size: 18px; overflow-wrap: anywhere; }
.trial-detail-bases, .trial-detail-empty { color: #566b73; font-size: 14px; }
.trial-detail-body h3 { font-size: 18px; margin-block: 24px 12px; }
.trial-detail-table { overflow: auto; }
.trial-detail-table table { min-width: 640px; border-collapse: collapse; width: 100%; }
.trial-detail-table th, .trial-detail-table td { padding: 12px; border-bottom: 1px solid #d6e1e5; text-align: left; }
.trial-detail-table td:last-child, .trial-detail-table th:last-child { text-align: right; white-space: nowrap; }
.trial-detail-table small { display: block; color: #62777e; font-size: 12px; margin-top: 6px; }
[data-detail-print] iframe { display: block; width: 100%; height: 650px; margin-top: 16px; border: 1px solid #d6e1e5; background: #f2f5f6; }
@media (max-width: 760px) {
  .trial-history-tools { grid-template-columns: minmax(0, 1fr); }
  .trial-detail-dialog > header { flex-wrap: wrap; padding: 16px; }
  .trial-detail-body { padding: 16px; }
  .trial-detail-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trial-detail-dialog h2 { font-size: 22px; }
}
@media (max-width: 760px) { .header-process-month summary span { max-width: 90px; overflow-wrap: anywhere; } }