/*
 * ThickGrass front-end portal stylesheet - covers [thickgrass_new_ticket],
 * [thickgrass_my_tickets], [thickgrass_kb], [thickgrass_approval],
 * [thickgrass_custom_form] and [thickgrass_custom_form_group]. Only enqueued
 * on pages that actually contain one of those shortcodes (see
 * Shortcodes::maybe_enqueue_assets()). Deliberately minimal and framework-free,
 * same spirit as assets/admin.css - a small, reusable set of classes rather
 * than per-element inline styles.
 */

:root {
	--thickgrass-accent: #2e7d32;
	--thickgrass-accent-light: #e6f4ea;
	--thickgrass-red: #b32d2e;
	--thickgrass-red-light: #fcf0f1;
	--thickgrass-blue: #2271b1;
	--thickgrass-blue-light: #e5f5fa;
	--thickgrass-yellow: #dba617;
	--thickgrass-yellow-light: #fff8e5;
	--thickgrass-grey: #646970;
	--thickgrass-border: #c3c4c7;
}

.thickgrass-portal {
	max-width: 720px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
}

.thickgrass-portal *,
.thickgrass-portal *::before,
.thickgrass-portal *::after {
	box-sizing: border-box;
}

.thickgrass-portal p {
	margin: 0 0 14px;
}

.thickgrass-portal label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.thickgrass-portal input[type="text"],
.thickgrass-portal input[type="email"],
.thickgrass-portal input[type="date"],
.thickgrass-portal input[type="search"],
.thickgrass-portal textarea,
.thickgrass-portal select {
	width: 100%;
	max-width: 480px;
	padding: 8px 10px;
	border: 1px solid var(--thickgrass-border);
	border-radius: 4px;
	font-size: 14px;
}

.thickgrass-portal textarea {
	resize: vertical;
}

.thickgrass-portal input[type="file"] {
	max-width: 480px;
}

/* Radio/checkbox option labels shouldn't inherit the bold/block field label style above. */
.thickgrass-radio-option,
.thickgrass-checkbox-option {
	display: block;
	font-weight: normal;
	margin-bottom: 4px;
}

.thickgrass-portal button[type="submit"],
.thickgrass-portal .thickgrass-btn {
	background: var(--thickgrass-accent);
	color: #fff;
	border: 0;
	padding: 10px 18px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.thickgrass-portal button[type="submit"]:hover,
.thickgrass-portal .thickgrass-btn:hover {
	background: #256428;
	color: #fff;
}

.thickgrass-portal table {
	width: 100%;
	border-collapse: collapse;
}

.thickgrass-portal table th,
.thickgrass-portal table td {
	text-align: left;
	padding: 8px 6px;
	border-bottom: 1px solid #dcdcde;
}

/* Live Chat widget (Shortcodes::render_chat(), [thickgrass_chat]) */
#thickgrass-chat-messages {
	max-height: 360px;
	overflow-y: auto;
	padding: 8px;
	margin-bottom: 14px;
	border: 1px solid var(--thickgrass-border);
	border-radius: 4px;
	background: #fafafa;
}

.thickgrass-chat-message {
	max-width: 80%;
	margin: 0 0 8px;
	padding: 6px 10px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid var(--thickgrass-border);
}

.thickgrass-chat-message-agent {
	margin-right: auto;
}

.thickgrass-chat-message-me {
	margin-left: auto;
	background: var(--thickgrass-accent-light);
	border-color: var(--thickgrass-accent);
}

.thickgrass-chat-quick-message {
	background: #fff;
	color: var(--thickgrass-accent);
	border: 1px solid var(--thickgrass-accent);
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	margin: 0 8px 8px 0;
}

.thickgrass-chat-quick-message:hover {
	background: var(--thickgrass-accent-light);
}

.thickgrass-chat-message-system {
	text-align: center;
	max-width: 100%;
	margin: 8px 0;
	padding: 2px 8px;
	border: none;
	background: none;
	font-size: 13px;
	font-style: italic;
	color: var(--thickgrass-grey);
}

