/**
 * Minimal front-end styling for Team Projects shortcodes.
 * Enqueued only on pages containing a Team Projects shortcode — see
 * src/Frontend/Assets.php. Everything is scoped under .tprj-frontend
 * so it never touches theme-level elements (header, footer, page
 * background, etc.) — only the shortcode's own inner content.
 */

.tprj-frontend {
	--tprj-border: #e2e2e2;
	--tprj-muted: #6b7280;
	margin: 1.5em 0;
}

.tprj-frontend .tprj-notice {
	background: #f0e6ff;
	color: #4a1a8a;
	padding: 0.75em 1em;
	border-radius: 4px;
	margin-bottom: 1em;
}

.tprj-frontend .tprj-empty {
	color: var(--tprj-muted);
	font-style: italic;
}

/* Filter form */
.tprj-task-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em 1em;
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--tprj-border);
}

.tprj-task-filters label {
	display: flex;
	flex-direction: column;
	font-size: 0.85em;
	gap: 0.25em;
}

.tprj-task-filters select,
.tprj-task-filters button {
	font-size: 0.95em;
	padding: 0.4em 0.6em;
}

.tprj-clear-filters {
	font-size: 0.85em;
	align-self: center;
}

/* Task rows */
.tprj-task-rows {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.tprj-task-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5em 1.5em;
	padding: 0.85em 1em;
	border: 1px solid var(--tprj-border);
	border-left: 4px solid var(--tprj-border);
	border-radius: 4px;
}

.tprj-task-row.tprj-overdue {
	border-left-color: #b32d2e;
}

.tprj-task-main {
	flex: 1 1 260px;
	min-width: 0;
}

.tprj-task-title {
	font-weight: 600;
}

.tprj-task-description {
	margin: 0.25em 0 0;
	color: var(--tprj-muted);
	font-size: 0.9em;
}

.tprj-task-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0.9em;
	font-size: 0.85em;
	color: var(--tprj-muted);
}

.tprj-task-project {
	font-weight: 600;
	color: inherit;
}

/* Inline editing (title, due date click-to-edit; status select) */
.tprj-editable-text {
	cursor: pointer;
	border-bottom: 1px dotted var(--tprj-muted);
}

.tprj-editable-text:hover,
.tprj-editable-text:focus {
	border-bottom-style: solid;
	outline: none;
}

.tprj-inline-input {
	font: inherit;
	font-size: 0.95em;
	padding: 2px 4px;
	border: 1px solid var(--tprj-border);
	border-radius: 3px;
}

.tprj-status-select {
	font-size: 0.85em;
	padding: 2px 4px;
	border-radius: 3px;
	border: 1px solid var(--tprj-border);
	background: #fff;
}

.tprj-inline-error {
	display: inline-block;
	color: #b32d2e;
	font-size: 0.8em;
	margin-left: 0.5em;
}

/* Add Task modal */
.tprj-add-task-trigger {
	display: inline-block;
	margin-bottom: 1em;
	padding: 0.5em 1em;
	border: 1px solid var(--tprj-border);
	border-radius: 4px;
	background: #f6f7f7;
	cursor: pointer;
	font-size: 0.95em;
}

.tprj-modal {
	border: 1px solid var(--tprj-border);
	border-radius: 6px;
	padding: 1.5em;
	max-width: 420px;
	width: 90%;
}

.tprj-modal::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

.tprj-add-task-form h2 {
	margin: 0 0 0.75em;
	font-size: 1.1em;
}

.tprj-add-task-form label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-size: 0.9em;
	margin-bottom: 0.9em;
}

.tprj-add-task-form input,
.tprj-add-task-form select {
	font: inherit;
	padding: 0.4em 0.6em;
	border: 1px solid var(--tprj-border);
	border-radius: 3px;
}

.tprj-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5em;
	margin-top: 1em;
}

.tprj-modal-actions button {
	padding: 0.5em 1em;
	border-radius: 4px;
	border: 1px solid var(--tprj-border);
	cursor: pointer;
}

.tprj-modal-submit {
	background: #2271b1;
	color: #fff;
	border-color: #2271b1;
}

.tprj-form-error {
	color: #b32d2e;
	font-size: 0.85em;
}

.tprj-form-error[hidden] {
	display: none;
}

/* Badges — defined independently from assets/css/admin.css, since
   that stylesheet only ever loads in wp-admin and this one only ever
   loads on the front end. Selectors are always combined with
   .tprj-badge so a bare .tprj-status-todo etc. can't accidentally
   style something else that happens to share the class. */
.tprj-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.9em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.tprj-badge.tprj-status-todo        { background: #f0f0f1; color: #50575e; }
.tprj-badge.tprj-status-in_progress { background: #dcedff; color: #0a4b78; }
.tprj-badge.tprj-status-done        { background: #d8f5dc; color: #1e5a2b; }

.tprj-badge.tprj-priority-low    { background: #f0f0f1; color: #50575e; }
.tprj-badge.tprj-priority-medium { background: #fff3cd; color: #7a5b00; }
.tprj-badge.tprj-priority-high   { background: #fde1e1; color: #8a1f1f; }

.tprj-badge.tprj-recurrence { background: #f0e6ff; color: #4a1a8a; }