/**
 * 育てる掲示板スタイル
 *
 * @package Colect_Feedback
 */

/* ---- ボード全体 ---- */
.colect-feedback-board {
	margin: 1em 0;
	padding: 0;
}

/* ---- 使い方説明 ---- */
.colect-feedback-description {
	margin: 0 0 1rem;
	padding: 0.65rem 0.9rem;
	background: #f0f4f8;
	border-left: 3px solid #2271b1;
	border-radius: 0 4px 4px 0;
	font-size: 0.92rem;
	color: #444;
	line-height: 1.6;
}

/* ---- フィルターバー ---- */
.colect-feedback-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
	align-items: center;
}

.colect-feedback-select {
	padding: 0.35em 0.6em;
	font-size: 0.95rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}

/* ---- スレッド一覧 ---- */
.colect-feedback-list {
	position: relative;
	min-height: 80px;
}

.colect-feedback-loading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	color: #666;
}

.colect-feedback-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #ddd;
	border-top-color: #333;
	border-radius: 50%;
	animation: colect-feedback-spin 0.7s linear infinite;
}

@keyframes colect-feedback-spin {
	to { transform: rotate(360deg); }
}

.colect-feedback-threads {
	margin: 0;
	padding: 0;
	list-style: none;
}

.colect-feedback-thread {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 0.75rem;
	background: #fff;
}

.colect-feedback-thread-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.colect-feedback-thread-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.colect-feedback-thread-upvotes {
	font-size: 0.9rem;
	color: #555;
}

/* ステータスバッジ色分け: open=グレー / considering=黄 / adopted=緑 / closed=赤 */
.colect-feedback-status {
	display: inline-block;
	padding: 0.2em 0.5em;
	font-size: 0.8rem;
	border-radius: 4px;
	font-weight: 500;
}

.colect-feedback-status.status-open {
	background: #e0e0e0;
	color: #333;
}

.colect-feedback-status.status-considering {
	background: #fff3cd;
	color: #856404;
}

.colect-feedback-status.status-adopted {
	background: #d4edda;
	color: #155724;
}

.colect-feedback-status.status-closed {
	background: #f8d7da;
	color: #721c24;
}

.colect-feedback-type {
	font-size: 0.85rem;
	color: #666;
}

.colect-feedback-thread-title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	line-height: 1.3;
}

.colect-feedback-thread-content {
	margin-bottom: 0.5rem;
	line-height: 1.5;
	word-break: break-word;
}

.colect-feedback-thread-author,
.colect-feedback-reply-meta {
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 0.2rem;
}

.colect-feedback-reply-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
	flex-wrap: wrap;
}

.colect-feedback-reply-upvote {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.6em;
	font-size: 0.85rem;
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	background: #fafafa;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s;
}

.colect-feedback-reply-upvote:hover {
	background: #f0f4f8;
	border-color: #bbb;
}

.colect-feedback-reply-upvote.is-upvoted {
	background: #fff3e0;
	border-color: #f4a636;
	color: #e07b00;
	font-weight: 600;
}

.colect-feedback-btn-reply-to-reply {
	font-size: 0.82rem;
	color: #888;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
	transition: color 0.15s;
}

.colect-feedback-btn-reply-to-reply:hover {
	color: #2271b1;
}

.colect-feedback-btn-reply-delete {
	font-size: 0.8rem;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: none;
	color: #bbb;
	cursor: pointer;
	font-family: inherit;
	margin-left: auto;
	padding: 0.1em 0.5em;
}

.colect-feedback-btn-reply-delete:hover {
	color: #c0392b;
	border-color: #c0392b;
	background: #fff5f5;
}

/* ネスト返信（1段インデント） */
.colect-feedback-reply-children {
	margin-left: 1.25rem;
	padding-left: 0.75rem;
	border-left: 2px solid #e8e8e8;
	margin-top: 0.25rem;
}

/* インライン返信フォーム */
.colect-feedback-inline-reply-form {
	margin: 0.4rem 0;
	padding: 0.6rem;
	background: #f5f7fa;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
}

.colect-feedback-inline-reply-textarea {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.9rem;
	resize: vertical;
	min-height: 56px;
	box-sizing: border-box;
	margin-bottom: 0.4rem;
}

.colect-feedback-inline-reply-actions {
	display: flex;
	gap: 0.4rem;
}

.colect-feedback-thread-replies-count {
	font-size: 0.85rem;
	color: #555;
	margin-bottom: 0.5rem;
}

.colect-feedback-thread-file {
	margin: 0.5rem 0;
	padding: 0.5rem;
	background: #f8f9fa;
	border-radius: 4px;
}

.colect-feedback-download {
	display: inline-block;
	margin-bottom: 0.25rem;
}

.colect-feedback-macro-warning {
	margin: 0.5rem 0 0;
	padding: 0.5rem;
	font-size: 0.85rem;
	background: #fff3cd;
	border-left: 3px solid #ffc107;
	color: #856404;
}

