/* ANPA Socios - Personal area styles.
 *
 * Uses Blocksy theme CSS custom properties (--theme-*) so the app
 * inherits the site's design system. Semantic colours (errors,
 * warnings, admin-only actions) are defined as plugin-level CSS
 * custom properties so they can be overridden from the theme or a
 * child theme without editing the CSS file.
 *
 * @since  1.1.0
 * @package ANPA_Socios
 */

/* ── Plugin-level semantic colour tokens ─────────────────────────── */
#anpa-area {
	--anpa-error-bg: #fff1f0;
	--anpa-error-text: #7a271a;
	--anpa-error-border: #b42318;
	--anpa-warning-bg: #fffbeb;
	--anpa-warning-text: #7c2d12;
	--anpa-warning-border: #d97706;
	--anpa-admin-action-bg: #fff7ed;
	--anpa-admin-action-border: #d97706;
	--anpa-admin-action-text: #9a3412;
	--anpa-admin-action-hover-bg: #fed7aa;
	--anpa-admin-action-hover-border: #b45309;
	--anpa-admin-action-hover-text: #7c2d12;
	--anpa-danger-bg: #b42318;
	--anpa-danger-hover-bg: #7a271a;
	--anpa-pendente-bg: #e6f0fb;
	--anpa-baixa-pending-bg: #fffbeb;
	--anpa-baixa-bg: #fde8e8;
	--anpa-baixa-text: #7a271a;
	--anpa-ocupacion-cheo-bg: #fff7ed;
	--anpa-ocupacion-cheo-text: #9a3412;
	--anpa-ocupacion-cheo-border: #d97706;
	--anpa-idle-bg: #fffbeb;
	--anpa-idle-text: #7c2d12;
	--anpa-idle-border: #d97706;
	--anpa-idle-btn-bg: #d97706;
	--anpa-idle-btn-hover-bg: #b45309;
	--anpa-copy-bg: #e0f2fe;
	--anpa-copy-border: #0284c7;
	--anpa-copy-text: #075985;
	--anpa-copy-hover-bg: #bae6fd;
}

#anpa-area {
	max-width: 720px;
	margin: 1.5rem auto;
	font-family: inherit;
}

/* Admin panel needs more room: widen on larger screens to avoid scroll. */
#anpa-area.anpa-area-wide {
	max-width: min(1180px, 96vw);
}

#anpa-area .anpa-area-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.25rem;
	border: 1px solid var(--theme-border-color);
	border-radius: 14px;
	background: var(--theme-palette-color-8);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#anpa-area .anpa-area-card[hidden],
#anpa-area .anpa-area-notice[hidden] {
	display: none;
}

#anpa-area h2 {
	margin: 0;
}

#anpa-area p {
	margin: 0 0 0.25rem;
}

#anpa-area label {
	font-weight: 700;
}

#anpa-area input[type="email"],
#anpa-area input[type="text"],
#anpa-area input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--theme-border-color);
	border-radius: 6px;
	font-size: 1rem;
}

#anpa-area input:focus,
#anpa-area button:focus {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

#anpa-area button {
	align-self: flex-start;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--theme-palette-color-1);
	border-radius: 6px;
	background: var(--theme-button-background-initial-color);
	color: var(--theme-button-text-initial-color);
	font-weight: 700;
	cursor: pointer;
}

#anpa-area button:hover {
	background: var(--theme-button-background-hover-color);
}

#anpa-area .anpa-area-secondary {
	background: var(--theme-palette-color-8);
	color: var(--theme-link-initial-color);
}

#anpa-area .anpa-area-secondary:hover {
	background: var(--theme-palette-color-7);
}

/* fase10: admin-only actions are orange so master users can distinguish them. */
#anpa-area .anpa-area-secondary.anpa-admin-action {
	background: #fff7ed;
	border-color: #d97706;
	color: #9a3412;
}

#anpa-area .anpa-area-secondary.anpa-admin-action:hover,
#anpa-area .anpa-area-secondary.anpa-admin-action:focus {
	background: #fed7aa;
	border-color: #b45309;
	color: #7c2d12;
}

