/* FlexPay UI baseline
 * Scoped under .flexpay-root to avoid impacting non-FlexPay React mounts.
 */

.flexpay-root {
	font-family: 'Segoe UI', SegoeUI, Arial, sans-serif;
	font-size: 16px;
	color: #343a40;
}

.flexpay-root.flexpay-inlineRoot {
	display: inline-block;
}

/* Make typography inherit the base color unless explicitly overridden. */
.flexpay-root .MuiTypography-root {
	color: inherit;
}

/* Buttons: unify color + spacing across FlexPay. */
.flexpay-root .MuiButton-root {
	border-radius: 6px;
	padding: 6px 14px;
	text-transform: none;
	font-weight: 600;
}

.flexpay-root .MuiButton-contained:not([disabled]),
.flexpay-root input:checked + .slider {
	background-color: #038dd6 !important;
}
.flexpay-root .MuiButton-contained:not([disabled]):hover {
	background-color: #0278b8 !important;
}

.flexpay-root .MuiButton-outlined:not([disabled]) {
	border-color: #038dd6 !important;
	color: #038dd6 !important;
}
.flexpay-root .MuiButton-outlined:not([disabled]):hover {
	border-color: #0278b8 !important;
	background-color: rgba(3, 141, 214, 0.06) !important;
}

.flexpay-root .MuiButton-text:not([disabled]) {
	color: #038dd6 !important;
}
.flexpay-root .MuiButton-text:not([disabled]):hover {
	background-color: rgba(3, 141, 214, 0.06) !important;
}

/* RecurringPay uses legacy HTML buttons (not MUI). Keep them on-brand inside FlexPay. */
.flexpay-root .pay-search-button,
.flexpay-root .pay-report-button {
	background-color: #038dd6 !important;
	color: #ffffff;
	text-transform: none !important;
	font-weight: 600 !important;
}

.flexpay-root .pay-search-button:hover,
.flexpay-root .pay-report-button:hover {
	background-color: #0278b8 !important;
}

.flexpay-root .pay-search-button:disabled,
.flexpay-root .pay-report-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Common header row above grids/tables (matches the "payment log" general spacing). */
.flexpay-root .flexpay-headerRow {
	margin-bottom: 24px;
}

/* Grid baseline tweaks (shared across statement report + payment log). */
.flexpay-root .flexpay-grid {
	margin-top: 24px;
}
.flexpay-root .flexpay-grid .MuiTablePagination-displayedRows {
	margin: 0;
}

.flexpay-root .flexpay-searchButton {
	margin-top: 24px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

/* Balance-due actions: avoid forcing horizontal space; wrap on narrow widths. */
.flexpay-root .flexpay-balanceDueActions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.flexpay-root .flexpay-sendAllButton.has-indicator::after {
	content: '';
	border-width: 5px;
	border-style: solid;
	border-color: var(--warning);
	border-radius: 50%;
	position: absolute;
	top: -3px;
	right: -4px;
	display: block;
}

/* Keep the "Send All Statements" dialog compact and centered. */
.flexpay-root .flexpay-sendAllStatementsDialogPaper {
	width: auto;
	max-width: 560px;
}

/* Accordions used for Account Management + Settings tabs. */
.flexpay-root .flexpay-accordion {
	margin-bottom: 16px;
}

.flexpay-root .flexpay-accordionSummary {
	background-color: #f5f5f5;
	color: #343a40;
}
.flexpay-root .flexpay-accordionSummary:hover {
	background-color: #e8e8e8;
}

.flexpay-root .flexpay-accordionSummary.is-expanded {
	background-color: #e0e0e0;
}
.flexpay-root .flexpay-accordionSummary.is-expanded:hover {
	background-color: #d0d0d0;
}

/* Placeholder file to ensure CSS imports are working */

.MuiDataGrid {
  display: block;
}