/* Pre-chat self-service gate (Shortcodes::render_chat_prechat()) */
.thickgrass-chat-hidden {
	display: none;
}

#thickgrass-chat-kb-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.thickgrass-chat-kb-link {
	background: #fff;
	border: 1px solid var(--thickgrass-border);
	padding: 8px 14px;
	border-radius: 4px;
	cursor: pointer;
	margin: 0 0 6px;
	display: block;
	width: 100%;
	text-align: left;
}

.thickgrass-chat-kb-link:hover {
	background: var(--thickgrass-accent-light);
}

.thickgrass-chat-kb-content {
	padding: 8px 10px;
	margin: 4px 0 10px;
	border-left: 3px solid var(--thickgrass-accent);
	background: #fafafa;
	white-space: pre-wrap;
}

.thickgrass-notice-error {
	color: var(--thickgrass-red);
	background: var(--thickgrass-red-light);
	border-left: 4px solid var(--thickgrass-red);
	padding: 10px 14px;
	border-radius: 4px;
	margin: 0 0 16px;
}

.thickgrass-field-error {
	display: block;
	color: var(--thickgrass-red);
	font-weight: normal;
	font-size: 13px;
	margin-top: 4px;
}

.thickgrass-comment {
	background: var(--thickgrass-blue-light);
	border-left: 4px solid var(--thickgrass-blue);
	padding: 8px 12px;
	margin-bottom: 8px;
	border-radius: 4px;
}

.thickgrass-comment-meta {
	margin: 0 0 4px;
}

/* "Translate" button (Translator::render_button()) - identical classes/
   markup to assets/admin.css's own copy of this block. */
.thickgrass-translate {
	margin: 4px 0 12px;
}

.thickgrass-translate-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--thickgrass-blue);
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

.thickgrass-translate-panel {
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.thickgrass-translate-lang {
	width: auto;
	max-width: 200px;
	padding: 4px 6px;
	font-size: 13px;
}

.thickgrass-translate-status {
	color: var(--thickgrass-grey);
	font-size: 13px;
}

.thickgrass-translate-status.thickgrass-translate-error {
	color: var(--thickgrass-red);
}

.thickgrass-translate-result {
	flex-basis: 100%;
	padding: 8px 12px;
	background: #fafafa;
	border: 1px solid var(--thickgrass-border);
	border-radius: 4px;
	font-size: 14px;
	white-space: pre-wrap;
}

.thickgrass-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-end;
	margin-bottom: 16px;
}

.thickgrass-filter-bar label {
	margin-bottom: 2px;
}

.thickgrass-filter-bar input,
.thickgrass-filter-bar select {
	max-width: 200px;
}

.thickgrass-pagination {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.thickgrass-attachment-list {
	list-style: none;
	margin: 8px 0 16px;
	padding: 0;
}

.thickgrass-attachment-list li {
	padding: 4px 0;
}

@media (max-width: 600px) {
	.thickgrass-portal {
		padding: 0 12px;
	}

	.thickgrass-portal input[type="text"],
	.thickgrass-portal input[type="email"],
	.thickgrass-portal input[type="date"],
	.thickgrass-portal textarea,
	.thickgrass-portal select {
		max-width: 100%;
	}

	.thickgrass-portal table,
	.thickgrass-portal thead,
	.thickgrass-portal tbody,
	.thickgrass-portal th,
	.thickgrass-portal td,
	.thickgrass-portal tr {
		display: block;
	}

	.thickgrass-portal thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.thickgrass-portal table tr {
		border-bottom: 2px solid var(--thickgrass-border);
		margin-bottom: 8px;
	}

	.thickgrass-portal table td {
		border-bottom: 0;
		padding-left: 45%;
		position: relative;
	}

	.thickgrass-portal table td::before {
		content: attr(data-label);
		position: absolute;
		left: 6px;
		width: 40%;
		white-space: nowrap;
		font-weight: 600;
	}
}