.colect-feedback-adopted-version {
	margin: 0.5rem 0;
	padding: 0.5rem;
	background: #e8f5e9;
	border-radius: 4px;
	font-size: 0.9rem;
}

.colect-feedback-thread-status-change {
	margin: 0.5rem 0;
}

.colect-feedback-thread-status-change select {
	padding: 0.25em 0.5em;
	font-size: 0.9rem;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.colect-feedback-thread-footer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}

.colect-feedback-btn-upvote {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.35em 0.9em;
	font-size: 1rem;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fafafa;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s, border-color 0.15s;
	line-height: 1.4;
}

.colect-feedback-btn-upvote:hover {
	background: #f0f4f8;
	border-color: #bbb;
}

.colect-feedback-btn-upvote.is-upvoted {
	background: #fff3e0;
	border-color: #f4a636;
	color: #e07b00;
	font-weight: 600;
}

.colect-feedback-upvote-display {
	font-size: 0.95rem;
	color: #555;
}

.colect-feedback-thread-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/* ---- 返信エリア ---- */
.colect-feedback-replies {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid #eee;
}

.colect-feedback-reply {
	padding: 0.5rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.colect-feedback-reply:last-of-type {
	border-bottom: none;
}

.colect-feedback-reply-content {
	line-height: 1.5;
	word-break: break-word;
}

.colect-feedback-reply-form {
	margin-top: 1rem;
}

.colect-feedback-reply-textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95rem;
	box-sizing: border-box;
}

/* ---- ページネーション ---- */
.colect-feedback-pagination {
	margin-top: 1rem;
}

.colect-feedback-pagination-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: center;
}

.colect-feedback-page-info {
	font-size: 0.9rem;
	color: #666;
}

/* ---- ボタン ---- */
.colect-feedback-btn {
	padding: 0.4em 0.8em;
	font-size: 0.9rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f5f5f5;
	cursor: pointer;
	font-family: inherit;
}

.colect-feedback-btn:hover {
	background: #eee;
}

.colect-feedback-btn-primary {
	background: #2271b1;
	color: #fff;
	border-color: #2271b1;
}

.colect-feedback-btn-primary:hover {
	background: #135e96;
	color: #fff;
	border-color: #135e96;
}

.colect-feedback-actions {
	margin-top: 1.5rem;
}

.colect-feedback-login-required {
	margin-top: 1rem;
	padding: 0.75rem;
	background: #f8f9fa;
	border-radius: 4px;
	color: #666;
	font-size: 0.95rem;
}

.colect-feedback-empty,
.colect-feedback-error {
	color: #666;
	margin: 1rem 0;
}

/* ---- 新規投稿フォーム（常時表示） ---- */
.colect-feedback-post-form-wrap {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.colect-feedback-notice {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	font-size: 0.95rem;
}

.colect-feedback-notice-success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.colect-feedback-new-thread-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.colect-feedback-form-heading {
	margin: 0 0 1rem;
	font-size: 1.1rem;
}

.colect-feedback-form-type {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.colect-feedback-form-type label {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	cursor: pointer;
}

.colect-feedback-type-hint {
	font-size: 0.85rem;
	color: #888;
	font-weight: normal;
}

.colect-feedback-file-area {
	margin-bottom: 1rem;
}

.colect-feedback-file-area label {
	display: block;
	margin-bottom: 0.5rem;
}

.colect-feedback-upload-progress {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #666;
}

/* タイトル・本文を一体化した compose ボックス */
.colect-feedback-compose-box {
	border: 1px solid #ccc;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 0.4rem;
}

.colect-feedback-compose-title {
	display: block;
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: none;
	border-bottom: 1px solid #e4e4e4;
	background: #f5f6f8;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	box-sizing: border-box;
	outline: none;
}

.colect-feedback-compose-title:focus {
	background: #eef1f5;
}

.colect-feedback-compose-content {
	display: block;
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: none;
	background: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	min-height: 100px;
	resize: vertical;
	box-sizing: border-box;
	outline: none;
}

.colect-feedback-compose-hint {
	font-size: 0.8rem;
	color: #aaa;
	margin: 0 0 1rem;
}

/* 旧フィールドとの互換（ファイルエリア等で利用） */
.colect-feedback-input,
.colect-feedback-textarea {
	width: 100%;
	padding: 0.5rem;
	margin-bottom: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95rem;
	box-sizing: border-box;
}

.colect-feedback-textarea {
	min-height: 100px;
	resize: vertical;
}

.colect-feedback-form-actions {
	margin-top: 1rem;
}

/* 返信フォームのファイル添付 */
.colect-feedback-reply-file-wrap {
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
	color: #555;
}

.colect-feedback-reply-file-progress {
	font-size: 0.85rem;
	color: #888;
	margin-top: 0.25rem;
}

.colect-feedback-reply-file {
	margin-top: 0.35rem;
	padding: 0.4rem 0.6rem;
	background: #f8f9fa;
	border-radius: 4px;
	font-size: 0.85rem;
}