#salaryRulesModal {
  padding: 18px;
  align-items: center;
}

#salaryRulesModal .salary_rules_modal {
  width: min(760px, calc(100vw - 36px));
  max-width: 760px;
  max-height: min(820px, calc(100vh - 36px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(9, 42, 79, .24);
  background: #fff;
}

.salary_rules_modal_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #edf1f6;
}

.salary_rules_modal_head h3 {
  margin: 2px 0 0;
  color: #172033;
  font-size: 20px;
}

.salary_rules_eyebrow {
  color: #54708f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.salary_rules_close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #dde5ef;
  border-radius: 10px;
  color: #5e6b7f;
  background: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.salary_rules_close:hover { color: #0d4d8b; background: #f2f7fc; }
.salary_rules_close:active { transform: scale(.96); }

#salaryRulesStatus {
  min-height: 0;
  margin: 12px 24px 0;
}

#salaryRulesList {
  max-height: calc(min(820px, 100vh - 36px) - 102px);
  padding: 14px 24px 24px;
  overflow: auto;
}

#salaryRulesList .salary_rule_card {
  margin: 0;
  padding: 0;
  border: 1px solid #dbe5f0;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(31, 61, 96, .07);
  overflow: hidden;
}

#salaryRulesList .salary_rule_card_head {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: baseline;
  margin: 0;
  padding: 15px 18px;
  border: 0;
  color: #172033;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

#salaryRulesList .salary_rule_card_head:hover { background: #f6f9fc; }
#salaryRulesList .salary_rule_card_head:active { transform: scale(.995); }
#salaryRulesList .salary_rule_person { display: grid; gap: 3px; min-width: 0; }
#salaryRulesList .salary_rule_card_head strong { color: #172033; font-size: 15px; }
#salaryRulesList .salary_rule_person small { color: #708096; font-size: 12px; font-variant-numeric: tabular-nums; }
#salaryRulesList .salary_rule_summary { overflow: hidden; max-width: 190px; color: #62758c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#salaryRulesList .salary_rule_chevron { color: #6c7c91; font-size: 20px; line-height: 1; transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
#salaryRulesList .salary_rule_card_head[aria-expanded="true"] { color: #0d4d8b; background: #f7fbff; border-bottom: 1px solid #edf1f6; }
#salaryRulesList .salary_rule_card_head[aria-expanded="true"] .salary_rule_chevron { transform: rotate(180deg); }

#salaryRulesList .salary_rule_card_body {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: #fff;
}

#salaryRulesList .salary_rule_card .field { gap: 6px; margin: 0; }

#salaryRulesList .salary_rule_card .field > .label {
  color: #607087;
  font-size: 12px;
  font-weight: 700;
}

#salaryRulesList .salary_rule_card input,
#salaryRulesList .salary_rule_card select {
  min-height: 42px;
  border-color: #dce4ee;
  border-radius: 10px;
  background: #fff;
}

#salaryRulesList .salary_rule_card .salary_toggle {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #e3eaf2;
  border-radius: 10px;
  background: #f8fafc;
}

#salaryRulesList .salary_rule_card .salary_toggle span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2c3b52;
  font-size: 14px;
}

#salaryRulesList .salary_rule_card .salary_toggle input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #0d5ca6;
}

#salaryRulesList .salary_crm_import_summary,
#salaryRulesList .crm_accruals {
  padding: 14px;
  border: 1px solid #dce8f4;
  border-radius: 12px;
  background: #f6f9fc;
}

#salaryRulesList .salary_crm_import_summary .hint { line-height: 1.6; }

#salaryRulesList .crm_lines { gap: 8px; }

#salaryRulesList .crm_line input { min-width: 0; }

#salaryRulesList [data-salary-rule-save] {
  min-height: 46px;
  margin-top: 2px;
  border-radius: 11px;
  box-shadow: 0 5px 12px rgba(7, 72, 134, .18);
}

@media (max-width: 600px) {
  #salaryRulesModal { padding: 10px; }
  #salaryRulesModal .salary_rules_modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 14px; }
  .salary_rules_modal_head { padding: 18px 18px 14px; }
  #salaryRulesStatus { margin-inline: 18px; }
  #salaryRulesList { max-height: calc(100vh - 112px); padding: 12px 18px 18px; }
  #salaryRulesList .salary_rule_card { padding: 0; }
  #salaryRulesList .salary_rule_card_head { grid-template-columns: minmax(0, 1fr) 18px; padding: 14px; }
  #salaryRulesList .salary_rule_summary { display: none; }
  #salaryRulesList .salary_rule_card_body { padding: 14px; }
}