/*
 * クライアントポータルのスタイル
 *
 * テーマに依存せず単体で成立させるため、リセットを含めて自己完結させる。
 * クライアントの年齢層が幅広いことを想定し、文字サイズと余白は大きめに取る。
 */

:root {
	--crs-bg: #f6f7f9;
	--crs-surface: #ffffff;
	--crs-border: #dfe3e8;
	--crs-text: #1f2933;
	--crs-text-muted: #6b7280;
	--crs-accent: #2f6f4f;
	--crs-accent-dark: #255a40;
	--crs-success-bg: #e8f5ee;
	--crs-success-border: #9fd3b6;
	--crs-error-bg: #fdecec;
	--crs-error-border: #f0b4b4;
	--crs-radius: 8px;
	--crs-max-width: 720px;
}

* {
	box-sizing: border-box;
}

.crs-body {
	margin: 0;
	padding: 0;
	background: var(--crs-bg);
	color: var(--crs-text);
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI",
		"Meiryo", sans-serif;
	font-size: 16px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
}

.crs-wrap {
	max-width: var(--crs-max-width);
	margin: 0 auto;
	padding: 0 16px 64px;
}

/* ---------- ヘッダー ---------- */

.crs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px 0;
	border-bottom: 1px solid var(--crs-border);
	margin-bottom: 32px;
}

.crs-header__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--crs-text);
	text-decoration: none;
}

.crs-header__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
}

.crs-header__user {
	color: var(--crs-text-muted);
}

.crs-header__logout {
	color: var(--crs-accent);
}

/* ---------- 見出し・本文 ---------- */

.crs-heading {
	font-size: 24px;
	line-height: 1.5;
	margin: 0 0 16px;
}

.crs-subheading {
	font-size: 18px;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--crs-border);
}

.crs-lead {
	color: var(--crs-text-muted);
	margin: 0 0 32px;
}

.crs-breadcrumb {
	font-size: 14px;
	margin: 0 0 12px;
}

.crs-breadcrumb a {
	color: var(--crs-accent);
}

.crs-empty {
	color: var(--crs-text-muted);
	margin: 0;
}

/* ---------- カード ---------- */

.crs-card {
	background: var(--crs-surface);
	border: 1px solid var(--crs-border);
	border-radius: var(--crs-radius);
	padding: 28px;
	margin-bottom: 28px;
}

.crs-card--narrow {
	max-width: 460px;
	margin: 48px auto;
}

/* ---------- 通知 ---------- */

.crs-notice {
	border: 1px solid var(--crs-border);
	border-radius: var(--crs-radius);
	background: var(--crs-surface);
	padding: 16px 20px;
	margin: 0 0 24px;
}

.crs-notice p {
	margin: 0;
}

.crs-notice__sub {
	font-size: 14px;
	color: var(--crs-text-muted);
	margin-top: 4px !important;
}

.crs-notice--success {
	background: var(--crs-success-bg);
	border-color: var(--crs-success-border);
}

.crs-notice--error {
	background: var(--crs-error-bg);
	border-color: var(--crs-error-border);
}

/* ---------- フォーム ---------- */

.crs-field {
	margin-bottom: 24px;
}

.crs-label {
	display: block;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 6px;
}

.crs-input,
.crs-select,
.crs-textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	line-height: 1.6;
	color: var(--crs-text);
	background: #fff;
	border: 1px solid var(--crs-border);
	border-radius: var(--crs-radius);
}

.crs-input:focus,
.crs-select:focus,
.crs-textarea:focus {
	outline: 2px solid var(--crs-accent);
	outline-offset: 1px;
	border-color: var(--crs-accent);
}

.crs-textarea {
	resize: vertical;
	min-height: 160px;
}

.crs-file {
	display: block;
	width: 100%;
	font-size: 15px;
}

.crs-hint {
	font-size: 13px;
	color: var(--crs-text-muted);
	margin: 6px 0 0;
	line-height: 1.7;
}

.crs-button {
	display: inline-block;
	padding: 14px 32px;
	font-size: 16px;
	font-family: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--crs-accent);
	border: none;
	border-radius: var(--crs-radius);
	cursor: pointer;
}

.crs-button:hover,
.crs-button:focus {
	background: var(--crs-accent-dark);
}

/* ---------- 案件一覧 ---------- */

.crs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.crs-list__item {
	margin-bottom: 12px;
}

.crs-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px 24px;
	background: var(--crs-surface);
	border: 1px solid var(--crs-border);
	border-radius: var(--crs-radius);
	text-decoration: none;
	color: var(--crs-text);
}

.crs-list__link:hover,
.crs-list__link:focus {
	border-color: var(--crs-accent);
}

.crs-list__title {
	font-weight: 700;
}

.crs-list__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---------- バッジ ---------- */

.crs-badge {
	display: inline-block;
	padding: 2px 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--crs-text-muted);
	background: var(--crs-bg);
	border: 1px solid var(--crs-border);
	border-radius: 999px;
	white-space: nowrap;
}

.crs-badge--open,
.crs-badge--status-open {
	color: #8a4b12;
	background: #fdf1e3;
	border-color: #edcda6;
}

.crs-badge--status-in_progress {
	color: #1f4d7a;
	background: #e7f0f9;
	border-color: #a9c8e6;
}

.crs-badge--status-done {
	color: #226644;
	background: var(--crs-success-bg);
	border-color: var(--crs-success-border);
}

/* ---------- 案件詳細 ---------- */

.crs-project-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 32px;
}

.crs-project-meta__url {
	font-size: 14px;
	color: var(--crs-accent);
}

/* ---------- 投稿履歴 ---------- */

.crs-thread {
	list-style: none;
	margin: 0;
	padding: 0;
}

.crs-thread__item {
	padding: 20px 0;
	border-bottom: 1px solid var(--crs-border);
}

.crs-thread__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.crs-thread__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.crs-thread__date {
	font-size: 13px;
	color: var(--crs-text-muted);
}

.crs-thread__title {
	font-size: 17px;
	margin: 0 0 8px;
}

.crs-thread__body {
	margin-bottom: 12px;
}

.crs-thread__files {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
}

.crs-thread__files a {
	color: var(--crs-accent);
}

.crs-thread__replies {
	list-style: none;
	margin: 12px 0 0;
	padding: 16px 20px;
	background: var(--crs-bg);
	border-radius: var(--crs-radius);
}

.crs-thread__reply + .crs-thread__reply {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--crs-border);
}

.crs-thread__reply-author {
	font-weight: 700;
	font-size: 14px;
}

.crs-thread__reply-date {
	font-size: 13px;
	color: var(--crs-text-muted);
	margin-left: 8px;
}

.crs-thread__reply-body {
	font-size: 15px;
}

/* ---------- フッター ---------- */

.crs-footer {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--crs-border);
}

.crs-footer__note {
	font-size: 13px;
	color: var(--crs-text-muted);
	margin: 0;
}

/* ---------- 狭い画面 ---------- */

@media (max-width: 600px) {
	.crs-card {
		padding: 20px 16px;
	}

	.crs-heading {
		font-size: 21px;
	}

	.crs-button {
		width: 100%;
	}
}

/* 受領済みでサーバから削除された添付 */
.crs-thread__file--received {
	color: #6b7280;
}