/* トグルスイッチ・休暇設定ページ・自動返信
   ★見た目の設定は css/ の番号順に読み込む（base.html）。後の番号ほど優先される。
   ★2026-10-09 に style.css を順番を変えずに切り分けたもの（つなぐと元と同じ）。 */

/* トグルスイッチ（ON/OFFが色と位置で分かる。チェックボックスより誤操作が少ない） */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; width: 46px; height: 26px; border-radius: 13px;
  background: #c9cfd6; transition: background .15s; flex: 0 0 auto; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s; }
.switch input:checked + .switch-track { background: #1a7f37; }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid #1d4f91; outline-offset: 2px; }
.switch-label { font-size: 14px; font-weight: 600; }

/* 休暇設定ページ：スイッチと状態を1行にまとめる（ページ見出しは置かない） */
.vac-switch-row { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid #eef1f4; }
.vac-switch-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vac-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vac-badge { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 14px;
  border: 1px solid transparent; white-space: nowrap; }
.vac-badge-on { background: #e6f4ea; color: #1a7f37; border-color: #b7e0c4; }
.vac-badge-wait { background: #fff6e5; color: #8a5a00; border-color: #f0d9a8; }
.vac-badge-off { background: #f1f3f5; color: #6b7684; border-color: #e0e4e8; }
.vac-row-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px; }
.vac-row-top .settings-check { margin: 0; }
.vac-sub { font-size: 11px; color: #8a93a0; }

/* 休暇設定ページ */
.vac-card { background: #fff; border: 1px solid #e3e7ec; border-radius: 10px;
  padding: 18px 20px; margin-bottom: 16px; }
.vac-card h2 { font-size: 15px; margin: 0 0 12px; }
.vac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vac-grid textarea { width: 100%; font-size: 13px; line-height: 1.6; }
.vac-col-head { font-size: 12px; color: #6b7684; font-weight: 600; margin-bottom: 4px; }
/* 日付欄：曜日つきの表示（本物の日付欄はカレンダー用に隠しておく） */
.vac-date-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.vac-date-view { width: 168px; cursor: pointer; background: #fff; text-align: center;
  padding-right: 30px; }
/* カレンダーのアイコンは入力欄の中（右端）に重ねて置く */
.vac-date-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; padding: 0 2px; cursor: pointer;
  font-size: 14px; line-height: 1; opacity: .65; }
.vac-date-btn:hover { opacity: 1; }
.vac-date-real { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.vac-date-real.vac-date-real-shown { position: static; width: auto; height: auto;
  opacity: 1; pointer-events: auto; }

.vac-save-state { font-size: 12px; font-weight: normal; color: #8a93a0; margin-left: 8px; }
.vac-save-ok { color: #1a7f37; }
.vac-save-err { color: #b3261e; }
/* 送る文面の見出し行：左に見出し、右に日付の差し込みボタン */
.vac-body-head { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.vac-body-head h2 { margin: 0; }
.vac-insert { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: #6b7684; }
/* 既定に戻すボタン：挿入ボタンと同じ形にしつつ、少し離して控えめにする */
.vac-default-btn { margin-left: 10px; color: #6b7684; }
.vac-default-btn:hover { background: #f3f5f7; }
@media (max-width: 800px) { .vac-grid { grid-template-columns: 1fr; } }

/* 休暇中の自動返信（共通部品） */
.settings-check { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 13px; }
.settings-check input { width: auto; margin: 0; }
.ar-dates { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.ar-dates label { display: flex; align-items: center; gap: 8px; margin: 0; flex: 0 0 auto; }
.ar-mode { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 10px; }
.ar-mode .settings-check { margin: 0; }
.ar-accounts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.ar-accounts .settings-check { margin: 0; }
.ar-preview { background: #f6f8fa; border: 1px solid #dfe3e8; border-radius: 6px;
  padding: 10px; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.ar-log { width: 100%; border-collapse: collapse; font-size: 12px; }
.ar-log th, .ar-log td { border-bottom: 1px solid #e6e9ed; padding: 5px 6px; text-align: left;
  vertical-align: top; }
.ar-log th { color: #6b7684; font-weight: 600; }