/* ==========================================================================
   Weight Tracker（[wt]）微調整 CSS
   既存プラグインの見た目を壊さず、入力欄・ボタン・余白まわりだけ整える。
   子テーマの style.css の末尾に追記してください。
   ========================================================================== */

/* ---------- 1. 全体コンテナの余白調整 ---------- */
/* ws-ls-tabs のデフォルトは margin:30px。スマホで画面幅を圧迫するので見直し */
.ws-ls-tabs {
	margin: 24px 0 !important;
}

/* タブアイコンメニューの下にほんの少し余白 */
ul.ykuk-tab-menu {
	margin-bottom: 16px;
}

/* タブアイコンのホバー時の反応を少し丁寧に */
ul.ykuk-tab-menu li a {
	transition: color 0.2s ease, transform 0.2s ease;
}
ul.ykuk-tab-menu li a:hover {
	transform: translateY(-1px);
}

/* ---------- 2. フォーム入力欄の見た目 ---------- */
/* 既定では width:98%!important / 角丸なし / padding左5pxのみ。
   ここで角丸・左右の余白・高さ・枠色をまとめて整える。 */
.we-ls-weight-form input[type="number"],
.we-ls-weight-form input[type="text"],
.we-ls-weight-form input[type="email"],
.we-ls-weight-form select,
.we-ls-weight-form textarea,
.we-ls-weight-form .we-ls-datepicker,
.we-ls-weight-form .ws-ls-select,
.ws-ls-user-pref-form input[type="text"],
.ws-ls-user-pref-form input[type="number"],
.ws-ls-user-pref-form select,
.ws-ls-user-delete-all select {
	width: 100% !important;
	box-sizing: border-box !important;
	height: 40px;
	padding: 8px 12px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px;
	background-color: #fff;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.we-ls-weight-form textarea {
	height: auto;
	min-height: 84px;
	padding: 10px 12px !important;
	resize: vertical;
}

/* フォーカス時：枠を濃くし、うっすらリングで視認性UP */
.we-ls-weight-form input:focus,
.we-ls-weight-form select:focus,
.we-ls-weight-form textarea:focus,
.ws-ls-user-pref-form input:focus,
.ws-ls-user-pref-form select:focus,
.ws-ls-user-delete-all select:focus {
	border-color: #6b7280 !important;
	box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15);
	outline: none;
}

/* プラグイン内の .focus 付与クラスにも同等のスタイルを反映 */
.we-ls-weight-form input.focus,
.we-ls-weight-form select.focus,
.we-ls-datepicker.focus,
.ws-ls-select.focus {
	border-color: #6b7280 !important;
	box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15) !important;
	box-sizing: border-box !important;
}

/* バリデーション状態の色を少し落ち着かせる */
input.ws-ls-invalid {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
input.ws-ls-valid {
	border-color: #16a34a !important;
	box-shadow: none !important;
}

/* placeholder の薄さを少し整える */
.we-ls-weight-form input::placeholder,
.we-ls-weight-form textarea::placeholder {
	color: #9ca3af;
}

/* ---------- 3. ラベル・フォーム内段落の可読性 ---------- */
.ws-ls-inner-form p {
	font-size: 0.95em;
	margin-bottom: 6px;
	color: #374151;
}

.ws-ls-inner-form label {
	font-weight: 600;
	color: #1f2937;
}

/* フォーム内の並列入力（stones/pounds など）を縦に詰めすぎない */
.we-ls-weight-form .ykuk-grid + .ykuk-grid {
	margin-top: 10px;
}

/* ---------- 4. ボタン ---------- */
.we-ls-weight-form .ykuk-button,
.ws-ls-user-pref-form .ykuk-button,
.ws-ls-inner-form .ykuk-button {
	border-radius: 6px;
	padding: 0 18px;
	height: 40px;
	line-height: 38px;
	font-size: 14px;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.we-ls-weight-form .ykuk-button:hover,
.ws-ls-user-pref-form .ykuk-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.we-ls-weight-form .ykuk-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* ---------- 5. インフォボックス（各タブのカード） ---------- */
/* タブ内の情報ボックスに、ほんのり境界線と影をつけて区切りをはっきりさせる */
.ykuk-switcher > li > div,
.ws-ls-kiosk-tab {
	background: #ffffff;
}

/* ---------- 6. エラーサマリー ---------- */
.ws-ls-error-summary {
	padding: 12px 16px;
	margin-bottom: 20px;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #991b1b;
}
.ws-ls-error-summary p {
	margin-bottom: 6px;
	font-weight: 700;
	color: #991b1b;
}
.ws-ls-error-summary ul {
	margin: 0;
	padding-left: 20px;
}

/* ---------- 7. テーブル（履歴一覧など）の読みやすさ ---------- */
.ws-ls-footable,
.ykuk-table {
	font-size: 14px;
}
.ws-ls-footable th,
.ykuk-table th {
	font-weight: 600;
	color: #374151;
	background-color: #f9fafb;
}
.ws-ls-footable tbody tr:hover,
.ykuk-table tbody tr:hover {
	background-color: #f9fafb;
}

/* ---------- 8. タイトル ---------- */
.ws_ls_title {
	margin-top: 0 !important;
	margin-bottom: 14px !important;
	font-size: 1.1em;
	font-weight: 600;
	color: #111827;
}

/* ---------- 9. モバイル調整（〜640px） ---------- */
@media (max-width: 640px) {
	.ws-ls-tabs {
		margin: 16px 0 !important;
	}

	.we-ls-weight-form input[type="number"],
	.we-ls-weight-form input[type="text"],
	.we-ls-weight-form select,
	.we-ls-weight-form textarea,
	.we-ls-weight-form .we-ls-datepicker {
		height: 44px;          /* タップしやすいサイズ */
		font-size: 16px;       /* iOS のズーム抑制 */
	}

	.we-ls-weight-form .ykuk-button {
		height: 44px;
		line-height: 42px;
		width: 100%;
		margin-top: 8px;
	}

	ul.ykuk-tab-menu {
		gap: 4px;
		flex-wrap: wrap;
	}
}