#calculationSection { max-width: 1520px; margin-inline: auto; }
#calculationSection * { min-width: 0; letter-spacing: 0; }
#calculationSection > .card { border-radius: 8px; box-shadow: none; }
#calculationSection .calculation-period-heading { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 12px; align-items: center; }
#calculationSection .calculation-period-heading .period-icon-button { width: 44px; min-height: 44px; }
#calculationSection .calculation-controls { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(260px, 1fr) minmax(270px, 1.3fr); gap: 16px; align-items: start; }
#calculationSection .calculation-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
#calculationSection .calculation-filters > div { min-width: 0; }
#calculationSection .calculation-preview-warnings { padding-left: 20px; margin-top: 8px; color: #8b3b12; }
@media (max-width: 575px) {
  #calculationSection .calculation-filters { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #calculationSection .calculation-filters input, #calculationSection .calculation-filters select { font-size: 16px; min-height: 44px; }
}
#calculationSection .calculation-period-picker { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 6px; }
#calculationSection .calculation-period-picker > .btn { width: 44px; height: 44px; min-height: 44px; align-self: center; }
#calculationSection .calculation-model-field { margin: 0; }
#calculationSection #calculationSummary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: white; padding: 20px 0; border-block: 1px solid #dfe5e7; }
#calculationSection #calculationSummary .metric-card { border: 0; border-right: 1px solid #dfe5e7; border-radius: 0; box-shadow: none; background: transparent; padding: 8px 20px; min-height: 0; }
#calculationSection #calculationSummary .metric-card:last-child { border-right: 0; }
#calculationSection #calculationSummary .metric-card strong { font-size: 23px; line-height: 1.35; overflow-wrap: normal; }
#calculationSection #calculationSummary.has-payout .metric-card:first-child strong { color: #116b43; }
#calculationSection .calculation-workflow-actions { margin-block: 20px; }
#calculationSection #calculationActions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#calculationSection #calculationActions > .alert { flex: 1 1 100%; padding: 10px 14px; }
#calculationSection #calculationActions > .d-flex { flex: 1 1 280px; }
#calculationSection #calculationActions > .empty-block { padding: 8px 0; border: 0; background: transparent; }
#calculationSection :is(.form-control, .form-select, .btn) { min-height: 44px; }
#calculationSection .calculation-issue-group { border-radius: 8px; }
#calculationSection :is(.calculation-issue-groups, #calculationRuleHint) { overflow-wrap: anywhere; }
#calculationSection .calculation-workflow-results { background: #fff; border-block: 1px solid #dfe5e7; padding: 20px 0; }
#calculationSection .calculation-workflow-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-inline: 20px; }
#calculationSection #calculationPreview { padding: 0; display: block; }
#calculationSection .calculation-result-overview { display: block; border: 0; box-shadow: none; padding: 8px 20px 16px; background: transparent; }
#calculationSection .calculation-result-overview h3 { display: none; }
#calculationSection .calculation-result-overview p { margin: 0; }
#calculationSection .calculation-payout-columns,
#calculationSection .calculation-payout-row > summary { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(210px, 1.2fr) minmax(110px, .6fr) minmax(160px, .9fr); gap: 16px; align-items: center; padding: 14px 20px; }
#calculationSection .calculation-payout-columns { background: #f4f7f7; color: #586674; font-size: 13px; }
#calculationSection .calculation-payout-columns > :last-child { text-align: right; }
#calculationSection .calculation-payout-row { border-top: 1px solid #e4e9ee; }
#calculationSection .calculation-payout-row > summary { list-style: none; cursor: pointer; }
#calculationSection .calculation-payout-row > summary::-webkit-details-marker { display: none; }
#calculationSection .calculation-payout-row > summary:hover,
#calculationSection .calculation-payout-row[open] > summary { background: #f3f8f6; }
#calculationSection .calculation-payout-row > summary:focus-visible { outline: 2px solid #157750; outline-offset: -2px; }
#calculationSection .calculation-payout-person strong { font-size: 17px; }
#calculationSection .calculation-payout-person small,
#calculationSection .calculation-payout-plan small,
#calculationSection .calculation-payout-amount small { display: block; font-size: 13px; color: #627281; margin-top: 4px; }
#calculationSection .calculation-payout-plan span { display: block; font-size: 13px; }
#calculationSection .calculation-payout-plan strong { font-size: 15px; font-weight: 600; }
#calculationSection .calculation-payout-amount { text-align: right; font-variant-numeric: tabular-nums; }
#calculationSection .calculation-payout-amount strong { font-size: 21px; color: #116b43; white-space: nowrap; }
#calculationSection .calculation-payout-amount small:first-child { display: none; }
#calculationSection .calculation-payout-completion { font-weight: 700; font-variant-numeric: tabular-nums; }
#calculationSection .is-met { color: #116b43; }
#calculationSection .is-below { color: #a64c13; }
#calculationSection .calculation-breakdown { padding: 20px; border: 0; border-radius: 0; background: #f8faf9; }
#calculationSection .calculation-breakdown > .btn { justify-self: start; max-width: 100%; }
#calculationSection .calculation-explanation-text { padding: 12px; border-left: 3px solid #168268; background: #eef5f1; color: #243b32; }
#calculationSection .calculation-model-explanation > summary { cursor: pointer; padding-block: 12px; font-size: 14px; font-weight: 600; }
#calculationSection .calculation-model-explanation .calculation-explanation-text { font-size: 14px; line-height: 1.5; }
#calculationSection .calculation-workflow-method { margin-top: 20px; border-block: 1px solid #dfe5e7; padding: 16px 0; }
#calculationSection .calculation-workflow-method > summary { font-weight: 600; cursor: pointer; }
#calculationSection .calculation-workflow-issues { padding-block: 20px; }
@media (max-width: 1100px) {
  #calculationSection .calculation-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #calculationSection .calculation-model-field { grid-column: 1 / -1; }
  #calculationSection #calculationSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #calculationSection #calculationSummary .metric-card { padding-block: 12px; }
  #calculationSection #calculationSummary .metric-card:nth-child(even) { border-right: 0; }
  #calculationSection .calculation-payout-columns { display: none; }
  #calculationSection .calculation-payout-row > summary { grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr); gap: 10px 16px; }
  #calculationSection .calculation-payout-person { grid-area: 1 / 1; }
  #calculationSection .calculation-payout-plan { grid-area: 2 / 1; }
  #calculationSection .calculation-payout-amount { grid-area: 1 / 2; }
  #calculationSection .calculation-payout-completion { grid-area: 2 / 2; text-align: right; }
  #calculationSection .calculation-payout-completion::before { content: 'План '; font-size: 13px; font-weight: 400; }
  #calculationSection .calculation-payout-completion.is-unconfigured::before { content: none; }
  #calculationSection .calculation-payout-amount small:first-child { display: block; }
}
@media (max-width: 700px) {
  #calculationSection .calculation-controls { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  #ruleForm .rule-form-footer { display: grid; grid-template-columns: minmax(70px, .7fr) minmax(0, 1.3fr); gap: 8px; }
  #ruleForm .rule-form-footer > .btn { width: 100%; margin: 0; min-height: 44px; font-size: 14px; }
  #ruleSubmitButton { grid-column: 1 / -1; grid-row: 1; }
  #calculationSection > .card > .card-body { padding: 14px; }
  #calculationSection #calculationSummary { padding-block: 8px; }
  #calculationSection #calculationSummary .metric-card { padding: 12px; }
  #calculationSection #calculationSummary .metric-card strong { font-size: 18px; overflow-wrap: anywhere; }
  #calculationSection #calculationSummary .metric-card span { font-size: 13px; }
  #calculationSection .calculation-payout-row > summary { padding: 16px 12px; grid-template-columns: minmax(0, 1fr) minmax(115px, .85fr); }
  #calculationSection .calculation-payout-person strong { font-size: 16px; }
  #calculationSection .calculation-payout-amount strong { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
  #calculationSection .calculation-payout-plan strong { display: block; }
  #calculationSection .calculation-breakdown { padding: 12px; }
  #calculationSection .calculation-breakdown-line { grid-template-columns: 1fr; gap: 4px; }
  #calculationSection .calculation-breakdown-stores { display: block; }
  #calculationSection .calculation-workflow-heading { padding-inline: 12px; }
  #calculationSection #calculationActions > .btn { width: 100%; min-height: 44px; }
}
@media (max-width: 400px) {
  #calculationSection .calculation-type-button { padding-inline: 8px; }
  #calculationSection .calculation-type-button span { font-size: 14px; }
}
@media (max-width: 379px) {
  #calculationSection #calculationSummary { grid-template-columns: minmax(0, 1fr); }
  #calculationSection #calculationSummary .metric-card { border-right: 0; border-bottom: 1px solid #dfe5e7; }
  #calculationSection #calculationSummary .metric-card:last-child { border-bottom: 0; }
}
@media (max-width: 379px) {
  #calculationSection .calculation-period-picker > .period-picker-trigger { grid-column: 1 / -1; }
  #calculationPreviousPeriodButton { grid-column: 2; }
  #calculationNextPeriodButton { grid-column: 3; }
}