#anpa-area .anpa-area-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

#anpa-area .anpa-area-muted {
	color: var(--theme-text-color);
}

/* Role-aware warning (admin) inside "Os teus datos". */
#anpa-area .anpa-area-muted.anpa-area-warning {
	color: #7a271a;
	background: #fff1f0;
	border: 1px solid #b42318;
	border-radius: 8px;
	padding: 0.7rem 0.9rem;
	font-weight: 600;
}

#anpa-area .anpa-area-notice {
	position: sticky;
	top: 0.5rem;
	z-index: 10;
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--theme-border-color);
	background: var(--theme-palette-color-6);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#anpa-area .anpa-area-notice[data-type="success"] {
	border-color: var(--theme-palette-color-1);
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-1);
}

#anpa-area .anpa-area-notice[data-type="error"] {
	border-color: #b42318;
	background: #fff1f0;
	color: #7a271a;
}

/* Fillos management rows (since 1.4.0) */
.anpa-fillo-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	padding: .5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.anpa-fillo-row .anpa-fillo-info {
	flex: 1 1 60%;
	min-width: 12rem;
}

/* fase5/fase6 hub — admin panel */
#anpa-area .anpa-admin-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0.25rem 0 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--theme-border-color);
	position: sticky;
	top: 0;
	z-index: 15;
	background: var(--theme-palette-color-8);
}

#anpa-area .anpa-admin-nav,
#anpa-area .anpa-admin-tools,
#anpa-area .anpa-admin-exports {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#anpa-area .anpa-admin-tools {
	margin-left: auto;
}

#anpa-area .anpa-admin-panel {
	margin: 0 0 0.85rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--theme-border-color);
	border-radius: 10px;
	background: var(--theme-palette-color-7);
}

#anpa-area .anpa-admin-panel[hidden] {
	display: none;
}

#anpa-area .anpa-admin-panel h3 {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
}

#anpa-area .anpa-admin-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	margin: 0.4rem 0;
}

#anpa-area .anpa-admin-check input[type="checkbox"] {
	width: auto;
}

#anpa-area [data-admin-content] {
	overflow-x: auto;
}

#anpa-area .anpa-admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

#anpa-area .anpa-admin-table th,
#anpa-area .anpa-admin-table td {
	border: 1px solid var(--theme-border-color);
	padding: 0.45rem 0.6rem;
	text-align: left;
	vertical-align: top;
}

#anpa-area .anpa-admin-table th {
	background: var(--theme-palette-color-6);
	white-space: nowrap;
}

#anpa-area .anpa-socio-edit {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--theme-border-color);
	border-radius: 10px;
	background: var(--theme-palette-color-7);
}

#anpa-area .anpa-socio-edit h3 {
	margin: 0;
	font-size: 0.95rem;
}

#anpa-area .anpa-socio-edit input[type="text"],
#anpa-area .anpa-socio-edit select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--theme-border-color);
	border-radius: 6px;
	font-size: 1rem;
	line-height: 1.4;
	min-height: 2.7rem;
	background: var(--theme-palette-color-8);
	color: var(--theme-headings-color);
	appearance: auto;
	-webkit-appearance: auto;
}

/* fase6 PR-6 — socio baixa workflow */
#anpa-area .anpa-area-danger {
	background: #b42318;
	border-color: #b42318;
	color: var(--theme-button-text-initial-color);
}

#anpa-area .anpa-area-danger:hover {
	background: #7a271a;
	border-color: #7a271a;
	color: var(--theme-button-text-initial-color);
}

/* Outlined danger variant (e.g. the socio "Solicitar baixa" button). */
#anpa-area .anpa-area-secondary.anpa-area-danger {
	background: var(--theme-palette-color-8);
	color: #b42318;
	border-color: #b42318;
}

#anpa-area .anpa-area-secondary.anpa-area-danger:hover {
	background: #fff1f0;
	color: #7a271a;
	border-color: #7a271a;
}

