/**
 * FILE: public/css/frontend.css  (REWRITE — v1.1.0)
 * PLACE AT: /wp-content/plugins/website-directory-cms/public/css/frontend.css
 * CONNECTS TO: class-shortcode.php markup, loaded only when [website_directory]
 *              is present. Variables below are set INLINE right after this
 *              file by WDCMS_Settings::generate_css() (see class-shortcode.php
 *              maybe_enqueue()) — every var(--wd-*, fallback) here has a
 *              matching `--wd-*:` declaration generated from Settings →
 *              Table Design. The fallback value is what renders on a fresh
 *              install before any setting is changed, or if generate_css()
 *              ever fails to enqueue (Section 47 safe defaults).
 *
 * BUG-FIX NOTE: this file previously declared its OWN unrelated variable
 * names (--wd-primary, --wd-background, --wd-hover, …) that nothing in
 * Settings ever wrote to, so every Table Design control was silently a
 * no-op. It now reads the exact variable names generate_css() produces.
 */

.wdcms-directory {
	color: var(--wd-table-text, #1f2430);
	font-family: var(--wd-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: var(--wd-font-size, 14px);
	line-height: var(--wd-line-height, 1.5);
	letter-spacing: var(--wd-letter-spacing, normal);
	max-width: var(--wd-table-max-width, none);
	padding: var(--wd-container-padding, 0);
}

.wdcms-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
}

.wdcms-debug-banner {
	background: #fef3c7;
	border: 1px solid #f59e0b;
	color: #92400e;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	margin-bottom: 12px;
}

.wdcms-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.wdcms-toolbar-left, .wdcms-toolbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.wdcms-directory select,
.wdcms-directory input[type="search"],
.wdcms-directory input[type="text"],
.wdcms-directory input[type="number"] {
	border: 1px solid var(--wd-border-color, #e5e7eb);
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 14px;
	color: var(--wd-table-text, #1f2430);
	background: var(--wd-table-bg, #ffffff);
}

/* Settings → Table Design → Search Box / Entries Dropdown override the
   generic rule above with their own dedicated variables. */
.wdcms-directory .wdcms-search-input {
	width: var(--wd-search-width, 220px);
	height: var(--wd-search-height, auto);
	background: var(--wd-search-bg, #ffffff);
	border-color: var(--wd-search-border, #e5e7eb);
	border-radius: var(--wd-search-radius, 6px);
	font-size: var(--wd-search-font-size, 14px);
	color: var(--wd-search-text, #1f2430);
	padding: var(--wd-search-padding, 7px 10px);
	min-width: 180px;
}

.wdcms-directory .wdcms-length {
	width: var(--wd-entries-width, auto);
	height: var(--wd-entries-height, auto);
	background: var(--wd-entries-bg, #ffffff);
	border-color: var(--wd-entries-border, #e5e7eb);
	border-radius: var(--wd-entries-radius, 6px);
	font-size: var(--wd-entries-font-size, 14px);
	color: var(--wd-entries-text, #1f2430);
}

.wdcms-export-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.wdcms-btn {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 6px;
	border: 1px solid var(--wd-border-color, #e5e7eb);
	background: var(--wd-table-bg, #ffffff);
	color: var(--wd-table-text, #1f2430);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.wdcms-btn:hover { background: var(--wd-row-hover-bg, #f1f5ff); border-color: var(--wd-header-bg, #4f46e5); color: var(--wd-header-bg, #4f46e5); }

.wdcms-table-wrap {
	border-width: var(--wd-border-width, 1px);
	border-style: var(--wd-border-style, solid);
	border-color: var(--wd-border-color, #e5e7eb);
	border-radius: var(--wd-radius, 10px);
	overflow-x: auto;
	background: var(--wd-table-bg, #ffffff);
	-webkit-overflow-scrolling: touch;
}

table.wdcms-table {
	width: var(--wd-table-width, 100%);
	border-collapse: collapse;
	text-align: var(--wd-text-align, left);
}

table.wdcms-table thead th {
	background: linear-gradient(90deg, var(--wd-header-bg, #4f46e5), var(--wd-header-bg2, #14b8a6));
	color: var(--wd-header-text, #ffffff);
	font-weight: var(--wd-header-font-weight, 700);
	font-size: var(--wd-header-font-size, 13px);
	text-align: inherit;
	padding: var(--wd-header-padding, 14px 16px);
	height: var(--wd-header-height, auto);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

table.wdcms-table tbody td {
	padding: var(--wd-cell-padding, 13px 16px);
	height: var(--wd-row-height, auto);
	border-top: var(--wd-border-width, 1px) var(--wd-border-style, solid) var(--wd-border-color, #e5e7eb);
	vertical-align: middle;
	font-weight: var(--wd-body-font-weight, 400);
	white-space: nowrap;
	background: var(--wd-row-bg, #ffffff);
}

table.wdcms-table tbody tr:nth-child(even) td { background: var(--wd-row-alt-bg, #f9fafb); }
table.wdcms-table tbody tr:hover td { background: var(--wd-row-hover-bg, #f1f5ff); color: var(--wd-row-hover-text, #1f2430); }

.wdcms-site-link { color: var(--wd-header-bg, #4f46e5); text-decoration: none; font-weight: 600; }
.wdcms-site-link:hover { text-decoration: underline; }

.wdcms-thumb { display: inline-block; vertical-align: middle; }

.wdcms-status { padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; }
.wdcms-status-publish { background: #e6f4ea; color: #1a7f37; }
.wdcms-status-draft { background: #f0f0f1; color: #646970; }
.wdcms-status-pending { background: #fcf0d1; color: #996800; }
.wdcms-status-inactive { background: #fbeaea; color: #b32d2e; }

.wdcms-contact-btn {
	display: inline-block;
	background: var(--wd-header-bg, #4f46e5);
	color: #fff !important;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
.wdcms-contact-btn:hover { opacity: .9; }

.wdcms-empty-message {
	text-align: center;
	padding: 30px 16px;
	color: #6b7280;
	font-size: 14px;
}

/* DataTables default chrome we don't need since we build our own toolbar */
.wdcms-directory .dataTables_wrapper .dataTables_length,
.wdcms-directory .dataTables_wrapper .dataTables_filter,
.wdcms-directory .dataTables_wrapper .dataTables_info,
.wdcms-directory .dataTables_wrapper .dataTables_paginate {
	font-size: 13px;
	color: #6b7280;
}
.wdcms-directory .dataTables_wrapper .dataTables_paginate .paginate_button {
	font-size: var(--wd-pagination-font-size, 13px) !important;
	padding: var(--wd-pagination-padding, 6px 12px) !important;
	border-radius: var(--wd-pagination-radius, 6px) !important;
	border: 1px solid var(--wd-border-color, #e5e7eb) !important;
	margin-left: 4px;
}
.wdcms-directory .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--wd-pagination-active-bg, #4f46e5) !important;
	color: var(--wd-pagination-active-text, #ffffff) !important;
	border-color: var(--wd-pagination-active-bg, #4f46e5) !important;
}
.wdcms-directory .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--wd-pagination-hover-bg, #f1f5ff) !important;
}

@media (max-width: 782px) {
	.wdcms-toolbar { flex-direction: column; align-items: stretch; }
	.wdcms-toolbar-left, .wdcms-toolbar-right { justify-content: space-between; }
	.wdcms-search-input { min-width: 0; width: 100% !important; }
}

@media print {
	.wdcms-toolbar, .wdcms-export-bar, .dataTables_paginate, .dataTables_length, .dataTables_filter, .dataTables_info {
		display: none !important;
	}
	.wdcms-table-wrap { border: none; overflow: visible; }
}