/**
 * WP Member Directory — Frontend Directory Styles
 *
 * Shares the same design language as the admin dashboard (rounded
 * cards, soft shadows) so the plugin feels like one cohesive product
 * whether viewed by an Administrator or a visitor. The same navy
 * header / row-striping / plain-text badge / bare-icon design is used
 * across desktop, tablet, and mobile per client request — only font
 * sizes and paddings scale down for narrower viewports.
 *
 * The search bar deliberately avoids position:absolute layout tricks
 * (icon + input are flex siblings inside one bordered pill instead)
 * so it renders correctly even inside themes/page-builders with
 * aggressive global CSS resets.
 *
 * Loaded only when the [member_directory] shortcode actually renders
 * (see WPMD_Shortcodes::render()).
 *
 * @package WP_Member_Directory
 */

.wpmd-directory {
	--wpmd-ink: #1e293b;
	--wpmd-muted: #64748b;
	--wpmd-accent: #0f766e;
	--wpmd-accent-d: #0b5d57;
	--wpmd-header-red: #e53e3e;
	--wpmd-header-red-d: #c53030;
	--wpmd-border: #e2e8f0;
	--wpmd-card: #ffffff;

	font-size: 15px;
	line-height: 1.5;
	color: var(--wpmd-ink);
	max-width: 100%;
	display: block;
}

.wpmd-directory,
.wpmd-directory * {
	box-sizing: border-box;
}

/* ---------- Type count summary bar ---------- */

.wpmd-directory-summary {
	background: #e8ecf7;
	color: #1b2a4a;
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
	padding: 10px 14px;
	border-radius: 8px 8px 0 0;
	margin: 0;
	line-height: 1.5;
}

/* When the summary bar is immediately followed by the table (the
   normal case), square off the table's top corners and drop its top
   border so the two form one seamless, visually "attached" block. */
.wpmd-directory-summary + .wpmd-directory-table-wrap {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
}

/* ---------- Toolbar / search ---------- */

.wpmd-directory-toolbar {
	display: block;
	margin: 0 0 18px;
}

.wpmd-directory-search-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 420px;
	padding: 0 16px;
	border: 1.5px solid var(--wpmd-border);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpmd-directory-search-wrap:focus-within {
	border-color: var(--wpmd-accent);
	box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.wpmd-directory-search-icon {
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	fill: var(--wpmd-muted);
	display: block;
}

.wpmd-directory-search-wrap:focus-within .wpmd-directory-search-icon {
	fill: var(--wpmd-accent);
}

.wpmd-directory-search {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 13px 0;
	margin: 0;
	font-size: 14.5px;
	color: var(--wpmd-ink);
	-webkit-appearance: none;
	appearance: none;
}

.wpmd-directory-search::-webkit-search-cancel-button {
	display: none;
}

.wpmd-directory-search::placeholder {
	color: #94a3b8;
}

.wpmd-directory-search-clear {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: #f1f5f9;
	color: var(--wpmd-muted);
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wpmd-directory-search-clear[hidden] {
	display: none;
}

.wpmd-directory-search-clear:hover {
	background: #e2e8f0;
	color: var(--wpmd-ink);
}

.wpmd-directory-search-clear svg {
	width: 11px;
	height: 11px;
	display: block;
}

/* ---------- Table shell ---------- */

.wpmd-directory-table-wrap {
	border: 1px solid var(--wpmd-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 8px rgba(15, 23, 42, 0.04);
	transition: opacity 0.15s ease;
}

.wpmd-directory-table-wrap.wpmd-loading {
	opacity: 0.55;
	pointer-events: none;
}

.wpmd-directory-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wpmd-card);
	table-layout: fixed;
}

/* Same navy header design across all screen sizes (desktop, tablet,
   mobile) per client request — unified look. */
.wpmd-directory-table thead th {
	text-align: center;
	background: #1b2a4a;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 16px;
	border-bottom: 1px solid #0f1b33;
}

/* Same percentage-based column widths everywhere, so the proportions
   (Type/Name/ID/WhatsApp/Number/Admin) stay visually consistent
   whether viewed on desktop or mobile. */
.wpmd-col-type {
	width: 16%;
}

.wpmd-col-name {
	width: 25%;
}

.wpmd-col-id {
	width: 11%;
}

.wpmd-col-whatsapp {
	width: 12%;
}

/* Client request: Number value bold, in a distinct highlight color,
   across all screen sizes. */
.wpmd-col-phone {
	width: 24%;
	font-weight: 900;
	font-size: 16px;
	color: #e75505;
}

.wpmd-col-admin {
	width: 12%;
}

.wpmd-directory-table tbody tr:nth-child(odd) {
	background: #fffefb;
}

.wpmd-directory-table tbody tr:nth-child(even) {
	background: #eef1fa;
}

.wpmd-directory-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--wpmd-border);
	vertical-align: middle;
	text-align: center;
}

