/* Scoped to payment views, including the panel embedded in visit editing. */
.payment-page, .payment-card { color: #273d53; }
.payment-panel.panel { border: 1px solid #e1e8ef; border-radius: 12px; overflow: hidden; }
.payment-panel > .panel-heading.payment-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: #fff; border-bottom: 1px solid #e8edf3; }
.payment-heading h3 { margin: 0 0 8px; color: #253c54; font-size: 20px; line-height: 1.4; }
.payment-patient { font-size: 14px; font-weight: 600; }
.payment-panel > .panel-body { padding: 24px; }
.payment-card { min-width: 0; margin-bottom: 20px; padding: 24px; background: #fff; border: 1px solid #e1e8ef; border-radius: 12px; box-shadow: 0 4px 18px rgba(37, 58, 82, .035); }
.payment-page .payment-section-heading, .payment-card .payment-section-heading { margin: 0 0 18px; color: #253c54; font-size: 16px; font-weight: 700; line-height: 1.5; }
.payment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 20px; color: #63758a; font-size: 13px; }
.payment-meta strong { color: #31475e; font-weight: 600; }
.payment-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 20px 0 26px; }
.payment-total { min-width: 0; padding: 18px 20px; color: #63758a; background: #f6f8fb; border: 1px solid #e5ebf2; border-radius: 9px; font-size: 13px; }
.payment-total strong { display: block; margin-top: 7px; color: #253c54; font-size: 24px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payment-total--remaining { background: #edf5fb; border-color: #d6e7f4; }
.payment-total--remaining strong { color: #276b99; }
.payment-status { display: inline-block; max-width: 100%; margin: 2px 4px 2px 0; padding: 5px 10px; color: #53667a; background: #edf1f5; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; vertical-align: middle; }
.payment-status--paid, .payment-status--active { color: #236447; background: #eaf6ef; }
.payment-status--partial { color: #805b17; background: #fff5dc; }
.payment-status--unpaid { color: #355a83; background: #ecf3fb; }
.payment-status--overdue { color: #9a3737; background: #fff0ee; }
.payment-status--voided, .payment-status--superseded { color: #657487; background: #f0f2f5; }
.payment-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid #e8edf3; }
.payment-form, .payment-filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 8px; }
.payment-form .payment-field, .payment-filter-form .payment-field { display: block; flex: 1 1 160px; min-width: 0; margin: 0; color: #31475e; font-size: 13px; font-weight: 600; line-height: 1.6; }
.payment-form .payment-field--reason { flex-basis: 280px; }
.payment-page .form-control, .payment-card .form-control { width: 100%; min-width: 0; height: 44px; margin-top: 7px; padding: 10px 12px; color: #273d53; border: 1px solid #cad6e2; border-radius: 7px; box-shadow: none; font-size: 14px; font-weight: 400; }
.payment-page .form-control:focus, .payment-card .form-control:focus { border-color: #4388bc; box-shadow: 0 0 0 3px rgba(60, 141, 188, .12); }
.payment-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.payment-form-actions label { margin: 0; }
.payment-page .btn, .payment-card .btn { min-height: 44px; padding: 11px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; white-space: normal; }
.payment-page .btn i { margin-right: 6px; }
.payment-page .btn-primary, .payment-card .btn-primary { background: #327cae; border-color: #327cae; }
.payment-page .btn-primary:hover, .payment-page .btn-primary:focus, .payment-card .btn-primary:hover, .payment-card .btn-primary:focus { background: #276b99; border-color: #276b99; }
.payment-page .btn-default, .payment-card .btn-default { color: #35516c; background: #fff; border-color: #ccd8e3; }
.payment-page .btn:disabled { opacity: .5; cursor: not-allowed; }
/* Bootstrap's later .btn display rule otherwise overrides the native hidden attribute. */
[data-payment-panel] [hidden] { display: none !important; }
/* A confirmed response supersedes the displayed snapshot while navigation completes. */
.payment-panel[data-payment-resolved="true"] > .panel-body > :not(.payment-feedback) { display: none !important; }
.payment-panel .payment-feedback { margin: 0 0 24px; padding: 18px 20px; color: #35516c; background: #edf5fb; border: 1px solid #d6e7f4; border-radius: 9px; }
.payment-panel .payment-feedback[data-payment-feedback-state="uncertain"], .payment-panel .payment-feedback[data-payment-feedback-state="stale"] { color: #79531b; background: #fff7e6; border-color: #edd7aa; }
.payment-panel .payment-feedback[data-payment-feedback-state="saved"] { color: #236447; background: #edf7f1; border-color: #d5e9dd; }
.payment-panel .payment-feedback[data-payment-feedback-state="rejected"] { color: #943b3b; background: #fff2f0; border-color: #edceca; }
.payment-feedback .payment-feedback-message { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.payment-feedback .payment-feedback-details { margin: 8px 0 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.payment-feedback .payment-feedback-details:empty { display: none; }
.payment-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.payment-feedback-actions .btn { max-width: 100%; }
.payment-feedback .payment-feedback-link { display: inline-block; margin-top: 14px; color: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; }
.payment-feedback .btn-warning { color: #79531b; background: #fff; border-color: #d9bd87; }
.payment-feedback .btn-warning:hover, .payment-feedback .btn-warning:focus { background: #fff0cc; border-color: #bc9859; }
.payment-page .payment-muted, .payment-card .payment-muted { color: #63758a; font-size: 13px; line-height: 1.7; }
.payment-settled { display: flex; align-items: center; gap: 10px; margin: 0; padding: 15px 18px; color: #236447; background: #edf7f1; border: 1px solid #d5e9dd; border-radius: 8px; line-height: 1.6; }
.payment-disclosure { margin-top: 12px; border: 1px solid #dfe7ef; border-radius: 8px; background: #fff; }
.payment-disclosure > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 12px 16px; color: #35516c; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.payment-disclosure > summary::-webkit-details-marker { display: none; }
.payment-disclosure > summary::before { content: '+'; width: 14px; flex: 0 0 14px; font-size: 18px; font-weight: 400; text-align: center; }
.payment-disclosure[open] > summary::before { content: '−'; }
.payment-disclosure > summary:hover { background: #f5f8fb; }
.payment-disclosure > summary:focus-visible { outline: 2px solid #4388bc; outline-offset: -2px; border-radius: 7px; }
.payment-disclosure[open] > summary { border-bottom: 1px solid #e8edf3; }
.payment-disclosure-body { padding: 18px; }
.payment-disclosure--danger > summary { color: #954343; }
.payment-disclosure--danger .btn-primary { background: #a94442; border-color: #a94442; }
.payment-disclosure--danger .btn-primary:hover, .payment-disclosure--danger .btn-primary:focus { background: #883735; border-color: #883735; }
.payment-entry { padding: 18px; margin-bottom: 14px; border: 1px solid #e1e8ef; border-radius: 9px; }
.payment-entry-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.payment-entry-amount { margin-right: 12px; font-size: 18px; font-variant-numeric: tabular-nums; }
.payment-activity { margin-left: 6px; padding: 0 0 18px 18px; border-left: 2px solid #e5ebf2; overflow-wrap: anywhere; }
.payment-activity p { margin: 0 0 5px; font-size: 13px; line-height: 1.7; }
.payment-activity:last-child { padding-bottom: 0; }
.payment-page .payment-table, .payment-card .payment-table { width: 100%; margin-bottom: 0; font-size: 13px; }
.payment-page .payment-table > thead > tr > th, .payment-card .payment-table > thead > tr > th { padding: 12px; background: #f5f7fb; border-bottom: 1px solid #e1e8ef; color: #63758a; font-size: 11px; letter-spacing: .4px; }
.payment-page .payment-table > tbody > tr > td, .payment-card .payment-table > tbody > tr > td { padding: 14px 12px; vertical-align: middle; border-top: 1px solid #edf1f5; }
.payment-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.payment-page .table-responsive, .payment-card .table-responsive { margin-bottom: 0; border: 0; }
.payment-filter-form { margin-bottom: 24px; }
.payment-empty { padding: 20px 0; color: #63758a; font-size: 13px; }
@media (max-width: 767px) {
    .payment-panel > .panel-heading.payment-heading, .payment-panel > .panel-body, .payment-card { padding: 18px; }
    .payment-heading > .btn { width: 100%; }
    .payment-meta { gap: 10px; }
    .payment-meta > span { width: 100%; }
    .payment-totals { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .payment-total { padding: 14px 16px; }
    .payment-total strong { font-size: 22px; }
    .payment-form .payment-field, .payment-filter-form .payment-field { flex-basis: 100%; }
    .payment-form-actions { width: 100%; }
    .payment-form-actions .btn { width: 100%; }
    .payment-panel .payment-feedback { padding: 16px; }
    .payment-feedback-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
    .payment-feedback-actions .btn { width: 100%; margin-top: 0; }
    .payment-page .form-control, .payment-card .form-control { font-size: 16px; }
    .payment-entry, .payment-disclosure-body { padding: 14px; }
    .payment-section { margin-top: 22px; padding-top: 20px; }
}