@charset "UTF-8";

/* =========================================
   WEB TOOLS: ロボット調整 画面 専用装飾
   影響範囲を .page-frame 配下に限定
========================================= */

:root {
	--brand: #00b4d8;
	--brand-dark: #0096c7;
	--ink: #222;
	--muted: #666;
	--line: #e9ecef;
	--card-bg: #ffffff;
	--soft-bg: #f8fafc;
	--shadow: 0 10px 30px rgba(0,0,0,0.08);
	--radius: 14px;
}

/* 背景に淡いグラデーション */
body {
	background: radial-gradient(1200px 800px at 20% -10%, #eaf6ff 0%, transparent 50%),
	            radial-gradient(1000px 600px at 120% 10%, #fff0f5 0%, transparent 50%),
	            #ffffff;
}

/* レイアウトコンテナ */
.page-frame {
	max-width: 1100px;
	margin: 120px auto 80px auto;
	padding: 0 20px;
}

/* タブ全体のカード化 */
.page-frame .tab-panel {
	background: var(--card-bg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
	overflow: hidden;
}

/* 上のタブ（タイトル） */
.page-frame .tab-group:first-of-type {
	display: flex;
	gap: 8px;
	padding: 16px 18px;
	background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
	border-bottom: 1px solid var(--line);
}
.page-frame .tab-group:first-of-type .tabTool {
	display: inline-block;
	padding: 8px 14px;
	font-weight: 700;
	border-radius: 999px;
	background: #eef7fb;
	color: var(--brand-dark);
	border: 1px solid #d7eef6;
}
.page-frame .tab-group:first-of-type .tabTool.is-active {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

/* 注意書きタブ（説明） */
.page-frame .tab-group:nth-of-type(2) {
	padding: 10px 20px 20px 20px;
	color: var(--muted);
	line-height: 1.8;
}
.page-frame .tab-group:nth-of-type(2) .tabTool {
	border: none;
	padding: 0;
	font-weight: 500;
}

/* ステータスボックス */
.page-frame #ble-status.box {
	display: inline-block;
	width: auto !important;
	min-width: 220px;
	padding: 10px 14px;
	border-radius: 10px;
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 6px 18px rgba(0, 180, 216, 0.08);
}

/* ステータス + アクション横並び */
.page-frame .status-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 8px auto 16px;
	padding: 0 16px; /* 枠との余白を追加 */
	flex-wrap: wrap;
}
.page-frame .status-actions .actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
/* ボタン自体の横paddingを少し増やして押しやすく */
.page-frame .status-actions .actions .tool_conn {
	padding: 12px 20px;
}

/* パネル本体 */
.page-frame .panel-group {
	padding: 10px 20px 24px 20px;
	color: var(--ink); /* 既存CSSのオレンジ指定を打ち消す */
}
.page-frame .panel.is-show {
	padding: 10px 6px 20px 6px;
}

/* 調整テーブルのカード風装飾 */
.page-frame .tool_item_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px; /* 行間に余白 */
}
.page-frame .tool_item_table tr {
	background: var(--soft-bg);
	border: 1px solid var(--line);
	box-shadow: 0 6px 18px rgba(0,0,0,0.03);
}
.page-frame .tool_item_table td {
	padding: 12px 14px;
	vertical-align: middle;
}
.page-frame .tool_item_title {
	font-weight: 700;
	color: var(--ink);
	width: 220px;
}
.page-frame .tool_item_num_data {
	width: 200px;
}
.page-frame .tool_item_content { }

/* 入力欄 */
.page-frame .adjust_edit {
	width: 100%;
	max-width: 120px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font-family: 'Roboto Mono', monospace;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.page-frame .adjust_edit:focus {
	outline: 2px solid rgba(0,180,216,0.2);
	border-color: var(--brand);
}

/* ボタン - 接続/切断 */
.page-frame .tool_conn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--brand);
	background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1;
	min-width: 150px; /* 既存widthを自然な最小幅に */
	height: auto;     /* 固定高さを解除 */
	letter-spacing: 0.02em;
	box-shadow: 0 8px 16px rgba(0,180,216,0.25);
	cursor: pointer;
	transition: transform 0.05s ease, filter 0.2s ease;
}
.page-frame .tool_conn:hover { filter: brightness(1.02); }
.page-frame .tool_conn:active { transform: translateY(1px); }
.page-frame .tool_conn:focus-visible {
	outline: 3px solid rgba(0,180,216,0.35);
	outline-offset: 2px;
}
.page-frame .tool_conn[disabled] {
	filter: grayscale(0.2) opacity(0.6);
	cursor: not-allowed;
}

/* ボタン - アクション（動く/保存など） */
.page-frame .tool_move_button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	min-width: 150px; /* 既存widthを自然な最小幅に */
	height: auto;     /* 固定高さを解除 */
	box-shadow: 0 6px 14px rgba(0,0,0,0.06);
	cursor: pointer;
	transition: transform 0.05s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-frame .tool_move_button:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
	box-shadow: 0 8px 18px rgba(0, 180, 216, 0.15);
}
.page-frame .tool_move_button:active { transform: translateY(1px); }
.page-frame .tool_move_button:focus-visible {
	outline: 3px solid rgba(0,180,216,0.25);
	outline-offset: 2px;
}
.page-frame .tool_move_button[disabled] {
	filter: grayscale(0.2) opacity(0.6);
	cursor: not-allowed;
}

/* 区切りと見出し */
.page-frame hr {
	border: none;
	border-top: 1px solid var(--line);
}
.page-frame ol {
	margin-left: 20px;
	color: var(--muted);
}
.page-frame .tool_content {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 6px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* フッター */
.page-footer {
	text-align: center;
	padding: 20px 0 60px;
	color: var(--muted);
}
.page-footer .last_update {
	display: inline-block;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* レスポンシブ */
@media (max-width: 900px) {
	.page-frame { margin-top: 100px; }
	.page-frame .tool_item_title { width: 160px; }
	.page-frame .tool_item_num_data { width: 150px; }
	.page-frame .status-actions { gap: 10px; }
	.page-frame .status-actions .actions { gap: 10px; }
	.page-frame .status-actions { padding: 0 12px; }
}