/* File path: /plugins/afed-payments-disbursement/assets/css/portal.css */

/* =======================================================================
   AFED DESIGN SYSTEM - structural tokens (redesign session)
   =======================================================================
   Same structural token block as the Membership plugin's portal.css -
   see that file's own comment for the full explanation. Brand colors
   (--afed-primary/--afed-accent) are NOT redeclared here - they're
   already set by the Membership plugin's portal.css, which always loads
   first in the shared portal shell (AFED_Portal_Router), and per-tenant
   overrides are injected there too. This file only needs its OWN
   structural tokens so it stays robust even if loaded standalone.
   ======================================================================= */
:root {
	--afed-bg: #f3f4f6;
	--afed-surface: #ffffff;
	--afed-surface-alt: #f6f7f9;
	--afed-border: #e2e4e9;
	--afed-border-strong: #cbd0d8;
	--afed-text: #1a1d29;
	--afed-text-muted: #5b6270;
	--afed-text-faint: #8b93a1;
	--afed-primary-tint: #eef1f8;
	--afed-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.04);
	--afed-radius: 10px;
	--afed-radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--afed-bg: #12141c;
		--afed-surface: #1a1d29;
		--afed-surface-alt: #21242f;
		--afed-border: #2e3240;
		--afed-border-strong: #3a3f4f;
		--afed-text: #e8e9ed;
		--afed-text-muted: #a3a9b8;
		--afed-text-faint: #767c8c;
		--afed-primary-tint: #232a3f;
		--afed-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25);
	}
}

[data-theme="dark"] {
	--afed-bg: #12141c;
	--afed-surface: #1a1d29;
	--afed-surface-alt: #21242f;
	--afed-border: #2e3240;
	--afed-border-strong: #3a3f4f;
	--afed-text: #e8e9ed;
	--afed-text-muted: #a3a9b8;
	--afed-text-faint: #767c8c;
	--afed-primary-tint: #232a3f;
	--afed-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25);
}
/* ======================================================================= */

.afed-pay-breakdown {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 20px 24px;
	max-width: 420px;
	margin-bottom: 20px;
}

.afed-pay-breakdown-table {
	width: 100%;
	border-collapse: collapse;
}

.afed-pay-breakdown-table th,
.afed-pay-breakdown-table td {
	text-align: left;
	padding: 8px 4px;
	font-weight: normal;
	font-size: 15px;
}

.afed-pay-breakdown-table td {
	text-align: right;
}

.afed-pay-breakdown-total th,
.afed-pay-breakdown-total td {
	border-top: 1px solid var(--afed-border);
	padding-top: 12px;
	font-weight: 700;
	font-size: 17px;
}

.afed-pay-gateway-form {
	margin-bottom: 32px;
}

.afed-pay-gateway-form .afed-btn {
	margin-right: 10px;
	margin-top: 10px;
}

.afed-pay-national-card {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 20px 24px;
	max-width: 560px;
	margin-bottom: 28px;
}

.afed-pay-national-card h2 {
	margin-top: 0;
	font-size: 17px;
}

.afed-pay-national-card h3 {
	font-size: 14px;
	margin-top: 20px;
}

.afed-pay-outstanding-amount {
	font-size: 30px;
	font-weight: 700;
	margin: 4px 0 8px;
}

.afed-pay-national-card form {
	margin-top: 14px;
}

.afed-pay-national-card label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 4px;
}

.afed-pay-national-card input[type="text"] {
	width: 100%;
	max-width: 320px;
	padding: 8px 10px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
	margin-bottom: 10px;
}

@media (max-width: 680px) {
	.afed-pay-breakdown {
		max-width: 100%;
		padding: 16px 18px;
	}

	.afed-pay-gateway-form .afed-btn {
		display: block;
		width: 100%;
		margin-right: 0;
	}
}

/* =======================================================================
   Payout Account (lightweight-approval session) - the bank + account
   number + "Verify Account" AJAX resolve flow, and the hierarchical-
   fallback status messaging shown per node (AFED_Portal_Pay_Subaccount).
   ======================================================================= */
.afed-portal-notice {
	border-radius: var(--afed-radius-sm);
	padding: 10px 14px;
	margin: 12px 0;
	font-size: 14px;
}

.afed-portal-notice-success {
	background: #e8f8ee;
	color: #1a7f37;
}

.afed-portal-notice-error {
	background: #fce9ea;
	color: #a01822;
}

.afed-payout-optional-details {
	margin-top: 14px;
	border-top: 1px solid var(--afed-border);
	padding-top: 12px;
}

.afed-payout-optional-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: var(--afed-text-muted);
}

.afed-payout-optional-details[open] summary {
	margin-bottom: 12px;
}

.afed-payout-request-form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin: 12px 0 4px;
}

.afed-payout-request-form select,
.afed-payout-request-form input[type="text"] {
	width: 100%;
	max-width: 320px;
	padding: 8px 10px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
	background: var(--afed-surface);
	color: var(--afed-text);
}

.afed-payout-verify-btn {
	margin-top: 14px;
}

.afed-payout-verify-status {
	margin-left: 10px;
	font-size: 13px;
	color: var(--afed-text-muted);
}

.afed-payout-confirm-box {
	margin-top: 14px;
	padding: 14px 16px;
	background: var(--afed-primary-tint);
	border-radius: var(--afed-radius-sm);
}

.afed-payout-confirm-box p {
	margin: 0 0 10px;
	font-size: 14px;
}

.afed-payout-confirm-name {
	font-size: 15px;
}

@media (max-width: 680px) {
	.afed-payout-request-form select,
	.afed-payout-request-form input[type="text"] {
		max-width: 100%;
	}
}

/* =======================================================================
   Chapter Dues Delegation session - the portal's own "Dues" page
   (AFED_Portal_Pay_Dues_Config), State and Chapter views alike. Mirrors
   the equivalent wp-admin classes' visual language (afed-pay-chapter-
   payout-card, afed-pay-add-term-form) but as fresh rules, since portal
   and admin never share a stylesheet.
   ======================================================================= */
.afed-pay-chapter-payout-card {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 20px 24px;
	margin-bottom: 20px;
}

.afed-pay-chapter-payout-card h2 {
	margin-top: 0;
	font-size: 17px;
}

.afed-pay-add-term-form {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--afed-border);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
}

.afed-pay-add-term-form label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	font-size: 13px;
	gap: 4px;
}

.afed-pay-add-term-form input[type="text"],
.afed-pay-add-term-form input[type="number"] {
	padding: 7px 10px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
	background: var(--afed-surface);
	color: var(--afed-text);
}

.afed-pay-term-row {
	padding: 12px 0;
	border-bottom: 1px solid var(--afed-border);
}

.afed-pay-term-row:last-child {
	border-bottom: none;
}

.afed-pay-inline-amount-form {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.afed-pay-inline-amount-form input[type="number"] {
	padding: 5px 8px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
}

@media (max-width: 680px) {
	.afed-pay-add-term-form {
		flex-direction: column;
		align-items: stretch;
	}
}