.sfm-dashboard {
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
}

.sfm-dashboard h2 {
	margin-top: 0;
}

.sfm-class-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.sfm-class-heading-row h2 {
	margin-bottom: 0;
}

/* Alerts are toasts now: fixed to the top right corner instead of sitting
   inline above the content, and auto-dismissed by JS (see frontend.js)
   after 5 seconds so they don't have to be dismissed by hand. */
.sfm-notice {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	max-width: 320px;
	padding: 10px 14px;
	border-radius: 0px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.15 );
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.sfm-notice.sfm-notice-hide {
	opacity: 0;
	transform: translateY( -8px );
}

.sfm-notice-success {
	background: #e7f6e9;
	border: 1px solid #a9dab0;
	color: #1e5c26;
}

.sfm-notice-error {
	background: #fbe9e9;
	border: 1px solid #e5a9a9;
	color: #7a1f1f;
}

.sfm-class-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.sfm-class-list li {
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 0px;
	margin-bottom: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sfm-class-list a {
	font-weight: 600;
	text-decoration: none;
}

.sfm-meta {
	color: #666;
	font-size: 0.85em;
}

.sfm-form {
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* The main feedback composer isn't a short one-line input like the class/
   member forms above — make it span the same width as a posted feedback
   item (.sfm-feedback-item), instead of the narrow 480px default. */
.sfm-form.sfm-cmd-enter-form {
	max-width: 100%;
}

.sfm-form label {
	font-weight: 600;
}

.sfm-form input[type="text"],
.sfm-form input[type="email"],
.sfm-form input[type="password"],
.sfm-form textarea {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 0px;
	width: 100%;
	box-sizing: border-box;
}

.sfm-inline-form {
	display: inline-flex;
	flex-direction: row;
	gap: 6px;
	margin: 6px 0 0;
	max-width: none;
}

.sfm-btn {
	display: inline-block;
	background: #000;
	color: #fff;
	border: 1px solid #000;
	padding: 8px 16px;
	border-radius: 0px;
	cursor: pointer;
	text-decoration: none;
	width: fit-content;
  text-align: center;
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 0.85em;
}

.sfm-btn:hover {
	background: #fff;
  border: 1px solid #000;
	color: #000;
}

.sfm-btn-small {
  background: #fff;
  border: 1px solid #fff;
  text-decoration: underline;
  color: #000;
}

.sfm-link-btn {
	background: none;
	border: none;
	color: #b32d2e;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	font-size: 0.85em;
}

.sfm-members {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding: 16px;
	background: #f6f7f7;
	border-radius: 0px;
}

.sfm-members-col {
	flex: 1;
	min-width: 220px;
}

.sfm-members-col ul {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.sfm-members-col li {
	padding: 4px 0;
	border-bottom: 1px solid #e2e2e2;
}

.sfm-hint {
	color: #777;
	font-size: 0.85em;
}

.sfm-top-bar {
	text-align: right;
	margin-bottom: 12px;
	font-size: 0.9em;
}

.sfm-top-bar a {
	text-decoration: none;
	font-weight: 600;
}

.sfm-form input[disabled] {
	background: #f0f0f1;
	color: #666;
}

.sfm-trend-picker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 8px;
	font-size: 0.9em;
}

.sfm-trend-picker-label {
	color: #555;
}

.sfm-trend-option {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-weight: 400;
}

.sfm-trend-option input[type="radio"] {
	margin: 0;
	width: auto;
}

.sfm-trend-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #ccc;
	font-size: 1.1em;
	line-height: 1;
}

.sfm-trend-option input:checked + .sfm-trend-icon {
	background: #000;
	color: #fff;
	border-color: #000;
}

/* All three trend icons use the same "↘" character (see
   render_trend_picker() / render_feedback_item()) — different Unicode
   arrow glyphs (↗ vs ↘) don't render at a consistent size/weight across
   fonts, so the other directions are just this one glyph rotated instead.
   The rotation is applied to an inner span around just the glyph, not the
   icon's bordered box / badge, so only the arrow itself turns. */
.sfm-trend-glyph {
	display: inline-block;
}

.sfm-trend-glyph-up {
	transform: rotate( -90deg );
}

.sfm-trend-glyph-down {
	transform: none;
}

.sfm-trend-badge {
	display: inline-block;
	margin-right: 4px;
	font-weight: 700;
}

.sfm-trend-badge.sfm-trend-up {
	color: #1e7e34;
}

.sfm-trend-badge.sfm-trend-down {
	color: #b32d2e;
}

.sfm-trend-badge.sfm-trend-neutral {
	color: #666;
}

.sfm-feedback-subject-badge {
	font-size: 0.85em;
	color: #666;
	font-style: italic;
}

.sfm-mentor-banner {
	display: inline-block;
	padding: 4px 10px;
	background: #f0f0f1;
	border-radius: 0px;
	font-size: 0.85em;
	font-weight: 600;
	color: #2271b1;
	margin: 0 0 16px;
}

.sfm-bulk-add-form {
	margin-top: 12px;
}

.sfm-bulk-add-form textarea {
	resize: vertical;
}

.sfm-mentee-row {
	padding: 12px 0;
	border-bottom: 1px solid #e2e2e2;
}

.sfm-mentee-row:last-child {
	border-bottom: none;
}

.sfm-mentee-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 8px 0 10px;
}

