/**
 * My Notes page layout. Shared tokens/nav/card/button styles live in
 * tri-sp-student-shell.css (loaded first as a dependency).
 */

.tri-sp-my-notes__title {
	font-family: var(--tri-sp-font-heading);
	color: var(--tri-sp-text);
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 12px;
}

.tri-sp-my-notes__subtitle {
	color: var(--tri-sp-text-muted);
	margin: 0 0 32px;
}

.tri-sp-my-notes__add,
.tri-sp-my-notes__filters {
	margin-bottom: 24px;
}

.tri-sp-notice {
	padding: 14px 18px;
	border-radius: var(--tri-sp-card-radius-sm);
	margin-bottom: 24px;
	font-size: 14px;
}

.tri-sp-notice--error {
	background: rgba(202, 90, 79, 0.12);
	border: 1px solid rgba(202, 90, 79, 0.4);
	color: #f0d3ce;
}

.tri-sp-notes-form,
.tri-sp-notes-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.tri-sp-notes-form label,
.tri-sp-notes-filter-form label {
	display: block;
	font-size: 12px;
	color: var(--tri-sp-text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tri-sp-notes-form select,
.tri-sp-notes-form textarea,
.tri-sp-notes-filter-form select,
.tri-sp-notes-filter-form input[type="search"] {
	width: 100%;
	background: var(--tri-sp-bg);
	border: 1px solid var(--tri-sp-border);
	border-radius: 4px;
	color: var(--tri-sp-text);
	padding: 10px 12px;
	font-family: var(--tri-sp-font-body);
	font-size: 14px;
}

/*
 * Chunk 6.6 — Elementor's Global Kit CSS
 * (`.elementor-kit-47604 input:not([type="button"]):not([type="submit"])`,
 * specificity (0,3,1)) beats the plain rule above (0,2,1) specifically for
 * `input[type="search"]` (its two `:not()` clauses each add specificity;
 * `select`/`textarea` aren't matched by that Elementor selector at all, so
 * they were never affected). Confirmed live via `getMatchedStylesForNode`:
 * the search field's real computed background/height were coming from
 * Elementor's kit rule (gold background, 24–30px padding), not this file.
 * Re-declared here at (0,4,1), using only real ancestor classes already
 * present around the field (page root, `.tri-sp-card`, the filter form) —
 * no !important needed.
 */
.tri-sp-my-notes .tri-sp-card .tri-sp-notes-filter-form input[type="search"] {
	background: var(--tri-sp-bg);
	padding: 10px 12px;
	font-size: 14px;
	line-height: normal;
}

.tri-sp-notes-form select:focus,
.tri-sp-notes-form textarea:focus,
.tri-sp-notes-filter-form select:focus,
.tri-sp-notes-filter-form input:focus {
	border-color: var(--tri-sp-gold);
	outline: none;
}

.tri-sp-notes-form > *,
.tri-sp-notes-filter-form > * {
	flex: 1 1 220px;
}

.tri-sp-notes-form button,
.tri-sp-notes-filter-form button {
	flex: 0 0 auto;
}

.tri-sp-notes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tri-sp-note-card {
	background: var(--tri-sp-card-bg);
	border: 1px solid var(--tri-sp-border);
	border-radius: var(--tri-sp-card-radius-sm);
	padding: 18px 20px;
}

.tri-sp-note-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12px;
	color: var(--tri-sp-text-muted);
	margin-bottom: 10px;
}

.tri-sp-note-card__lesson {
	color: var(--tri-sp-gold-strong);
	font-weight: 600;
}

/* Global Lesson + Topic Learning Shell rollout — Topic title badge for a
   note created from a Topic page; sits alongside the (always-present)
   parent Lesson badge above rather than replacing it. */
.tri-sp-note-card__topic {
	color: var(--tri-sp-text-muted);
	font-weight: 500;
}

.tri-sp-note-card__topic::before {
	content: "\2192"; /* → */
	margin: 0 4px;
}

.tri-sp-note-card__text {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 12px;
}

.tri-sp-note-card__text p:last-child {
	margin-bottom: 0;
}

.tri-sp-note-card__actions {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	font-size: 13px;
}

.tri-sp-note-card__edit summary {
	cursor: pointer;
	color: var(--tri-sp-gold-strong);
	font-weight: 600;
}

.tri-sp-note-card__edit form {
	margin-top: 12px;
	flex-direction: column;
	align-items: stretch;
}

.tri-sp-note-card__delete {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #d98c82;
}

/* Chunk 6.6 — same Elementor Global Kit `button` collision as `.tri-sp-button`
   above; re-declared at (0,2,0) via the real page-root ancestor class, which
   already beats Elementor's (0,1,1) rule on the B (class) column alone. */
.tri-sp-my-notes .tri-sp-note-card__delete {
	background: none;
	padding: 0;
}

@media (max-width: 768px) {
	.tri-sp-notes-form > *,
	.tri-sp-notes-filter-form > * {
		flex-basis: 100%;
	}
}