/* テーブル全体のベース設定 */
.table-responsive {
	overflow-x: auto;
	/* 横スクロールのみ */
	width: 100%;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.table {
	position: relative;
	width: 100%;
	background-color: #fff;
	border-collapse: separate;
	border-spacing: 0;
}

/* ヘッダー固定 */
.table thead th {
	position: sticky;
	top: 0;
	background: #f8f9fa;
	z-index: 2;
	padding: 1rem;
	color: #333;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid #dee2e6;
}

/* ID列固定 */
.table th:first-child,
.table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

/* ヘッダーとID列の交差部分 */
.table thead th:first-child {
	z-index: 3;
	background: #f8f9fa;
}

/* 行のスタイル */
.table tbody td {
	padding: 1rem;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.table tbody tr:nth-child(even) td {
	background: #f8f9fa;
}

.table tbody tr:hover td {
	background: #f0f4f8;
}

/* ID列の背景色を行の状態に合わせる */
.table tbody tr td:first-child {
	background: inherit;
}

/* スクロールバー */
.table-responsive::-webkit-scrollbar {
	height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

/* ステータスバッジのベーススタイル */

.status-badge {
	display: inline-block;
	/* padding: 0.5em 1em; */
	font-size: 0.9rem !important;
	font-weight: 500;
	border-radius: 20px;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	padding: 0.75rem !important;
}

/* 各ステータスの色定義 */
.bg-info {
	background-color: #0dcaf0 !important;
	/* 面談中：明るい青 */
}

.bg-primary {
	background-color: #0d6efd !important;
	/* 交渉中：標準的な青 */
}

.bg-warning {
	background-color: #ffc107 !important;
	/* 申込中：黄色 */
}

.bg-purple {
	background-color: #6f42c1 !important;
	/* 契約手続き中：紫 */
}

.bg-indigo {
	background-color: #4263eb !important;
	/* 契約完了：インディゴ */
}

.bg-teal {
	background-color: #20c997 !important;
	/* 決済手続き中：ティール */
}

.bg-success {
	background-color: #198754 !important;
	/* 完了：緑 */
}

.bg-danger {
	background-color: #dc3545 !important;
	/* 不成立：赤 */
}

.bg-secondary {
	background-color: #6c757d !important;
	/* 未定義用：グレー */
}

/* ホバー時のツールチップ効果（オプション） */
.status-badge {
	position: relative;
	cursor: help;
}

.status-badge:hover::after {
	content: attr(data-description);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.5em 1em;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	border-radius: 4px;
	font-size: 0.75rem;
	white-space: nowrap;
	z-index: 1000;
}

/* webroot/css/status-badge.css */

.status-badge {
	display: inline-block;
	padding: 0.5em 1em;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 20px;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

/* ステータスの色定義 */
.bg-info {
	background-color: #0dcaf0 !important;
}

.bg-primary {
	background-color: #0d6efd !important;
}

.bg-warning {
	background-color: #ffc107 !important;
	color: #000 !important;
	/* 黄色背景は黒文字 */
}

.bg-purple {
	background-color: #6f42c1 !important;
}

.bg-indigo {
	background-color: #4263eb !important;
}

.bg-teal {
	background-color: #20c997 !important;
}

.bg-success {
	background-color: #198754 !important;
}

.bg-danger {
	background-color: #dc3545 !important;
}

/* ホバーエフェクト */
.status-badge {
	transition: transform 0.2s ease;
}

.status-badge:hover {
	transform: translateY(-1px);
}



/* view */
/* 基本的なスタイル (必要に応じて調整) */
body {
	font-family: 'Roboto', 'Noto Sans JP', sans-serif;
	/* フォント */
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	/* テキストの色 */
	background-color: #fff;
	/* 背景色 */
}

h1, h2, h3, h4, h5, h6 {
	color: #2e7150;
	/* 見出しの色 */
	font-weight: 500;
	/* 見出しの太さ (Medium) */
	letter-spacing: -0.2px;
	/* 文字間隔 */
}

a {
	color: #2e7150;
	/* リンクの色 */
	text-decoration: none;
	/* 下線を消す */
}

a:hover {
	text-decoration: underline;
	/* ホバー時に下線 */
}

/* カードのスタイル */
.card {
	border: none;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
}

.card:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-header {
	background-color: #2e7150;
	/* メインカラー */
	color: #fff;
	font-weight: bold;
}

/* テーブルのスタイル */
.table-view th {
	width: 25%;
	/* 見出しの幅を固定 */
	font-weight: bold;
	color: #2e7150;
}

.table-responsive {
	overflow-x: auto;
	/* 横スクロール */
}

/* ボタンのスタイル */
.btn {
	/* 必要に応じて、Bootstrap のボタンスタイルを上書き */
}

/* ステータスバッジ */
.status-badge {
	/* 必要に応じて、ステータスバッジのスタイルを調整 */
}

/* 添付ファイルリスト */
.attachment-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.attachment-preview {
	/* 必要に応じて、添付ファイルプレビューのスタイルを調整 */
}

/* メモ */
.alert-light {
	/* 必要に応じて、メモのスタイルを調整 */
}

/* タブ */
.nav-tabs .nav-link.active {
	background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
	color: #2e7150;
}

.nav-tabs .nav-link {
	color: #2e7150;
}


/* edit */
/* ページ全体のコンテナ装飾 */
.custom-container {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 10px;
	margin-top: 20px;
}

/* サイドメニュー */
.side-nav {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 20px;
}

.side-nav .heading {
	font-size: 1.2rem;
	margin-bottom: 10px;
	color: #333;
}

.side-nav-item {
	display: block;
	margin-bottom: 10px;
	color: #349f75;
	text-decoration: none;
	transition: color 0.3s ease;
}

.side-nav-item:hover {
	color: #287f5b;
}

/* フォーム全体 */
.custom-form {
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
}

/* 各フォームコントロール */
.custom-form-control {
	margin-bottom: 15px;
}

/* ボタン */
.custom-button {
	background-color: #349f75;
	color: #fff;
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

.custom-button:hover {
	background-color: #287f5b;
}

/* 添付ファイルプレビュー */
.attachment-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.attachment-preview img {
	border: 2px solid #ddd;
	border-radius: 5px;
	transition: transform 0.3s ease;
}

/* ダウンロードリンク */
.download-link {
	display: inline-block;
	padding: 5px 10px;
	background-color: #e2e6ea;
	color: #333;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.download-link:hover {
	background-color: #cfd3d7;
}


/* editのみ */
/* 例: webroot/css/customer_edit.css */

/* 全体コンテナ */
.customer-edit-page .container-fluid {
	max-width: 1200px;
	/* 必要なら幅を制限 */
	margin: 0 auto;
}

/* カードのベーススタイル (Bootstrap無しでもOK) */
.customer-edit-page .card {
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	/* カードの枠をはみ出ないように */
}

.customer-edit-page .card-header {
	/* background-color: #2e7150; */
	/* お好みの色 */
	color: #fff;
	padding: 0.75rem 1rem;
}

.customer-edit-page .card-header h4 {
	margin: 0;
	font-size: 1.1rem;
}

.customer-edit-page .card-body {
	padding: 1rem;
}

/* サイドメニューカード (任意でさらに調整) */
.customer-edit-page .side-menu-card .card-body {
	/* メニューリンクの間隔など */
}

/* フォームカード */
.customer-edit-page .customer-edit-form .card-header {
	/* background-color: #349f75; */
}

/* ラベルと入力欄の配置を縦並びにして少し余白 */
.customer-edit-page .customers.form.content .input label {
	font-weight: 600;
	margin-bottom: 0.2rem;
	display: inline-block;
}

/* ファイルインプットまわり */
.customer-edit-page .new-attachments .input.file label {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: normal;
	color: #333;
}

/* 他、既存の .custom-form, .custom-button 等は使い回し */
/* ▼ このラッパが全体を囲んでいる想定 */
.file-input-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-bottom: 1rem;
}

/* 実際の <input type="file"> は隠す */
.custom-file-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

/* 見た目上のボタン */
.custom-file-label {
	background-color: #349f75;
	/* お好みの色 */
	color: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* アイコンとテキストの余白 */
	transition: background-color 0.3s;
	font-size: 0.9rem;
	text-decoration: none;
	/* ラベルなので念のため */
	border: 1px solid #2f8d64;
}

.custom-file-label:hover {
	background-color: #2f8d64;
}

/* 選択されたファイル名の表示エリア */
.file-name-display {
	margin-left: 10px;
	font-size: 0.85rem;
	color: #333;
	/* テキスト色 */
}


.customer-add-page .card {
	border: 1px solid #dee2e6;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.customer-add-page .card-header {
	/* background-color: #349f75; */
	/* メインカラー */
	color: #fff;
	padding: 0.75rem 1rem;
}

.customer-add-page .card-header h4 {
	margin: 0;
	font-size: 1.1rem;
}

/* サイドメニューのカード */
.customer-add-page .side-menu-card .card-header {
	/* background-color: #2e7150; */
	/* 微妙に差を付ける例 */
}

.customer-add-page .side-menu-card .card-body .btn {
	width: 100%;
	text-align: left;
	margin-bottom: 8px;
}

/* フォーム本体 */
.custom-form {
	background-color: #fff;
	padding: 1rem;
	border-radius: 4px;
}

/* 各フィールドのクラス */
.custom-form-control {
	display: block;
	width: 100%;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 8px;
}

/* ボタン */
.custom-button {
	/* background-color: #349f75; */
	color: #fff;
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.95rem;
	transition: background-color 0.3s ease;
}

.custom-button:hover {
	/* background-color: #287f5b; */
}