.sfm-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9em;
	font-weight: 400;
}

.sfm-mentee-toggle-row {
	margin: 0 0 16px;
}

.sfm-btn-active {
	background: #2271b1;
}

.sfm-feedback-item {
	border: 1px solid #ddd;
	border-radius: 0px;
	padding: 14px;
	margin-bottom: 14px;
}

.sfm-feedback-item.sfm-feedback-unread {
	border-color: #2271b1;
	border-left-width: 4px;
	background: #f2f8fc;
}

.sfm-filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}

.sfm-filter-form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.9em;
}

.sfm-filter-form label {
	font-weight: 600;
}

.sfm-filter-form select {
	padding: 5px 8px;
  height: 40px;
	border: 1px solid #ccc;
	border-radius: 0px;
  background: #fff;
}

#sfm_subject_id {
  background: #fff;
  flex-grow: 1;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 0px;
  height: 40px;
}

.sfm-read-link {
	display: inline-block;
	font-size: 0.75em;
	text-decoration: none;
	padding: 2px 8px;
	border-radius: 0px;
	background: #f0f0f1;
	color: #2271b1;
	vertical-align: middle;
}

.sfm-read-link.is-read {
	background: #e7f6e9;
	color: #1e5c26;
}

.sfm-feedback-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.sfm-feedback-left {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sfm-feedback-date {
	color: #666;
	font-size: 0.85em;
}

.sfm-feedback-author {
	font-weight: 600;
}

.sfm-feedback-content p {
	margin: 0 0 8px;
}

.sfm-reactions {
	margin-top: 10px;
	padding: 8px 12px;
	/*border: 1px solid #000;*/
  background: #fafafa;
}

.sfm-reaction {
	margin-bottom: 8px;
	font-size: 0.95em;
}
.sfm-reaction > strong {
  font-weight: 600;
}

.sfm-reaction-form {
	margin-top: 10px;
	margin-bottom: 0;
	flex-direction: column;
	align-items: stretch;
	max-width: none;
}

/* .sfm-form sets display:flex, which — since author CSS always wins over
   the browser's built-in [hidden]{display:none} rule — was cancelling out
   the hidden attribute and leaving the textarea/attach field/button
   visible even while the reaction box was supposed to be collapsed. */
.sfm-reaction-form[hidden] {
	display: none;
}

.sfm-form .wp-editor-wrap,
.sfm-form .wp-core-ui {
	max-width: 100%;
}

.sfm-reaction-form .wp-editor-wrap {
	width: 100%;
}

.sfm-reaction-form .sfm-btn {
	align-self: flex-start;
}

.sfm-reaction-toggle-row {
	margin-top: 10px;
	text-align: right;
}

.sfm-lazy-editor {
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 0px;
	resize: vertical;
	font-family: inherit;
}

.sfm-attach-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85em;
  width: 60%;
}

.sfm-attach-field label {
	font-weight: 600;
	color: #555;
}

.sfm-attachments {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sfm-attachments li {
	display: block;
}

.sfm-attachment-image img {
	display: block;
	border-radius: 0px;
	border: 1px solid #ddd;
	max-width: 100px;
	max-height: 100px;
	object-fit: cover;
}

.sfm-attachment-file {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	background: #f0f0f1;
	border-radius: 0px;
	font-size: 0.85em;
	text-decoration: none;
	color: #2271b1;
}

.sfm-attachment-file::before {
	content: "📎";
}

.sfm-hint {
	color: #777;
	font-size: 0.8em;
	margin: 4px 0 0;
}

/* Quicktags/plain-text mode falls back to a raw textarea — make sure it
   stays resizable there too, matching the visual editor's drag handle. */
.sfm-form .wp-editor-area {
	resize: vertical;
  padding: 0px;
}

.wp-editor-tools {
  padding: 0px;
  margin-top: 0px;
}
.hidden_input {
  display: none;
}
h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;
}

.sfm-account-menu-item {
  display: flex;
  align-items: center;
}

.sfm-account-menu-item,
.sfm-account-menu-item a {
  font-weight: 700;
}