/**
 * サクポチ - 大会タイムスケジュール・進行表ジェネレーター 専用スタイル
 * 共有クラス（.tool-card / .input-section / .btn-* 等）を再利用し、
 * 独自UIのみ tsm- 接頭辞で定義する。
 */

/* ========================================
   入力フォーム
   ======================================== */
.tsm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.tsm-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tsm-field--full {
	grid-column: 1 / -1;
}

.tsm-field--narrow {
	max-width: 220px;
}

.tsm-field label {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text);
}

.tsm-input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

select.tsm-input {
	cursor: pointer;
}

.tsm-input:focus {
	outline: none;
	border-color: var(--color-primary);
}

.tsm-input::placeholder {
	color: var(--color-text-muted);
}

/* 単位付き入力（数値＋単位） */
.tsm-input-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tsm-input-group .tsm-input {
	flex: 1;
	min-width: 0;
}

.tsm-unit {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--color-text-secondary);
}

/* ========================================
   試合数モード切替
   ======================================== */
.tsm-mode {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-bottom: 14px;
}

.tsm-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
}

.tsm-radio input {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.tsm-mode-panel[hidden] {
	display: none;
}

.tsm-hint {
	margin-top: 10px;
	font-size: 13px;
	color: var(--color-primary);
	line-height: 1.6;
}

/* ========================================
   休憩設定
   ======================================== */
.tsm-break {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--color-border);
}

.tsm-break-toggle {
	margin-bottom: 12px;
}

.tsm-break-fields[hidden] {
	display: none;
}

/* ========================================
   進行表（結果）
   ======================================== */
.tsm-result-section {
	background: var(--color-bg);
}

.tsm-print-head {
	margin-bottom: 14px;
}

.tsm-result-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary-dark);
	line-height: 1.4;
}

.tsm-result-meta {
	margin-top: 4px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

/* サマリーバー */
.tsm-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.tsm-summary-item {
	flex: 1;
	min-width: 110px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.tsm-summary-item--accent {
	border-color: var(--color-accent);
	background: #fff6f1;
}

.tsm-summary-label {
	font-size: 12px;
	color: var(--color-text-muted);
}

.tsm-summary-value {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.1;
}

.tsm-summary-item--accent .tsm-summary-value {
	color: var(--color-accent);
}

/* テーブル */
.tsm-table-wrapper {
	overflow-x: auto;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.tsm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.tsm-table th,
.tsm-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	white-space: nowrap;
}

.tsm-table thead th {
	background: var(--color-bg);
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-secondary);
	position: sticky;
	top: 0;
}

.tsm-table tbody tr:last-child td {
	border-bottom: none;
}

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

.tsm-col-no {
	width: 48px;
	text-align: center !important;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.tsm-col-time {
	width: 72px;
	font-family: var(--font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tsm-col-court {
	width: 96px;
}

.tsm-col-card {
	width: auto;
	min-width: 160px;
	white-space: normal !important;
}

.tsm-court-badge {
	display: inline-block;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-primary-dark);
	background: #eef2f7;
	border-radius: 999px;
}

.tsm-empty-cell {
	padding: 32px 16px !important;
	text-align: center !important;
	color: var(--color-text-muted);
	white-space: normal !important;
}

.tsm-foot-note {
	margin-top: 10px;
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* ========================================
   アクション
   ======================================== */
.tsm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

/* ========================================
   レスポンシブ
   ======================================== */
@media (max-width: 600px) {
	.tsm-grid {
		grid-template-columns: 1fr;
	}

	.tsm-field--narrow {
		max-width: none;
	}

	.tsm-summary-item {
		min-width: calc(50% - 5px);
	}

	.tsm-actions {
		justify-content: stretch;
	}

	.tsm-actions .btn-primary,
	.tsm-actions .btn-secondary {
		flex: 1;
		text-align: center;
	}
}

/* ========================================
   印刷：進行表だけを表示（A4・複数ページ可）
   ======================================== */
@media print {

	/* ページ全体のUI・フォーム・SEOカード・関連を隠す */
	.header,
	.footer,
	.breadcrumb,
	.page-header,
	.adsense-wrapper,
	.adsense-label,
	.toast,
	.action-section,
	.tool-note,
	.card {
		display: none !important;
	}

	/* tool-card 内の入力用 input-section は隠し、進行表だけ残す */
	.tool-card>.input-section:not(.tsm-result-section) {
		display: none !important;
	}

	body,
	.page,
	.main,
	.tool-card,
	.tsm-result-section {
		background: #fff !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		box-shadow: none !important;
		max-width: none !important;
		width: auto !important;
	}

	.tsm-result-section {
		padding: 0 !important;
	}

	.tsm-print-head {
		margin-bottom: 8px !important;
	}

	.tsm-result-title {
		font-size: 16pt;
		color: #000 !important;
	}

	.tsm-result-meta {
		color: #000 !important;
		font-size: 10pt;
	}

	/* サマリーは進行表の上に簡潔に並べる */
	.tsm-summary {
		gap: 6px !important;
		margin-bottom: 10px !important;
	}

	.tsm-summary-item,
	.tsm-summary-item--accent {
		background: #fff !important;
		border: 1px solid #999 !important;
		padding: 6px 10px !important;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.tsm-summary-value,
	.tsm-summary-item--accent .tsm-summary-value {
		color: #000 !important;
		font-size: 13pt;
	}

	/* 表は素直に流す。ヘッダ行は各ページで繰り返す */
	.tsm-table-wrapper {
		overflow: visible !important;
		border: none !important;
	}

	.tsm-table {
		width: 100% !important;
		font-size: 11pt;
	}

	.tsm-table thead {
		display: table-header-group;
	}

	.tsm-table thead th {
		position: static !important;
		background: #eee !important;
		color: #000 !important;
		border: 1px solid #333 !important;
	}

	.tsm-table th,
	.tsm-table td {
		border: 1px solid #333 !important;
		color: #000 !important;
	}

	/* 行の途中分断を防ぐ */
	.tsm-table tr {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.tsm-table tbody tr:nth-child(even) td {
		background: #f4f4f4 !important;
	}

	/* 記入用カード欄は印刷時に十分な高さを確保 */
	.tsm-col-card {
		min-width: 0 !important;
	}

	.tsm-court-badge {
		background: #eee !important;
		color: #000 !important;
		border: 1px solid #999 !important;
	}

	.tsm-foot-note {
		color: #000 !important;
		font-size: 9pt;
		margin-top: 8px !important;
	}

	/* 用紙はA4縦・余白控えめ（試合数が多ければ複数ページに分割） */
	@page {
		size: A4 portrait;
		margin: 12mm;
	}

	/* 背景色・枠を確実に印刷 */
	.tsm-table,
	.tsm-table th,
	.tsm-table td,
	.tsm-summary-item,
	.tsm-court-badge {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
}