#anpa-area .anpa-area-baixa-status {
	margin: 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid #d97706;
	border-radius: 8px;
	background: #fffbeb;
	color: #7c2d12;
	font-weight: 600;
}

/* Socios table row colouring by estado. */
#anpa-area .anpa-admin-table tr.anpa-row-baixa-pending td {
	background: #fffbeb; /* activo + baixa solicitada → amarelo */
}

#anpa-area .anpa-admin-table tr.anpa-row-baixa td {
	background: #fde8e8; /* baixa efectiva → vermello suave */
	color: #7a271a;
}

#anpa-area .anpa-admin-table tr.anpa-row-pendente td {
	background: #e6f0fb; /* pendente_alta → azul */
}

/* Working overlay (shown while any area request is in flight). */
#anpa-area {
	position: relative;
}

#anpa-area .anpa-area-busy {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.65);
	border-radius: 14px;
}

#anpa-area .anpa-area-busy[hidden] {
	display: none;
}

#anpa-area .anpa-area-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border: 4px solid var(--theme-palette-color-7);
	border-top-color: var(--theme-palette-color-1);
	border-radius: 50%;
	animation: anpa-area-spin 0.8s linear infinite;
}

@keyframes anpa-area-spin {
	to { transform: rotate(360deg); }
}

/* fase9 PR-9a — admin table sort + pagination */
#anpa-area .anpa-admin-table th.anpa-sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

#anpa-area .anpa-admin-table th.anpa-sortable:hover {
	background: var(--theme-palette-color-7);
}

#anpa-area .anpa-admin-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

#anpa-area .anpa-admin-pagination select {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--theme-border-color);
	border-radius: 6px;
}

#anpa-area .anpa-admin-pagination button[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* Idle session-timeout warning (fase8) */
#anpa-area .anpa-area-idle {
	position: sticky;
	top: 0.5rem;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border: 1px solid #d97706;
	border-radius: 8px;
	background: #fffbeb;
	color: #7c2d12;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#anpa-area .anpa-area-idle[hidden] {
	display: none;
}

#anpa-area .anpa-area-idle button {
	margin-left: auto;
	background: #d97706;
	border: 1px solid #d97706;
	color: var(--theme-button-text-initial-color);
	border-radius: 6px;
	padding: 0.5rem 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

#anpa-area .anpa-area-idle button:hover {
	background: #b45309;
	border-color: #b45309;
}

/* Logged-in session header (fase8 R-A1) */
#anpa-area .anpa-area-session-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--theme-palette-color-7);
	border-radius: 8px;
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-1);
}

#anpa-area .anpa-area-session-header[hidden] {
	display: none;
}

#anpa-area .anpa-area-session-header .anpa-area-session-who {
	flex: 1 1 auto;
}

#anpa-area .anpa-area-session-header button {
	margin-left: auto;
}

/* fase11: autorizacións como bloques individuais con espaciado */
#anpa-area .anpa-extra-curso-filter {
	margin-bottom: 0.75rem;
	padding: 0.5rem 0;
}
#anpa-area .anpa-extra-curso-filter label {
	font-weight: 600;
	margin-right: 0.35rem;
}
#anpa-area .anpa-extra-curso-filter select {
	font-size: 1rem;
	padding: 0.2rem 0.3rem;
	border: 1px solid var(--theme-border-color);
	border-radius: 6px;
	background: var(--theme-palette-color-8);
}
/* fase11: each matriculado row — button(s) first, text after, all aligned */
#anpa-area .anpa-extra-mine {
	list-style: none;
	margin: 0;
	padding: 0;
}
#anpa-area .anpa-extra-mine li {
	margin: 0.45rem 0;
}
#anpa-area .anpa-extra-mine-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
#anpa-area .anpa-extra-mine-row button {
	flex-shrink: 0;
}
#anpa-area .anpa-extra-mine-row span {
	flex: 1 1 180px;
}
/* fase11: autorizacións como bloques individuais con espaciado */
#anpa-area .anpa-extra-autorizacions label {
	display: block;
	margin: 0.35rem 0;
	line-height: 1.5;
	font-weight: 500;
}
#anpa-area .anpa-extra-autorizacions h4 {
	margin: 0.5rem 0 0.25rem;
}
#anpa-area .anpa-extra-autorizacions p {
	margin: 0.25rem 0;
	color: var(--theme-text-color);
}
/* fase11: indicador de ocupación do grupo seleccionado */
#anpa-area .anpa-extra-ocupacion {
	margin: 0.4rem 0;
	padding: 0.35rem 0.65rem;
	border-radius: 6px;
	font-size: 0.92rem;
	font-weight: 600;
	display: inline-block;
}
#anpa-area .anpa-extra-ocupacion.disponible {
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-1);
}
#anpa-area .anpa-extra-ocupacion.cheo {
	background: #fff7ed;
	color: #9a3412;
	border: 1px solid #d97706;
}
/* fase7: activity option-set checkbox groups */
#anpa-area .anpa-area-checkgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0.15rem 0 0.4rem;
}