.wpmd-directory-table tbody tr:last-child td {
	border-bottom: none;
}

.wpmd-directory-table tbody tr {
	transition: background-color 0.12s ease;
}

.wpmd-directory-table tbody tr:hover {
	background: #e4e9f8;
}

.wpmd-directory-name {
	font-weight: 700;
	text-align: center;
}

.wpmd-directory-name-link {
	color: inherit;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.wpmd-directory-name-link:hover {
	color: #25d366;
}

.wpmd-directory-dash {
	color: var(--wpmd-muted);
}

.wpmd-directory-empty-row td {
	text-align: center;
	padding: 40px 16px;
	color: var(--wpmd-muted);
}

/* ---------- Type badges ----------
 * Plain bold colored text (no pill background) across all screen
 * sizes, per client request to unify the mobile and desktop design. */

.wpmd-badge {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wpmd-badge-color, #333);
}

/* ---------- WhatsApp icon ----------
 * Bare icon (no button background/padding) across all screen sizes,
 * per client request to unify the mobile and desktop design. */

.wpmd-directory-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.wpmd-directory-whatsapp:hover {
	opacity: 0.8;
}

.wpmd-directory-whatsapp-label {
	display: none;
}

.wpmd-directory-whatsapp svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
	flex-shrink: 0;
	display: block;
}

.wpmd-directory-whatsapp-icon-img {
	width: 32px;
	height: 32px;
	display: block;
	object-fit: contain;
	flex-shrink: 0;
}

/* ---------- Complaint / "Admin" call button ---------- */

.wpmd-directory-complaint-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 16px;
	border-radius: 8px;
	background: var(--wpmd-header-red);
	color: #fff;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.wpmd-directory-complaint-btn:hover {
	background: var(--wpmd-header-red-d);
	color: #fff;
}

.wpmd-directory-complaint-btn:active {
	transform: translateY(1px);
}

/* ---------- Responsive: tablet ---------- */

@media (max-width: 900px) {
	.wpmd-directory-table thead th,
	.wpmd-directory-table tbody td {
		padding: 12px;
		font-size: 13px;
	}
}

/* ---------- Responsive: mobile ----------
 * Every column stays fully visible on-screen — no horizontal scrolling.
 * The table switches to a fixed layout with compact per-column widths,
 * and cell content wraps instead of overflowing.
 */

