/* Shared contract-total / 12 settlement and rental-entry modal. */
.settlement-overview,
.rental-form,
.rental-preview { min-width: 0; }

.settlement-overview { display: grid; gap: 22px; margin-top: 24px; }
.settlement-policy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 23px 25px;
  border: 1px solid #d7e1f7;
  border-radius: 13px;
  background: linear-gradient(115deg, #edf2ff, #f8faff);
}
.settlement-policy h2,
.settlement-policy h3 { color: #2c456f; font-size: 18px; line-height: 1.5; letter-spacing: -.5px; }
.settlement-policy p { max-width: 650px; margin-top: 7px; color: #5e7496; font-size: 13px; line-height: 1.85; word-break: keep-all; }
.settlement-equation {
  display: grid;
  gap: 5px;
  padding: 15px 20px;
  border: 1px solid #d4def7;
  border-radius: 10px;
  background: #fff;
  color: #3456bf;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.settlement-equation small,
.settlement-equation > span { color: #677c9f; font-size: 12px; font-weight: 500; line-height: 1.8; letter-spacing: 0; }
.settlement-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.settlement-metric {
  min-width: 0;
  padding: 20px;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 22px #243b6105;
}
.settlement-metric > span,
.settlement-metric dt { display: block; margin: 0; color: #6a7e9c; font-size: 12px; line-height: 1.7; }
.settlement-metric strong,
.settlement-metric dd { display: block; margin: 11px 0 7px; color: #2d4668; font-size: 26px; font-weight: 800; line-height: 1.4; letter-spacing: -.7px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.settlement-metric small { display: block; color: #7a8ba5; font-size: 11px; line-height: 1.75; }
.settlement-metric.highlight,
.settlement-metric[data-tone="commission"] { border-color: #d0dcfb; background: #eff4ff; }
.settlement-metric.highlight strong,
.settlement-metric[data-tone="commission"] strong { color: #3657c3; }
.settlement-metric.negative strong { color: #a35160; }
.rental-form h2,
.rental-preview h2 { color: #304867; font-size: 17px; line-height: 1.6; letter-spacing: -.4px; }
.rental-form h3 { color: #3d5577; font-size: 15px; line-height: 1.65; }
.settlement-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.settlement-tabs .compare-toggle { min-height: 38px; padding: 6px 8px; white-space: normal; line-height: 1.65; }
.settlement-role-note { color: #6d819f; font-size: 12px; line-height: 1.85; word-break: keep-all; }
.settlement-role-note strong { color: #405f91; }
.settlement-month { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #5a7194; font-size: 13px; }
.settlement-month label { font-weight: 650; }
.settlement-month .input,
.settlement-month select,
.settlement-month input { width: auto; max-width: 100%; min-height: 42px; margin: 0; font-size: 13px; }
.rental-form { display: grid; gap: 19px; }
.rental-form .form-grid { gap: 18px; }
.rental-form > p { color: #6b809e; font-size: 13px; line-height: 1.85; word-break: keep-all; }
.rental-form .field { color: #5c7294; font-size: 13px; }
.rental-form .input { min-height: 44px; font-size: 14px; }
.rental-preview {
  position: static;
  padding: 22px;
  border: 1px solid #dce5f3;
  border-radius: 12px;
  background: #f8faff;
  color: #637b9e;
  font-size: 13px;
  line-height: 1.8;
}
.rental-preview > p { margin-top: 9px; font-size: 12px; line-height: 1.85; }
.rental-preview dl { display: grid; gap: 14px; margin: 20px 0; }
.rental-preview dl > div { display: flex; justify-content: space-between; gap: 14px; min-width: 0; }
.rental-preview dt { color: #768aa8; }
.rental-preview dd { margin: 0; color: #3a5884; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.rental-total { display: grid; gap: 7px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #dce5f3; color: #405f94; font-size: 13px; }
.rental-total strong { color: #3457c4; font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rental-total small { color: #7285a4; font-size: 11px; line-height: 1.8; }
.settlement-table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid #e1e7f0; border-radius: 10px; }
.settlement-table { width: 100%; min-width: 940px; border-collapse: collapse; background: #fff; text-align: left; color: #526d94; font-size: 12px; line-height: 1.75; font-variant-numeric: tabular-nums; }
.settlement-table th { padding: 13px 14px; border-bottom: 1px solid #dfe7f2; background: #f4f7fc; color: #657d9f; font-size: 11px; font-weight: 650; vertical-align: middle; white-space: nowrap; }
.settlement-table td { padding: 15px 14px; border-bottom: 1px solid #e7edf5; vertical-align: middle; }
.settlement-table tbody tr:last-child td { border-bottom: 0; }
.settlement-table td strong { display: block; color: #344f78; font-weight: 650; }
.settlement-table td small { display: block; margin-top: 4px; color: #7a8eab; font-size: 11px; line-height: 1.75; }
.settlement-table :is(.numeric, .money, [data-type="money"]) { text-align: right; white-space: nowrap; }
.settlement-table .btn { min-height: 35px; font-size: 11px; }
.settlement-table .text-button { min-height: 32px; font-size: 11px; }
.settlement-disclosure { padding: 16px 18px; border: 1px solid #dce5f4; border-radius: 10px; background: #f3f7ff; color: #617b9f; font-size: 13px; line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
.settlement-disclosure strong { color: #3d5f95; }
.settlement-disclosure p + p { margin-top: 10px; }
.settlement-disclosure summary { min-height: 30px; color: #4b6b9d; font-size: 13px; font-weight: 650; cursor: pointer; }
.settlement-disclosure summary + p { margin-top: 12px; }
.settlement-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border-radius: 6px; border: 1px solid #dce5f4; background: #f0f5fd; color: #57739e; font-size: 11px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.settlement-status.pending { border-color: #eddfbc; background: #fff8e9; color: #977330; }
.settlement-status.confirmed,
.settlement-status.paid { border-color: #cfe5d9; background: #eef8f2; color: #467e63; }
.settlement-status.voided,
.settlement-status.adjustment { border-color: #eedce1; background: #faf0f2; color: #a16473; }
.settlement-alert { padding: 15px 18px; border: 1px solid #eaddbe; border-radius: 9px; background: #fff9eb; color: #8c713c; font-size: 13px; line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
.settlement-alert strong { color: #806029; }
.settlement-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.settlement-controls > div { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; }
.settlement-controls .btn { min-height: 40px; font-size: 12px; }
.settlement-empty { display: grid; justify-items: center; gap: 12px; padding: 28px 20px; border: 1px dashed #dbe3f0; border-radius: 10px; background: #f9fbff; color: #7b8faa; font-size: 13px; line-height: 1.85; text-align: center; }

@media (max-width: 1250px) {
  .settlement-summary-grid { gap: 12px; }
  .settlement-metric { padding: 18px 16px; }
  .settlement-metric strong, .settlement-metric dd { font-size: 24px; }
}
@media (max-width: 1050px) {
  .settlement-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .settlement-overview { gap: 19px; margin-top: 20px; }
  .settlement-policy { padding: 21px; }
  .settlement-equation { font-size: 22px; }
  .settlement-controls { align-items: flex-start; }
}
@media (max-width: 560px) {
  .settlement-overview { gap: 17px; }
  .settlement-policy { align-items: stretch; flex-direction: column; gap: 15px; padding: 19px 17px; }
  .settlement-policy h2, .settlement-policy h3 { font-size: 17px; }
  .settlement-policy p { font-size: 13px; }
  .settlement-equation { padding: 14px 16px; font-size: 22px; }
  .settlement-summary-grid { gap: 10px; }
  .settlement-metric { padding: 16px 13px; border-radius: 10px; }
  .settlement-metric > span, .settlement-metric dt { font-size: 11px; }
  .settlement-metric strong, .settlement-metric dd { margin-top: 9px; font-size: 23px; }
  .settlement-metric small { font-size: 10px; }
  .settlement-tabs { gap: 6px; }
  .settlement-role-note { font-size: 12px; }
  .settlement-month { width: 100%; gap: 8px; }
  .settlement-month .input, .settlement-month select, .settlement-month input { flex: 1; min-width: 0; font-size: 16px; }
  .rental-form { gap: 17px; }
  .rental-form .form-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .rental-form .input { min-height: 46px; font-size: 16px; }
  .rental-preview { padding: 20px 18px; }
  .rental-total strong { font-size: 26px; }
  .rental-form h2, .rental-preview h2 { font-size: 16px; }
  .settlement-table { font-size: 12px; }
  .settlement-table th { font-size: 11px; padding: 12px; }
  .settlement-table td { padding: 14px 12px; }
  .settlement-controls { gap: 13px; }
  .settlement-controls .btn { min-height: 42px; font-size: 12px; }
  .settlement-disclosure, .settlement-alert { padding: 14px 15px; font-size: 12px; }
}
@media (max-width: 365px) {
  .settlement-metric strong, .settlement-metric dd { font-size: 21px; }
  .settlement-equation { font-size: 20px; }
}

#rental-monthly-fields[hidden],
#rental-total-field[hidden],
.rental-form [hidden] { display: none !important; }