/* 送迎スケジュール カレンダー */

.soge-app {
	--soge-open: #fff3bf;        /* 送迎可能日の色（黄色マーカー） */
	--soge-open-border: #f2cf4a;
	--soge-today: #1f6feb;
	--soge-line: #d9dde3;
	--soge-sat: #1f6feb;
	--soge-sun: #d6336c;
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 10px 40px;
	color: #222;
	font-size: 15px;
	-webkit-text-size-adjust: 100%;
}
.soge-app * { box-sizing: border-box; }
.soge-loading { padding: 40px; text-align: center; color: #888; }

/* ヘッダー */
.soge-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.soge-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	cursor: default;
	user-select: none;
	padding: 4px 8px;
	border-radius: 8px;
}
.soge-nav {
	border: 1px solid var(--soge-line);
	background: #fff;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}
.soge-nav:hover { background: #f4f6f8; }
.soge-today-btn {
	border: 1px solid var(--soge-line);
	background: #fff;
	border-radius: 8px;
	height: 40px;
	padding: 0 14px;
	cursor: pointer;
	font-size: 14px;
}
.soge-today-btn:hover { background: #f4f6f8; }
.soge-spacer { flex: 1; }

/* モードバッジ */
.soge-mode {
	font-size: 13px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	display: none;
}
.soge-app.is-admin .soge-mode {
	display: inline-block;
	background: #ffe3e3;
	color: #c92a2a;
	border: 1px solid #ffc9c9;
}
.soge-app.is-admin .soge-title { background: #fff0f0; }
.soge-exit {
	display: none;
	border: none;
	background: transparent;
	color: #c92a2a;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
}
.soge-app.is-admin .soge-exit { display: inline; }

/* 凡例 */
.soge-legend {
	font-size: 13px;
	color: #555;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.soge-legend .chip {
	display: inline-block;
	width: 16px; height: 16px;
	border-radius: 4px;
	background: var(--soge-open);
	border: 1px solid var(--soge-open-border);
	vertical-align: -3px;
}

/* 曜日ヘッダー */
.soge-dow {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin-bottom: 4px;
}
.soge-dow > div {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 0;
	color: #555;
}
.soge-dow .sat { color: var(--soge-sat); }
.soge-dow .sun { color: var(--soge-sun); }

/* 日グリッド */
.soge-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}
.soge-cell {
	border: 1px solid var(--soge-line);
	border-radius: 8px;
	background: #fff;
	min-height: 104px;
	padding: 4px 5px 6px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	cursor: default;
}
.soge-cell.empty { background: #fafbfc; border-style: dashed; }
.soge-cell.open {
	background: var(--soge-open);
	border-color: var(--soge-open-border);
	cursor: pointer;
}
.soge-cell.open:hover { filter: brightness(0.98); }
.soge-app.is-admin .soge-cell:not(.empty) { cursor: pointer; }

.soge-datenum {
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 5px;
}
.soge-cell.sat .soge-datenum { color: var(--soge-sat); }
.soge-cell.sun .soge-datenum { color: var(--soge-sun); }
.soge-cell.holiday .soge-datenum { color: var(--soge-sun); }
.soge-holi {
	font-size: 10px;
	line-height: 1.2;
	color: var(--soge-sun);
	margin: 1px 0 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.soge-cell.today .soge-datenum .n {
	background: var(--soge-today);
	color: #fff;
	border-radius: 999px;
	width: 24px; height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.soge-flex { flex: 1; }
.soge-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	margin-right: 3px;
	vertical-align: 1px;
	flex: none;
}
.soge-daytoggle {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border: 1px solid #40c057;
	background: #40c057;
	color: #fff;
	border-radius: 999px;
	padding: 3px 7px;
	cursor: pointer;
}
.soge-daytoggle.off {
	background: #fff;
	color: #adb5bd;
	border-color: #ccd2d9;
}
/* 設定モードの操作バー（セル下部） */
.soge-adminbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;
	padding-top: 4px;
}
/* セル内のボタンは文字を折り返さない（「確/認/済」と縦に割れるのを防ぐ） */
.soge-daytoggle, .soge-okmark, .soge-count { white-space: nowrap; }
/* 確認済みマーク（日付の右） */
.soge-okmark {
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background: #e03131;
	border-radius: 999px;
	padding: 1px 6px;
	margin-right: 3px;
}
/* 確認済みの日：緑の枠 */
.soge-cell.confirmed { box-shadow: inset 0 0 0 2px #40c057; }
.soge-count {
	font-size: 11px;
	font-weight: 700;
	color: #b8860b;
	background: #fff;
	border-radius: 999px;
	padding: 1px 7px;
	border: 1px solid var(--soge-open-border);
}
.soge-cell:not(.open) .soge-count { display: none; }

.soge-entries {
	margin-top: 3px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}
.soge-chip {
	font-size: 12px;
	line-height: 1.3;
	background: #fff;
	border: 1px solid var(--soge-open-border);
	border-radius: 5px;
	padding: 1px 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
}
.soge-chip .dest { color: #777; }
.soge-more { font-size: 11px; color: #b8860b; padding-left: 3px; }
.soge-add-hint { font-size: 11px; color: #b8860b; margin-top: auto; }

/* 管理モードで閉じている日に「＋可能日にする」ヒント */
.soge-app.is-admin .soge-cell:not(.open):not(.empty) .soge-open-hint {
	display: block;
	font-size: 11px;
	color: #999;
	margin-top: auto;
}
.soge-open-hint { display: none; }

/* モーダル */
.soge-modal-bg, .soge-modal-bg * { box-sizing: border-box; }
.soge-modal-bg {
	/* モーダルは .soge-app の外に描画されるため、色をここでも定義する */
	--soge-today: #1f6feb;
	--soge-line: #d9dde3;
	--soge-open-border: #f2cf4a;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 20px 12px;
	z-index: 99999;
	overflow: auto;
}
.soge-modal {
	background: #fff;
	border-radius: 14px;
	width: 100%;
	max-width: 460px;
	margin-top: 4vh;
	padding: 18px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.soge-modal h3 { margin: 0 0 4px; font-size: 19px; }
.soge-modal .sub { color: #777; font-size: 13px; margin: 0 0 14px; }

.soge-entry-row {
	border: 1px solid var(--soge-line);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
	position: relative;
}
.soge-entry-row .grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.soge-field { margin-bottom: 8px; }
.soge-field:last-child { margin-bottom: 0; }
.soge-field label { display: block; font-size: 12px; color: #666; margin-bottom: 3px; }
.soge-field input,
.soge-field select {
	width: 100%;
	max-width: 100%;
	border: 1px solid #c2c8d0;
	border-radius: 8px;
	padding: 10px;
	font-size: 15px;
	background: #fff;
	color: #222;
	line-height: 1.3;
	appearance: auto;
	-webkit-appearance: auto;
}
.soge-field input:focus,
.soge-field select:focus {
	outline: none;
	border-color: var(--soge-today);
	box-shadow: 0 0 0 3px rgba(31,111,235,0.15);
}

/* 行先セレクト＋色スウォッチ */
.soge-destwrap { display: flex; align-items: center; gap: 8px; }
.soge-swatch {
	width: 18px; height: 18px;
	border-radius: 5px;
	flex: none;
	border: 1px solid rgba(0,0,0,0.15);
}
.soge-destwrap select { flex: 1; }
.soge-destother { margin-top: 8px; }

/* 確定済み一覧（表） */
.soge-list-head { font-weight: 700; font-size: 14px; margin: 4px 0 6px; }
.soge-table {
	border: 1px solid var(--soge-line);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}
/* 予定1件（2段レイアウト） */
.soge-item {
	padding: 10px 12px;
	border-top: 1px solid var(--soge-line);
	font-size: 14px;
}
.soge-item:first-child { border-top: none; }

/* 1段目：名前 ＋ 時刻 */
.soge-item .line1 { display: flex; align-items: baseline; gap: 10px; }
.soge-item .nm {
	font-weight: 700;
	flex: 1;
	min-width: 0;
	/* 複数名が入るので折り返す（省略すると人数バッジまで隠れてしまう） */
	overflow-wrap: anywhere;
}
.soge-item .times {
	flex: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: #333;
}
.soge-item .times .lb { font-size: 11px; color: #999; font-weight: 400; margin-right: 3px; }
.soge-item .times .lb.sep { margin-left: 12px; }

/* 2段目：行先 ＋ 編集/削除 */
.soge-item .line2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.soge-item .ds { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.soge-item .ds .soge-dot { margin-right: 0; }
.soge-item .ds .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soge-item .ops { flex: none; display: flex; gap: 6px; }
.soge-item .ops button {
	border: 1px solid var(--soge-line);
	background: #fff;
	border-radius: 6px;
	font-size: 12px;
	padding: 5px 10px;
	cursor: pointer;
}
.soge-item .ops button.del { color: #c92a2a; border-color: #ffc9c9; }

/* 備考 */
.soge-item .rm {
	font-size: 12px;
	color: #555;
	background: #fafbfc;
	border-radius: 6px;
	padding: 5px 8px;
	margin-top: 6px;
}
.soge-empty {
	color: #777;
	font-size: 14px;
	padding: 14px;
	text-align: center;
	background: #f7f9fb;
	border-radius: 10px;
	margin-bottom: 16px;
}

/* 確認済みロックの案内 */
.soge-locked {
	background: #ebfbee;
	border: 1px solid #b2e6c4;
	color: #2b6a3e;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 14px;
}

/* 追加／編集フォーム */
.soge-form {
	border: 1px solid var(--soge-open-border);
	background: #fffdf5;
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 14px;
}
.soge-form-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: #b8860b; }
.soge-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.req {
	font-size: 11px;
	color: #fff;
	background: #fa5252;
	border-radius: 4px;
	padding: 1px 5px;
	margin-left: 4px;
	vertical-align: 1px;
	font-weight: 700;
}

/* 時間プルダウン */
.soge-timewrap { display: flex; align-items: center; gap: 6px; }
.soge-timewrap select { flex: 1; min-width: 0; }
.soge-timewrap .cl { font-weight: 700; color: #888; }
.soge-del {
	position: absolute;
	top: 8px; right: 8px;
	border: none;
	background: transparent;
	color: #c92a2a;
	cursor: pointer;
	font-size: 13px;
}
.soge-addbtn {
	width: 100%;
	border: 1px dashed var(--soge-open-border);
	background: #fffdf3;
	color: #b8860b;
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 14px;
}
.soge-closed-msg {
	background: #f1f3f5;
	color: #555;
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	font-size: 14px;
	margin-bottom: 14px;
}

.soge-modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 6px;
}
.soge-btn {
	border: none;
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.soge-btn.primary { background: var(--soge-today); color: #fff; }
.soge-btn.ghost { background: #eef1f4; color: #333; }
.soge-btn.confirm { background: #2b8a3e; color: #fff; }
.soge-btn:disabled { opacity: .5; cursor: default; }

/* スマホ */
/* ===== 月/週 切替ボタン ===== */
.soge-viewtoggle { display: inline-flex; border: 1px solid var(--soge-line); border-radius: 8px; overflow: hidden; }
.soge-viewtoggle button {
	border: none;
	background: #fff;
	padding: 0 16px;
	height: 40px;
	font-size: 14px;
	cursor: pointer;
	color: #555;
}
.soge-viewtoggle button + button { border-left: 1px solid var(--soge-line); }
.soge-viewtoggle button.on { background: var(--soge-today); color: #fff; font-weight: 700; }

/* ===== 週表示 =====
   曜日を横に7列並べ、その日の予定は各列の中で縦に積む。
   画面が狭いとき（900px以下）は1日1行の縦並びに戻す。 */
.soge-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	align-items: stretch;
}
.soge-wday {
	display: flex;
	flex-direction: column;
	min-height: 190px;
	border: 1px solid var(--soge-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
}
.soge-wday.open { background: var(--soge-open); border-color: var(--soge-open-border); }
.soge-wday.open:hover { filter: brightness(0.99); }
.soge-wday.confirmed { box-shadow: inset 0 0 0 2px #40c057; }

.soge-wday-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	padding: 8px 8px 7px;
	font-weight: 700;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.soge-wday .wd-date { font-size: 16px; }
.soge-wday .wd-dow { font-size: 12px; color: #666; font-weight: 400; }
.soge-wday.sat .wd-date, .soge-wday.sat .wd-dow { color: var(--soge-sat); }
.soge-wday.sun .wd-date, .soge-wday.sun .wd-dow,
.soge-wday.holiday .wd-date, .soge-wday.holiday .wd-dow { color: var(--soge-sun); }
.soge-wday .wd-holi { font-size: 11px; color: var(--soge-sun); font-weight: 400; width: 100%; }
.soge-wday.today .wd-date { background: var(--soge-today); color: #fff; border-radius: 6px; padding: 0 8px; }

/* 予定の一覧（縦積み） */
.soge-wlist { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.soge-eline {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 3px;
	background: #fff;
	border: 1px solid var(--soge-line);
	border-radius: 8px;
	padding: 6px 7px;
	font-size: 13px;
	min-width: 0;
}
.soge-eline .et { font-variant-numeric: tabular-nums; color: #333; font-weight: 700; font-size: 12px; }
.soge-eline .enm { display: flex; align-items: center; gap: 5px; min-width: 0; }
.soge-eline .en { font-weight: 700; overflow-wrap: anywhere; }
.soge-eline .ed { color: #555; font-size: 12px; overflow-wrap: anywhere; }
.soge-eline .er { color: #888; font-size: 11px; overflow-wrap: anywhere; }
.soge-wempty { padding: 8px; color: #b8860b; font-size: 12px; }
.soge-wclosed { padding: 8px; color: #999; font-size: 12px; }

/* 週表示のときだけ横幅を広げる（7列を読みやすくするため） */
.soge-app.is-week { max-width: 1400px; }

/* 狭い画面では従来どおり1日1行の縦並びに戻す */
@media (max-width: 900px) {
	.soge-week { grid-template-columns: 1fr; gap: 8px; }
	.soge-wday { min-height: 0; }
	.soge-wday-head { padding: 10px 12px; border-bottom: none; }
	.soge-wday .wd-date { font-size: 18px; }
	.soge-wday .wd-dow { font-size: 13px; }
	.soge-wday .wd-holi { width: auto; font-size: 12px; }
	.soge-wlist { padding: 0 12px 10px; gap: 6px; }
	.soge-eline {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px 8px;
		padding: 8px 10px;
		font-size: 15px;
	}
	.soge-eline .et { font-size: inherit; white-space: nowrap; }
	.soge-eline .ed { font-size: inherit; }
	.soge-eline .er { font-size: 13px; }
	.soge-wempty, .soge-wclosed { padding: 0 12px 12px; font-size: 13px; }
}

@media (max-width: 640px) {
	.soge-app { font-size: 14px; padding: 6px 6px 40px; }
	.soge-title { font-size: 19px; }
	.soge-cell { min-height: 72px; padding: 3px 3px 4px; border-radius: 6px; }
	.soge-datenum { font-size: 12px; }
	.soge-chip { font-size: 10px; padding: 1px 3px; }
	.soge-chip .dest { display: none; }
	.soge-count { padding: 0 5px; }
	.soge-dow > div { font-size: 11px; }
	.soge-viewtoggle button { padding: 0 12px; }
}
/* スマホの設定モード：セル内のボタンをひとまわり小さくして収める */
@media (max-width: 640px) {
	.soge-daytoggle { font-size: 9px; padding: 3px 6px; }
	.soge-adminbar { gap: 3px; padding-top: 3px; }
	/* 「確認済」は幅に収まらないので✓だけにする（状態は緑枠でも分かる） */
	.soge-okmark { font-size: 0; padding: 1px 4px; margin-right: 2px; }
	.soge-okmark::before { content: "✓"; font-size: 10px; }
	.soge-legend { font-size: 11px; line-height: 1.5; }
}

/* ===== 上部のお知らせ ===== */
.soge-notice {
	background: #fff4e6;
	border: 1px solid #ffd8a8;
	color: #8a4b08;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 10px;
}

/* ===== 名前（複数名） ===== */
.soge-names { display: flex; flex-direction: column; gap: 6px; }
.soge-namerow { display: flex; align-items: center; gap: 6px; }
.soge-namerow input { flex: 1; min-width: 0; }
.soge-namedel {
	flex: none;
	width: 38px;
	height: 38px;
	border: 1px solid var(--soge-line);
	background: #fff;
	color: #d6336c;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.soge-namedel:hover { background: #fff0f3; }
.soge-addname {
	margin-top: 6px;
	border: 1px dashed var(--soge-open-border);
	background: #fff;
	color: #b8860b;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.soge-addname:hover { background: #fffbea; }

/* 一覧に出す人数（複数名のとき） */
.soge-item .nm .pc,
.soge-eline .ecnt {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #b8860b;
	background: #fff8e1;
	border: 1px solid var(--soge-open-border);
	border-radius: 999px;
	padding: 0 6px;
	white-space: nowrap;
}

/* ===== 送迎の区分 ===== */
.soge-kind { display: flex; gap: 6px; }
.soge-kindbtn {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--soge-line);
	background: #fff;
	color: #555;
	border-radius: 8px;
	padding: 10px 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}
.soge-kindbtn.on {
	background: var(--soge-today);
	border-color: var(--soge-today);
	color: #fff;
}

@media (max-width: 640px) {
	.soge-notice { font-size: 13px; padding: 9px 12px; }
	.soge-kindbtn { font-size: 12px; padding: 10px 2px; }
}

/* ===== 使い方（PDF）ボタン ===== */
.soge-help {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--soge-line);
	border-radius: 8px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.soge-help:hover { background: #f4f6f8; }
.soge-help .ic { font-size: 15px; line-height: 1; }

@media (max-width: 640px) {
	.soge-help { height: 36px; padding: 0 10px; font-size: 13px; }
}