#anpa-area .anpa-area-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	font-weight: 400;
	white-space: nowrap;
}

#anpa-area .anpa-area-checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
}

/* Filter bar for show/hide inactivos toggle */
#anpa-area .anpa-filter-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.92rem;
}
#anpa-area .anpa-filter-check {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 500;
	cursor: pointer;
}
#anpa-area .anpa-filter-check input[type="checkbox"] {
	width: auto;
	margin: 0;
	cursor: pointer;
}

/* Fase 8b: field-level validation errors */
#anpa-area .anpa-field-error {
	display: block;
	color: #b42318;
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: -0.4rem;
	margin-bottom: 0.25rem;
}
#anpa-area .anpa-field-error[hidden] {
	display: none;
}
#anpa-area input.anpa-field-invalid {
	border-color: #b42318;
	background: #fff1f0;
}

/* ── Responsive: mobile-first breakpoints ────────────────────────── */

/* Small phones */
@media (max-width: 480px) {
	#anpa-area .anpa-area-card {
		padding: 0.75rem;
		border-radius: 10px;
	}
	#anpa-area button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
	#anpa-area .anpa-area-actions {
		flex-direction: column;
	}
	#anpa-area .anpa-area-actions button {
		width: 100%;
	}
	#anpa-area .anpa-area-toolbar {
		flex-direction: column;
	}
	#anpa-area .anpa-admin-tools {
		margin-left: 0;
	}
	#anpa-area .anpa-admin-nav {
		flex-direction: column;
		width: 100%;
	}
	#anpa-area .anpa-admin-nav button {
		width: 100%;
	}
	.anpa-fillo-row {
		flex-direction: column;
		align-items: flex-start;
	}
	#anpa-area .anpa-area-card h2 {
		font-size: 1.25rem;
	}
}

/* Tablets */
@media (max-width: 768px) {
	#anpa-area {
		max-width: 100%;
		margin: 1rem 0;
	}
	#anpa-area.anpa-area-wide {
		max-width: 100%;
	}
	#anpa-area .anpa-area-card {
		padding: 1rem;
	}
	#anpa-area .anpa-admin-table {
		font-size: 0.85rem;
	}
	#anpa-area .anpa-admin-table th,
	#anpa-area .anpa-admin-table td {
		padding: 0.35rem 0.4rem;
	}
	#anpa-area .anpa-socio-edit input[type="text"],
	#anpa-area .anpa-socio-edit select,
	#anpa-area input[type="email"],
	#anpa-area input[type="text"],
	#anpa-area input[type="password"] {
		font-size: 16px; /* prevent iOS zoom on focus */
	}
}

/* Prevent table overflow on small screens */
@media (max-width: 640px) {
	#anpa-area [data-admin-content] {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* Task A: natural-width email/code inputs (were full-width from the theme). */
#anpa-area input[type="email"],
#anpa-area input[type="text"]:not([tabindex="-1"]),
#anpa-area input[inputmode="numeric"] {
	width: 100%;
	max-width: 340px;
	box-sizing: border-box;
}