@media (max-width: 640px) {
	.wpmd-directory-summary {
		font-size: 10.5px;
		padding: 8px 10px;
	}

	.wpmd-directory-search-wrap {
		max-width: none;
		padding: 0 14px;
	}

	.wpmd-directory-table-wrap {
		overflow-x: hidden;
	}

	.wpmd-directory-table {
		width: 100%;
	}

	/* Header keeps the same navy color from the base rule; only size/
	   spacing shrink further for the narrower viewport. */
	.wpmd-directory-table thead th {
		font-size: 7.5px;
		padding: 7px 1px;
		white-space: nowrap;
		letter-spacing: 0;
	}

	/* ID NO header split across two stacked lines (ID / NO) so the
	   column itself can be much narrower — no ellipsis anywhere, per
	   client instruction; text always shows in full. Only needed on
	   mobile — desktop has plenty of room for "ID No" on one line. */
	.wpmd-th-stacked-line {
		display: block;
		line-height: 1.15;
	}

	.wpmd-directory-table tbody td {
		padding: 2px 3px;
		font-size: 11px;
		overflow-wrap: anywhere;
	}

	/* Number value shrinks from the desktop 16px to 12.5px so it
	   reliably fits on one line in the narrower mobile column; stays
	   bold and the same highlight color from the base rule. */
	.wpmd-col-phone {
		font-size: 12.5px;
	}

	/* Name shrinks from the desktop size and shows its complete text —
	   wraps onto multiple lines if needed rather than truncating. */
	.wpmd-directory-name {
		font-size: 11.5px;
		line-height: 1.3;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	/* Type badge shrinks from the desktop size. word-break/overflow-wrap
	   are reset to "normal" here so long words only wrap at natural
	   spaces (e.g. "Sub" / "Admin") rather than being cut mid-word (e.g.
	   "Maste-r"), which the column's default overflow-wrap:anywhere
	   would otherwise allow. */
	.wpmd-badge {
		font-size: 9px;
		line-height: 1.25;
		white-space: normal;
		word-break: normal;
		overflow-wrap: normal;
	}

	/* Slightly larger than the desktop base icon, per client request. */
	.wpmd-directory-whatsapp-icon-img {
		width: 35px;
		height: 35px;
	}

	/* Smaller Admin button font, forced onto one line, for the
	   narrower mobile column. */
	.wpmd-directory-complaint-btn {
		padding: 5px 4px;
		font-size: 7.5px;
		border-radius: 6px;
		white-space: nowrap;
		line-height: 1.2;
	}
}

@media (max-width: 360px) {
	.wpmd-directory-table thead th,
	.wpmd-directory-table tbody td {
		padding: 2px 3px;
		font-size: 10px;
	}
}

/* ==========================================================================
   Frontend "Add Member" submission form ([member_directory_submit])
   ========================================================================== */

.wpmd-submit-form-wrap {
	--wpmd-ink: #1e293b;
	--wpmd-muted: #64748b;
	--wpmd-accent: #0f766e;
	--wpmd-accent-d: #0b5d57;
	--wpmd-border: #e2e8f0;

	max-width: 560px;
	font-size: 15px;
	color: var(--wpmd-ink);
}

.wpmd-submit-form-wrap * {
	box-sizing: border-box;
}

.wpmd-submit-notice {
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 600;
}

.wpmd-submit-notice-success {
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
}

.wpmd-submit-notice-error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* ---------- Login prompt ---------- */

.wpmd-submit-login-prompt {
	padding: 20px;
	border: 1px solid var(--wpmd-border);
	border-radius: 14px;
	background: #f8fafc;
}

.wpmd-submit-login-prompt p {
	margin: 0 0 14px;
	color: var(--wpmd-muted);
}

.wpmd-submit-login-prompt p:first-child {
	color: var(--wpmd-ink);
	font-weight: 600;
}

#wpmd-submit-login-form p {
	margin: 0 0 12px;
}

#wpmd-submit-login-form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
	color: var(--wpmd-ink);
}

#wpmd-submit-login-form input[type="text"],
#wpmd-submit-login-form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--wpmd-border);
	border-radius: 8px;
	font-size: 14px;
}

#wpmd-submit-login-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border: none;
	border-radius: 999px;
	background: var(--wpmd-accent);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#wpmd-submit-login-form input[type="submit"]:hover {
	background: var(--wpmd-accent-d);
}

/* ---------- Submission form ---------- */

.wpmd-submit-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.wpmd-submit-field label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
	color: var(--wpmd-ink);
}

.wpmd-submit-field input,
.wpmd-submit-field select {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--wpmd-border);
	border-radius: 10px;
	font-size: 14px;
	background: #fff;
	color: var(--wpmd-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpmd-submit-field input:focus,
.wpmd-submit-field select:focus {
	outline: none;
	border-color: var(--wpmd-accent);
	box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.wpmd-submit-required {
	color: #dc2626;
}

.wpmd-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: none;
	border-radius: 999px;
	background: var(--wpmd-accent);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.wpmd-submit-btn:hover {
	background: var(--wpmd-accent-d);
}

.wpmd-submit-btn:active {
	transform: translateY(1px);
}

@media (max-width: 480px) {
	.wpmd-submit-form-grid {
		grid-template-columns: 1fr;
	}

	.wpmd-submit-btn {
		width: 100%;
	}
}