/* Portal density and form layout. Loaded after workspace and native admin styles. */
:root { --portal-control: 40px; }
.portal-header { min-height: 56px; padding: 6px 20px; gap: 20px; }
.portal-brand { font-size: 20px; }
.portal-nav { gap: 12px; }
.portal-nav a { min-height: 40px; }
@media(min-width:1351px) {
  .portal-header { grid-template-columns: auto minmax(0,1fr) auto; }
  .portal-header .portal-nav { grid-column: auto; grid-row: auto; justify-content: safe center; }
}
main#main { max-width: 1480px; padding: 20px 24px 32px; }
.worksheet-compact main#main { max-width: 1920px; padding: 16px 24px 32px; }
main#main:has(.employee-create-panel) { max-width: 860px; }
main#main:has(.import-panel):not(:has(.import-preview)) { max-width: 1040px; }
main#main:has(.audit-event) { max-width: 1240px; }
.page-heading, .compact-heading { margin-bottom: 14px; }
.sheet-context,.worksheet-compact .sheet-context { margin-bottom: 12px; padding: 10px 14px; gap: 10px 16px; }
.branch-tabs,.worksheet-compact .branch-tabs { margin-bottom: 12px; }
.branch-tabs a,.worksheet-compact .branch-tabs a { padding: 8px 14px; min-height: 40px; }
body button,body .button,body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),body select:not([multiple]) { box-sizing: border-box; min-height: 40px; }
body input,body select,body textarea { box-sizing: border-box; }
body select:not([multiple]) { height: 40px; padding: 7px 10px; }
body button,body .button { padding: 8px 13px; }
.history-filter { padding: 12px 14px; margin: 14px 0; border: 1px solid var(--portal-border); border-radius: 7px; background: #fff; gap: 12px; }
.history-filter label { font-size: 13px; margin-bottom: 4px; }
.history-filter input { max-width: 180px; }
.history-filter select { max-width: 260px; }
.audit-event { padding: 14px; margin-bottom: 12px; }
.data-table th,.data-table td { padding: 8px 10px; }
.data-table .input-cell { padding: 4px; }
.table-toolbar,.worksheet-compact .table-toolbar { padding: 8px 12px; }
.employee-create-panel,.import-panel { padding: 18px; max-width: 100%; }
.employee-create-field { margin-top: 12px; }
.employee-date-fields { gap: 14px; }
.employee-month-choice { margin-top: 14px; }
.employee-create-actions,.import-confirm { margin-top: 14px; padding-top: 14px; }
.import-upload { gap: 10px; }
.finance-dialog:not(.payments-dialog) { padding: 20px; }
.finance-dialog-heading { margin-bottom: 14px; }
.finance-dialog-heading h2 { font-size: 20px; }
.finance-dialog:not(.participants-dialog):not(.payments-dialog) .finance-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
.finance-dialog:not(.payments-dialog) .finance-panel { padding: 12px 0; }
.finance-dialog .finance-panel:first-child { grid-column: 1/-1; }
.finance-dialog .finance-panel h2 { margin-bottom: 8px; }
.finance-dialog .finance-panel .panel-help { margin: 8px 0 0; }
.finance-dialog-actions { padding-top: 12px; gap: 12px; }
.participants-content p { font-size: 13px; margin-bottom: 8px; }
.participants-dialog .roster-tabs { margin-top: 12px; }
.finance-dialog.payments-dialog { width: min(1240px,calc(100vw - 32px)); }
.payments-dialog .payment-employees { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.payments-dialog .payment-employee { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px; }
.payments-dialog .payment-employee label { font-size: 13px; }
.payments-dialog .payment-employee .payment-new-employee { grid-template-columns: minmax(0,2fr) minmax(140px,1fr); }
.payments-dialog .payments-content { padding: 16px 20px; }
.payments-dialog .payments-content h3 { margin-top: 16px; }
.payments-dialog .payments-summary { padding: 10px 12px; }
/* Administration: sensible canvas, labels above controls, consistent box sizing. */
#content { max-width: 1480px; padding: 20px 24px 32px; }
.change-form #content { max-width: 1160px; }
.change-form.model-city #content,.change-form.model-employee #content { max-width: 860px; }
.change-form #content h1 { margin-bottom: 10px; }
.change-form #content>h2 { font-size: 14px; color: var(--portal-muted); margin: 0 0 10px; }
.change-form #content-main { float: none; width: 100%; }
.change-form .object-tools { margin: 0 0 10px; }
.change-form .object-tools a { background: #fff; color: var(--portal-accent); border: 1px solid var(--portal-border); min-height: 36px; }
.change-form fieldset.aligned { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 14px; }
.change-form fieldset.aligned>h2,.change-form fieldset.aligned>details,.change-form fieldset.aligned>.description { grid-column: 1/-1; }
.change-form .aligned .form-row { padding: 10px 14px; min-width: 0; }
.change-form .aligned .form-row>div { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.change-form .aligned .form-row .flex-container { display: flex; flex-direction: column; gap: 5px; align-items: stretch; min-width: 0; max-width: 100%; box-sizing: border-box; }
.change-form .aligned label { float: none; width: auto; min-width: 0; padding: 0; margin: 0; font-size: 13px; font-weight: 550; line-height: 1.4; }
.change-form .aligned .help,.change-form .aligned div.help { margin: 5px 0 0 !important; padding: 0; font-size: 12px; line-height: 1.45; color: var(--portal-muted); }
.change-form .aligned .readonly { margin: 0; padding: 0; overflow-wrap: anywhere; }
.change-form .aligned .form-row .flex-container.checkbox-row { display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 40px; }
.change-form .aligned label.vCheckboxLabel { display: inline; }
.change-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),.change-form select:not([multiple]) { height: 40px; min-height: 40px; width: 100%; max-width: 100%; margin: 0; padding: 7px 10px; font-size: 14px; border: 1px solid #b9c8bf; background: #fff; }
.change-form input[type=checkbox],.change-form input[type=radio] { min-height: 0; width: 18px; height: 18px; margin: 0; flex: none; }
.change-form textarea { width: 100%; max-width: 100%; min-height: 120px; padding: 9px 10px; margin: 0; box-sizing: border-box; }
.change-form input.vDateField { width: 150px !important; }
.change-form input[type=time] { width: 150px !important; }
.change-form .aligned .datetime { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.change-form .aligned .datetimeshortcuts { margin: 0; white-space: nowrap; font-size: 12px; }
.change-form .related-widget-wrapper { display: flex; align-items: center; flex-wrap: nowrap; float: none; gap: 5px; width: 100%; min-width: 0; }
.change-form .related-widget-wrapper select { flex: 1; width: 0; min-width: 90px; }
.change-form .related-widget-wrapper-link { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 36px; padding: 0; margin: 0; }
.change-form .related-widget-wrapper-link img { width: 18px; height: 18px; }
.change-form .aligned .form-row:has(textarea),.change-form .aligned .form-row:has(.selector),.change-form .aligned .form-row:has(select[multiple]),.change-form .aligned .form-row:has(.readonly),.change-form .aligned .field-full_name,.change-form .aligned .field-name,.change-form .aligned .field-endpoint,.change-form .aligned .field-city,.change-form .aligned .field-password { grid-column: 1/-1; }
.change-form .aligned .form-row .fieldBox { float: none; margin: 0; min-width: 0; flex: 1; }
.change-form .aligned .form-row .form-multiline { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.change-form .aligned .form-row .fieldBox .flex-container { flex-direction: column; }
.change-form .selector { width: 100%; max-width: 100%; }
.change-form .selector-available,.change-form .selector-chosen { width: calc(50% - 22px); max-width: 100%; }
.change-form .selector select { width: 100%; min-height: 170px; }
.change-form .submit-row { padding: 12px 14px; gap: 8px; margin: 14px 0 0; }
.change-form .submit-row input { min-height: 40px; padding: 8px 14px; }
.change-form .submit-row input:not(.default) { background: #fff; color: var(--portal-accent); border: 1px solid #b9c8bf; }
.change-form .submit-row .deletelink { background: #fff; color: #a11f25; border: 1px solid #dec3c3; min-height: 40px; padding: 8px 12px; }
#changelist table th,#changelist table td { padding: 8px 12px; }
#changelist #toolbar { padding: 10px 14px; }
#changelist-filter h3 { margin-top: 12px; }
.dashboard #content { max-width: 1280px; grid-template-columns: minmax(0,1fr) 280px; gap: 0 20px; }
/**** API cards also work on laptop widths, without stretching every field across the page. ****/
.change-form #performancesource_form>div,.change-form #paymentsource_form>div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; }
.change-form #performancesource_form>div>fieldset,.change-form #paymentsource_form>div>fieldset { margin: 0; min-width: 0; }
.change-form #paymentsource_form>div>fieldset:first-of-type { grid-column: 1/-1; }
.change-form #performancesource_form .form-row,.change-form #paymentsource_form .form-row { padding: 10px 14px; }
.change-form #performancesource_form .submit-row,.change-form #paymentsource_form .submit-row { grid-column: 1/-1; margin-top: 0; }
.change-form .api-contract summary { cursor: pointer; color: var(--portal-accent); font-size: 13px; font-weight: 550; padding: 3px 0; }
.change-form .api-contract[open] summary { margin-bottom: 10px; }
.change-form .api-contract pre,.change-form .api-contract code { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.change-form .api-contract p { font-size: 12px; line-height: 1.5; margin-bottom: 0; }
.change-form .inline-group { border: 1px solid var(--portal-border); border-radius: 7px; overflow: hidden; margin: 14px 0; }
.change-form .inline-group .inline-related { padding: 0 12px 12px; }
.change-form .inline-group fieldset.module { margin-bottom: 0; }
@media(max-width:980px) {
  .change-form #performancesource_form>div,.change-form #paymentsource_form>div { grid-template-columns: minmax(0,1fr); }
  .dashboard #content { grid-template-columns: minmax(0,1fr); }
  .dashboard #content-related { margin-top: 14px; }
  .payments-dialog .payment-employees { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:700px) {
  .portal-header { padding: 8px 14px; gap: 0 12px; }
  main#main,.worksheet-compact main#main,#content { padding: 16px 14px 28px; }
  body button,body .button,body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),body select:not([multiple]) { min-height: 44px; }
  body select:not([multiple]) { height: 44px; }
  .change-form fieldset.aligned { grid-template-columns: minmax(0,1fr); }
  .change-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),.change-form select:not([multiple]) { min-height: 44px; height: 44px; }
  .change-form .aligned .form-row { padding: 10px 12px; }
  .change-form .aligned .form-row .form-multiline { flex-direction: column; }
  .change-form .selector-available,.change-form .selector-chosen { width: 100%; }
  .change-form .submit-row { padding: 12px; }
  .change-form .submit-row input { min-height: 44px; }
  .history-filter input,.history-filter select { max-width: 100%; }
  .history-filter>div { width: 100%; }
  .finance-dialog:not(.payments-dialog) { padding: 16px; }
  .finance-dialog:not(.participants-dialog):not(.payments-dialog) .finance-grid { grid-template-columns: minmax(0,1fr); }
  .payments-dialog .payments-content { padding: 12px; }
  .payments-dialog .payment-employee .payment-new-employee { grid-template-columns: minmax(0,1fr); }
}

/* Keep labels and selected-permission headings readable at compact widths. */
/* The worksheet grows with the page; only horizontal overflow stays local. */
.worksheet-compact .worksheet-table-scroll { max-height: none; overflow-x: auto; overflow-y: auto; }
.worksheet-table-scroll .data-table tbody th,.worksheet-table-scroll .data-table tbody td { padding: 5px 10px; }
.worksheet-table-scroll .data-table .input-cell { padding: 3px 4px; }
.worksheet-compact .worksheet-table-scroll .metric-input { min-height: 34px; height: 34px; padding: 5px 8px; }
.worksheet-table-scroll .employee-name-action { display: flex; align-items: center; gap: 8px; }
.worksheet-table-scroll .employee-name { flex: 1; min-width: 0; line-height: 1.25; }
@media(max-width:700px),(pointer:coarse) {
 .worksheet-compact .worksheet-table-scroll .metric-input { min-height: 44px; height: 44px; }
}
@media(max-width:700px) {
 .worksheet-table-scroll .data-table .employee-col { min-width: 230px; max-width: 250px; }
}
.finance-dialog .manual-fields label { min-height: 36px; }
.change-form .selector-chosen h2,.change-form .aligned .selector-chosen-title label { color: #fff; }
@media(max-width:767px) {
 .change-form .selector-available,.change-form .selector-chosen { width: 100%; }
}

.realized-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.realized-refresh{min-height:32px;padding:4px 9px;font-size:13px;font-weight:600}.realized-status{display:block;font-size:12px;line-height:1.4;max-width:320px;margin-top:4px}.realized-status:empty{display:none}@media(max-width:720px){.realized-refresh{min-height:44px}}

/* Dense worksheet rows for mouse/trackpad; touch controls keep their larger targets. */
@media (min-width:701px) and (pointer:fine) {
 body.worksheet-compact .worksheet-table-scroll .data-table tbody th,
 body.worksheet-compact .worksheet-table-scroll .data-table tbody td { padding: 2px 8px; }
 body.worksheet-compact .worksheet-table-scroll .data-table .input-cell { padding: 1px 4px; }
 body.worksheet-compact .worksheet-table-scroll .data-table input.metric-input[type="text"] { min-height: 26px; height: 26px; padding: 2px 6px; line-height: 20px; }
 body.worksheet-compact .worksheet-table-scroll .data-table .movement-open { flex-basis: 26px; width: 26px; min-height: 26px; height: 26px; padding: 4px; }
 body.worksheet-compact .worksheet-table-scroll .data-table .row-help { margin-top: 1px; line-height: 1.2; }
}