/* ── Session header dropdown menu (PR-12l part 2) ────────────────────────
   The green "Conectada/o como X" box hosts a <details> menu with the
   account/admin shortcuts (Os meus datos, Xestión ANPA, Listados,
   Descargar Socios IBAN, Pechar sesión). Replaces the old site-header
   dropdown. */
.anpa-area-session-header .anpa-session-menu {
	position: relative;
}
.anpa-area-session-header .anpa-session-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	user-select: none;
}
.anpa-area-session-header .anpa-session-summary::-webkit-details-marker {
	display: none;
}
.anpa-area-session-header .anpa-session-summary::after {
	content: "▾";
	font-size: 0.8em;
	opacity: 0.7;
	transition: transform 0.15s ease;
}
.anpa-area-session-header .anpa-session-menu[open] .anpa-session-summary::after {
	transform: rotate(180deg);
}
.anpa-area-session-header .anpa-session-menu-body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.anpa-area-session-header .anpa-session-menu-body button {
	width: 100%;
	text-align: left;
}

/* ──────────────────────────────────────────────────────────────────
 * Self-contained button colours (do NOT inherit the theme palette).
 * The child theme's --theme-button-* / --theme-palette-* vars caused
 * clashes (green text on green, white on white, orange on black). We
 * pin explicit, accessible colours so the plugin looks consistent on
 * ANY theme. Placed last so it wins over the earlier var-based rules.
 * ────────────────────────────────────────────────────────────────── */

/* Primary action button */
#anpa-area button,
#anpa-area .anpa-area-actions button {
	background: #2d6a4f;
	color: #ffffff;
	border: 1px solid #2d6a4f;
	border-radius: 8px;
	padding: 0.55rem 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
#anpa-area button:hover,
#anpa-area .anpa-area-actions button:hover {
	background: #1f513b;
	border-color: #1f513b;
	color: #ffffff;
}

/* Secondary (outline) button — white bg, green text/border */
#anpa-area .anpa-area-secondary {
	background: #ffffff;
	color: #1f513b;
	border: 1px solid #9cc6b4;
}
#anpa-area .anpa-area-secondary:hover {
	background: #eef7f2;
	color: #14402f;
	border-color: #2d6a4f;
}

/* Admin-only actions — amber, dark text (clearly distinct, readable) */
#anpa-area .anpa-area-secondary.anpa-admin-action,
#anpa-area .anpa-admin-action {
	background: #fff4e5;
	color: #8a4b00;
	border: 1px solid #e0a45c;
}
#anpa-area .anpa-area-secondary.anpa-admin-action:hover,
#anpa-area .anpa-admin-action:hover {
	background: #ffe8cc;
	color: #6b3a00;
	border-color: #cf8a3a;
}

/* Danger (baixa, logout) — red */
#anpa-area .anpa-area-secondary.anpa-area-danger,
#anpa-area .anpa-area-danger {
	background: #ffffff;
	color: #b42318;
	border: 1px solid #e6a49e;
}
#anpa-area .anpa-area-secondary.anpa-area-danger:hover,
#anpa-area .anpa-area-danger:hover {
	background: #fdecea;
	color: #7a271a;
	border-color: #b42318;
}

/* Focus ring for accessibility (all area buttons) */
#anpa-area button:focus-visible {
	outline: 2px solid #1a4b8b;
	outline-offset: 2px;
}

/* ── Session dropdown (top green box) — tidy, readable menu ────────── */
#anpa-area .anpa-area-session-header {
	background: #eef7f2;
	border: 1px solid #cfe3d8;
	border-radius: 10px;
}
#anpa-area .anpa-session-summary {
	color: #14402f;
	font-weight: 700;
}
#anpa-area .anpa-session-menu-body {
	gap: 0.5rem;
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid #cfe3d8;
}
#anpa-area .anpa-session-menu-body button {
	width: 100%;
	text-align: left;
}