#calculatorSection { max-width: 1440px; margin-inline: auto; overflow: visible; }
#calculatorSection * { min-width: 0; letter-spacing: 0; }
#calculatorSection :is(strong, small, .form-text, .form-label, .btn) { overflow-wrap: anywhere; }
#calculatorSection :is(input.form-control, .form-select) { min-height: 44px; font-size: 16px; }
#calculatorSection .btn { min-height: 44px; white-space: normal; }
#calculatorSection .form-label { font-size: 14px; font-weight: 600; }
#calculatorSection .form-text { font-size: 13px; line-height: 1.5; color: #62717b; }
#calculatorSection .form-control[readonly] { background: #f1f4f5; color: #475762; }
#calculatorSection .form-control:out-of-range,
#calculatorSection .form-control:user-invalid { border-color: #b52c3d; }
#calculatorSection :is(input, select, summary, button) { scroll-margin-block: calc(var(--ops-mobile-bar-height, 76px) + 120px) 24px; }

.calculator-context { background: #fff; padding: 16px; border-block: 1px solid #dce4e7; }
.calculator-context-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px 16px; }
.calculator-context-grid > .calculator-field-wide { grid-column: auto; }
.calculator-period-heading { margin-bottom: 12px; }
.calculator-period-heading strong { font-size: 14px; font-weight: 600; }
.calculator-period-heading .form-text { font-variant-numeric: tabular-nums; }
.calculator-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calculator-source-grid:has(#calculatorDateToField:not(.d-none)) .calculator-source-period-mode { grid-column: 1 / -1; }

.calculator-scenario-status { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 0; }
.calculator-scenario-status strong { display: block; font-size: 14px; color: #234538; }
.calculator-scenario-status span { display: block; font-size: 13px; color: #62717b; margin-top: 2px; }
.calculator-scenario-status.is-scenario strong { color: #185eb4; }
.calculator-source-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.calculator-source-actions .btn { flex: 1 1 150px; }

.calculator-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
.calculator-input-card, .calculator-breakdown-card { background: #fff; border-block: 1px solid #dce4e7; }
.calculator-section-heading { padding: 18px 20px 0; }
.calculator-section-heading h2 { margin: 0; font-size: 18px; font-weight: 650; }
.calculator-input-body { padding: 16px; }
.calculator-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calculator-field-wide { grid-column: 1 / -1; }
#calculatorSection .calculator-role-fields { border: 0; border-top: 1px solid #e1e7ea; border-radius: 0; background: transparent; padding: 20px 0 0; margin: 20px 0 0; }
#calculatorSection .calculator-role-fields legend { float: none; width: auto; font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.calculator-secondary-controls { margin-top: 0; }
.calculator-source-details { padding-top: 0; }
.calculator-source-details > summary, .calculator-result-details > summary { cursor: pointer; font-size: 14px; font-weight: 650; padding-block: 10px; }
.calculator-source-details[open] > summary, .calculator-result-details[open] > summary { margin-bottom: 8px; }
.calculator-source-details .calculator-input-grid { margin-top: 16px; }
.calculator-rule-curve { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #bc821b; background: #fff8e8; font-size: 13px; }
.calculator-data-details, .calculator-prize-details { border-top: 1px solid #dce4e7; margin-top: 12px; }
.calculator-data-details > summary, .calculator-prize-details > summary { cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 650; }
.calculator-formula-error { margin-top: 8px; padding: 10px 12px; background: #fff0f1; color: #912338; border-left: 3px solid #b52c3d; font-size: 14px; }
.calculator-fix-button { grid-column: 1 / -1; justify-self: start; margin: 8px 16px 0; }
#calculatorSection .calculator-input-grid > .calculator-field:has(> .btn.d-none:only-child) { display: none; }

.calculator-result-column { display: grid; gap: 16px; }
.calculator-summary-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); background: #edf7f2; border-block: 1px solid #c8dfd3; padding: 18px 0; font-variant-numeric: tabular-nums; }
.calculator-summary-panel .metric-card { display: grid; align-content: start; gap: 5px; padding: 0 18px; background: transparent; border: 0; border-radius: 0; box-shadow: none; min-height: 0; }
.calculator-summary-panel .metric-card + .metric-card { border-left: 1px solid #c8dfd3; }
.calculator-summary-panel .metric-card { grid-template-rows: auto minmax(30px, auto) auto; }
.calculator-summary-panel .metric-card > span { font-size: 13px; color: #365b4a; }
.calculator-summary-panel .metric-card > strong { font-size: 25px; line-height: 1.2; color: #116b43; }
.calculator-summary-panel .metric-card > small { font-size: 12px; color: #4f675b; }
.calculator-summary-panel[data-state="pending"], .calculator-summary-panel[data-state="empty"], .calculator-summary-panel[data-state="error"] { background: #f4f6f7; border-color: #dce4e7; }
.calculator-summary-panel .metric-card:only-child { grid-column: 1 / -1; }
.calculator-summary-panel[data-state="partial"] { background: #fff8e8; border-color: #ead4a5; }
.calculator-summary-panel:not([data-state="ready"]) .metric-card > strong { color: #475762; }
.calculator-summary-panel[data-state="ready"][data-plan-state="below"] .metric-card:last-child > strong { color: #9b4d0e; }
.calculator-summary-panel[data-plan-state="unknown"] .metric-card:last-child > strong { color: #475762; }
.calculator-breakdown { padding: 12px 20px 20px; }
.calculator-coverage { margin: 16px 20px 0; padding: 12px; font-size: 14px; }
.calculator-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid #e6ebed; font-variant-numeric: tabular-nums; }
.calculator-row > span { font-size: 14px; color: #4d606b; }
.calculator-row > strong { text-align: right; font-size: 16px; }
.calculator-row > small { grid-column: 1 / -1; font-size: 12px; color: #62717b; }
.calculator-result-details { margin-top: 12px; border-top: 1px solid #dce4e7; }
.calculator-scenario-note { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #327ac2; background: #f0f6fc; color: #355167; font-size: 13px; }
.calculator-breakdown .alert { margin-top: 12px; font-size: 14px; }
.calculator-breakdown .alert:first-child { margin-top: 0; }
.calculator-issue-list { padding-left: 20px; font-size: 14px; }
.calculator-issue-list li + li { margin-top: 8px; }

.calculator-manager-address-box, .calculator-period-scenarios { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dce4e7; }
.calculator-manager-address-head h3, .calculator-period-scenarios-head h3, .calculator-model-periods h3 { font-size: 16px; font-weight: 650; margin: 0 0 12px; }
.calculator-period-scenarios-head p { font-size: 13px; color: #62717b; }
.calculator-manager-address-list, .calculator-period-scenarios-list, .calculator-period-store-list { display: grid; gap: 12px; }
.calculator-manager-address-row { display: grid; grid-template-areas: "name status" "revenue plan"; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 0; border-bottom: 1px solid #dce4e7; }
.calculator-manager-address-name { grid-area: name; }
.calculator-manager-address-name strong { display: block; font-size: 15px; }
.calculator-manager-address-name small, .calculator-manager-address-status span { display: block; font-size: 12px; color: #62717b; }
.calculator-manager-address-row label, .calculator-period-scenario-grid label, .calculator-period-store-row label { display: grid; align-content: start; gap: 6px; margin: 0; font-size: 13px; }
.calculator-manager-address-row label:nth-of-type(1) { grid-area: revenue; }
.calculator-manager-address-row label:nth-of-type(2) { grid-area: plan; }
.calculator-manager-address-status { grid-area: status; text-align: right; color: #9b4d0e; }
.calculator-manager-address-status.is-good { color: #116b43; }
.calculator-manager-plan-reference { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #416552; font-size: 12px; }
.calculator-manager-plan-reference button { min-height: 44px; border: 0; background: transparent; padding: 0 4px; color: #185eb4; text-decoration: underline; text-underline-offset: 3px; }
.calculator-manager-empty { font-size: 14px; padding: 12px 0; color: #62717b; }
.calculator-period-scenario-card { padding: 14px; border: 1px solid #dce4e7; border-radius: 8px; }
.calculator-period-scenario-card > header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.calculator-period-scenario-card > header > div { flex: 1 1 180px; }
#calculatorSection .calculator-period-scenario-card > header > .btn { flex: 0 0 auto; white-space: nowrap; }
.calculator-period-scenario-card small { display: block; font-size: 12px; color: #62717b; }
.calculator-period-scenario-card > summary { cursor: pointer; font-size: 14px; }
.calculator-period-scenario-card > summary span { display: inline; }
.calculator-period-scenario-card[open] > summary { margin-bottom: 16px; }
.calculator-period-scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calculator-period-store-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 12px; border-top: 1px solid #e1e7ea; }
.calculator-period-store-row > strong { grid-column: 1 / -1; font-size: 14px; }
.calculator-period-store-list + .btn { margin-top: 12px; }
.calculator-model-periods { padding-top: 16px; margin-top: 16px; border-top: 1px solid #dce4e7; }
.calculator-model-period { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr); gap: 12px; padding: 12px 0 12px 12px; margin-top: 10px; border-left: 3px solid #bc821b; background: #fff8e8; }
.calculator-model-period.is-ready { background: transparent; border-color: #bad7c8; }
.calculator-model-period > div { display: grid; align-content: start; gap: 4px; }
.calculator-model-period > div:nth-child(2) { padding-right: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.calculator-model-period strong { font-size: 14px; }
.calculator-model-period :is(small, span) { font-size: 12px; color: #62717b; }

@media (min-width: 1101px) {
  .calculator-result-column { position: sticky; top: calc(var(--ops-mobile-bar-height, 76px) + 12px); max-height: calc(100dvh - var(--ops-mobile-bar-height, 76px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .calculator-result-column .calculator-summary-panel { position: sticky; top: 0; z-index: 2; }
}
@media (max-width: 1100px) {
  .calculator-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .calculator-result-column { display: contents; }
  .calculator-summary-panel { grid-row: 1; position: sticky; top: var(--ops-mobile-bar-height, 76px); z-index: 20; padding-block: 10px; box-shadow: 0 3px 8px #192d2014; }
  .calculator-summary-panel:empty { display: none; }
  .calculator-input-column { grid-row: 2; }
  .calculator-breakdown-card { grid-row: 3; }
  .calculator-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator-scenario-status { flex-wrap: wrap; }
  .calculator-row { grid-template-columns: minmax(0, 1fr) minmax(100px, auto); }
}
@media (max-width: 700px) {
  .calculator-context-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .calculator-context, .calculator-input-body { padding: 16px; }
  .calculator-section-heading { padding: 16px 16px 0; }
  .calculator-breakdown { padding: 12px 16px 16px; }
  .calculator-coverage { margin-inline: 16px; }
  .calculator-summary-panel .metric-card { padding-inline: 12px; }
  .calculator-summary-panel .metric-card > strong { font-size: 22px; }
  .calculator-summary-panel .metric-card > small { font-size: 12px; }
  .calculator-input-grid { gap: 14px; }
  .calculator-source-grid { grid-template-columns: minmax(0, 1fr); }
  .calculator-source-period-mode { grid-column: 1 / -1; }
  .calculator-row > strong { font-size: 15px; }
}
@media (max-width: 400px) {
  #calculatorSection .calculation-type-button { padding-inline: 8px; }
  #calculatorSection .calculation-type-button span { font-size: 14px; }
  .calculator-input-grid, .calculator-period-scenario-grid, .calculator-period-store-row { grid-template-columns: minmax(0, 1fr); }
  .calculator-manager-address-row { grid-template-areas: "name status" "revenue revenue" "plan plan"; }
  .calculator-summary-panel .metric-card > strong { font-size: 19px; }
  .calculator-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .calculator-row > strong { text-align: left; }
}
@media (max-height: 550px) {
  .calculator-summary-panel { position: static; }
  .calculator-result-column { max-height: none; position: static; overflow: visible; }
  .calculator-result-column .calculator-summary-panel { position: static; }
}
.company-model-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.company-model-controls label, .company-model-filters label { display: grid; gap: 6px; min-width: 0; font-size: 14px; }
.company-model-filters { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; margin: 20px 0; }
.company-model-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 0; border-block: 1px solid #dce4e7; }
.company-model-totals span { display: block; color: #54616a; font-size: 14px; }
.company-model-totals strong { display: block; font-size: 22px; overflow-wrap: anywhere; }
.company-model-table { margin-top: 16px; container-type: inline-size; }
.company-model-row { display: grid; grid-template-columns: minmax(160px, 1.5fr) repeat(3, minmax(100px, 1fr)); gap: 12px; padding: 12px 0; border-bottom: 1px solid #e2e8ed; font-variant-numeric: tabular-nums; }
.company-model-row > * { min-width: 0; overflow-wrap: anywhere; }
.company-model-row > :not(:first-child) { text-align: right; }
.company-model-head { color: #54616a; font-size: 13px; }
@container (max-width: 520px) {
  .company-model-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .company-model-row > :not(:first-child) { display: flex; justify-content: space-between; gap: 12px; }
  .company-model-row [data-label]::before { content: attr(data-label); color: #54616a; font-weight: 400; }
  .company-model-head { display: none; }
}
.company-model-warning { padding: 12px; background: #fff6e5; border-left: 3px solid #c17007; margin-bottom: 16px; }
.company-model-warning li, .company-model-method li { margin-top: 8px; }
.company-model-method { margin-top: 20px; font-size: 14px; }
@media (min-width: 576px) {
  #companyModelModal .modal-dialog { width: calc(100% - 32px); max-width: 1100px; margin-inline: auto; }
}
@media (max-width: 575px) {
  .company-model-controls { grid-template-columns: minmax(0, 1fr); }
  .company-model-controls input, .company-model-controls select, .company-model-filters input, .company-model-filters select { font-size: 16px; min-height: 44px; }
  .company-model-filters { grid-template-columns: minmax(0, 1fr); }
  .company-model-totals { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .company-model-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .company-model-row > :not(:first-child) { display: flex; justify-content: space-between; gap: 12px; }
  .company-model-row [data-label]::before { content: attr(data-label); color: #54616a; font-weight: 400; }
  .company-model-head { display: none; }
}
.payroll-budget-header { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.payroll-budget-controls { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; min-width: 0; }
.payroll-budget-controls label { display: grid; gap: 6px; font-size: 14px; min-width: 0; }
.payroll-budget-controls input { max-width: 190px; }
.payroll-budget-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding-block: 16px; border-block: 1px solid #dce4e7; }
.payroll-budget-metrics span, .payroll-budget-metrics small { display: block; color: #596671; }
.payroll-budget-metrics strong { display: block; font-size: 22px; overflow-wrap: anywhere; }
.payroll-budget-composition { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; color: #596671; font-size: 14px; }
.payroll-budget-periods > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #dce4e7; }
.payroll-budget-periods span { display: block; color: #596671; font-size: 14px; }
.payroll-budget-periods button { flex-shrink: 0; }
.payroll-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.payroll-entry-grid label { display: grid; gap: 6px; font-size: 14px; min-width: 0; }
.payroll-entry-confirm { display: flex; align-items: start; gap: 12px; margin: 20px 0; }
.payroll-entry-confirm input { flex-shrink: 0; }
.payroll-history { margin: 20px 0; }
.payroll-history li { padding: 10px 0; }
.payroll-history span, .payroll-history small { display: block; color: #596671; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .payroll-budget-periods > div { align-items: start; flex-direction: column; gap: 8px; }
}
@media (max-width: 575px) {
  .payroll-entry-grid, .payroll-budget-metrics { grid-template-columns: minmax(0, 1fr); }
  .payroll-entry-grid input, .payroll-entry-grid select, .payroll-budget-controls input, .payroll-budget-controls select { font-size: 16px; min-height: 44px; }
  .payroll-budget-controls { width: 100%; }
  .payroll-budget-controls > label:last-child { flex-basis: 100%; }
  .payroll-budget-controls > label:last-child select { width: 100%; }
}
.payroll-payment-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  padding: 16px 0;
  margin: 12px 0 0;
  border-top: 1px solid #d9e2e8;
}
.payroll-payment-facts dt { font-size: 13px; font-weight: 500; color: #54616c; }
.payroll-payment-facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.personal-kpi-guidance, .personal-kpi-official { margin-top: 16px; padding: 16px 0; border-top: 1px solid #d9e2e8; }
.personal-kpi-guidance p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.personal-kpi-official h4 { font-size: 18px; margin: 0; }
.personal-kpi-official small { color: #54616c; }
#mySection { max-width: 1440px; margin-inline: auto; }
#mySection .seller-kpi-facts, #mySection .manager-month-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
#mySection .seller-kpi-facts > div { padding: 10px 0; border: 0; border-bottom: 1px solid #d9e2e8; border-radius: 0; background: transparent; }
.forecast-quality-rows > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; border-top: 1px solid #d9e2e8; padding: 12px 0; font-size: 14px; }
