/* ========== ibesuke theme tokens (mobile-first) ========== */
:root{
  /* brand */
  --bg-page: #F5F4F3;
  --c-home: #019CCF;   /* ホーム */
  --c-task: #EA7700;   /* タスク登録 */
  --c-sch:  #E2E100;   /* 日程調整 */
  --c-ok:   #00CE4E;   /* ○ */
  --c-warn: #D92D20;   /* 警告/エラー系（赤系OK） */
  --text:   #111827;   /* gray-900 相当 */
  --muted:  #6B7280;   /* gray-500 相当 */

  /* emphasis colors for ○/△/×（前景/背景） */
  --ok-fg:    var(--c-ok);
  --ok-bg:    #E8FAF0;
  --maybe-fg: var(--c-sch);
  --maybe-bg: #FFF9D7;
  --ng-fg:    var(--c-warn);
  --ng-bg:    #FDE8E8;

  /* runtime: JS から切り替えるアクセント */
  --accent: var(--c-home);
}

/* ===== 基本レイアウト ===== */
body{ background: var(--bg-page); color: var(--text); }

/* 画面カードのアクセント枠（有効時のみ枠色を付与） */
#appCard{
  border: 2px solid transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
#appCard.has-accent{
  border-color: var(--accent);
}

/* ===== モーダルはタブより前面へ ===== */
#modal{ z-index:80 !important; }  /* #bottomTabs は z-index:50 想定 */

/* ===== ボトムタブ ===== */
#bottomTabs{
  background: #ffffff;            /* 透過禁止：白バー */
  color: var(--muted);
  border-top: 1px solid #E5E7EB;  /* gray-200 */
  box-shadow: 0 -6px 16px rgba(0,0,0,.04);
}
#bottomTabs .tabbtn{
  background: #ffffff;
  color: var(--text);
  border-radius: .75rem;
  font-weight: 600;
}

#bottomTabs .tabbtn.active{ background: var(--accent); color: var(--accent-contrast,#fff); }

#eventDateDisplay{ min-height:28px; }

/* ===== ホーム上部：右側のみ下線（ラベルと値のペア感を出す） ===== */
.field-underline{
  border-bottom: 1px solid #E5E7EB;  /* gray-200 と同等 */
  padding-bottom: .25rem;
}

/* ===== ユーティリティ（Tailwind未読込時のフォールバック） ===== */
.whitespace-nowrap{ white-space:nowrap; }
.overflow-y-auto{ overflow-y:auto; }
.max-h-60{ max-height:15rem; }


/* ===== スケジュール ○/△/× のルック ===== */
.seg{
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:9999px;
  background:#F1F5F9;
  padding:4px;
  min-width:0;
  flex:1 1 0;
  box-shadow:inset 0 0 0 1px #E2E8F0;
}
.seg button{
  flex:1 1 0;
  min-width:0;
  padding:.65rem 0;
  font-size:.95rem;
  font-weight:700;
  border:none;
  border-radius:9999px;
  background:transparent;
  color:#64748B;
  transition:all .16s ease;
}
.seg button:hover{ background:#E2E8F0; }
.seg button.active{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,23,42,.12);
}
.seg button.ok.active{    background: var(--ok-bg);    color: var(--ok-fg); }
.seg button.maybe.active{ background: var(--maybe-bg); color: var(--maybe-fg); }
.seg button.ng.active{    background: var(--ng-bg);    color: var(--ng-fg); }
.date-label{font-size:.82rem;line-height:1.2;white-space:nowrap;min-width:84px;text-align:left;font-weight:700}
.best-row{ outline:2px solid var(--c-ok); } /* パレット準拠の強調 */

/* ====== スケジュール結果行 ====== */
.sch-row{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:14px 16px;border:1px solid #E5E7EB;border-radius:16px;background:#F9FAFB;
  box-shadow:0 6px 18px rgba(15,23,42,.05);}
.sch-row .date{font-weight:700;font-size:.95rem;color:#111827;}
.sch-row .date.sun,
.sch-row .date.hol{color:#DC2626;}
.sch-row .date.sat{color:#2563EB;}
.sch-row .date.hol.sat{color:#DC2626;}
.sch-row .counts{display:flex;gap:16px;font-weight:600;font-size:.9rem;align-items:center;}
.sch-row .counts .ok{color:var(--ok-fg)}
.sch-row .counts .maybe{color:var(--maybe-fg)}
.sch-row .counts .ng{color:var(--ng-fg)}
.sch-row .chev{opacity:.55;font-size:1.25rem;background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;}
.sch-row.selected{
  box-shadow:0 0 0 2px var(--c-sch),0 12px 26px rgba(226,225,0,.24);
  background:#FFF3A1;
}

/* スケジュール入力行 */
.sch-input-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:16px;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.sch-input-date{
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
  color:#111827;
}
.sch-input-date.sun,
.sch-input-date.hol{
  color:#DC2626;
}
.sch-input-date.sat{
  color:#2563EB;
}
.sch-input-date.hol.sat{
  color:#DC2626;
}
.sch-input-row .seg{
  flex:1 1 200px;
  min-width:0;
}

/* タブピル（ページ内タブ） */
.tabpill{
  padding:.6rem 0;
  border-radius:.75rem;
  background:#E5E7EB;
  font-weight:600;
  text-align:center;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 0;
  min-width:0;
}

/* スクロール領域を日付リストのみに限定 */
#viewSchedule .viewBody{display:flex;flex-direction:column;overflow:hidden}
#schScroll{flex:1 1 auto;min-height:0;overflow:auto}


/* ===== フォーカスリング（A11y） ===== */
button, a, select, input{
  outline: none;
}
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible{
  box-shadow: 0 0 0 3px rgba(1,156,207,.25);
  border-radius: .5rem;
}

/* 小型端末の安全余白 */
@supports(padding:max(0px)){
  body{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* ====== 日程調整（スクロール領域のみスクロール） ====== */
#viewSchedule .viewBody{display:flex;flex-direction:column;min-height:0;}
#schScroll{scroll-behavior:smooth;}

/* ===== Brand UI utilities (Tailwind不在でも機能) ===== */
.btn{ display:inline-block; text-align:center; font-weight:600; border:none; border-radius:.75rem; padding:.75rem 1rem; }
.btn--home{ background:var(--c-home); color:#fff; } /* 互換: 既存があっても壊さない */
.btn--ok{ background:var(--c-ok); color:#fff; }     /* 互換 */
.btn--task{ background:var(--c-task); color:#fff; }
.btn--sch{ background:var(--c-sch); color:#111827; }
.btn--accent{ background: var(--accent); color: var(--accent-contrast,#fff); }
.btn--ghost{ background:#fff; color:#4B5563; border:1px solid #D1D5DB; box-shadow:0 1px 2px rgba(15,23,42,.08); }
.btn--ghost:hover{ background:#F9FAFB; }
.btn--edit{ background:#E2E100; color:#111827; }   /* 編集/戻す（黄/黒） */
.btn--complete{ background:var(--accent); color:var(--accent-contrast,#fff); border:none; box-shadow:0 2px 6px rgba(1,156,207,.2); }
.btn--complete:hover{ filter:brightness(.95); }
.btn-xs{ padding:.35rem .5rem; font-size:.8rem; border-radius:.5rem; }
.brand-link{ color:var(--accent); text-decoration:underline; }

/* 日程調整のタブ（入力/結果） */
.tabpill.active{ background:var(--accent); color: var(--accent-contrast,#fff); }
.sch-tabbar{
  display:flex;
  width:100%;
  flex-wrap:nowrap;
}
.sch-tabbar .tabpill{
  flex:1 1 0;
  padding:.65rem .5rem;
  font-size:1rem;
}
.sch-tabbar .tabpill + .tabpill{ margin-left:12px; }

/* タスク一覧のセクション見出し（バー） */
/* （旧）アコーディオン見出しは未使用化 */

/* ○/△/× カラー（結果表示） */
.c-ok{ color:var(--ok-fg); }
.c-maybe{ color:var(--maybe-fg); }
.c-ng{ color:var(--ng-fg); }

/* ==== iOS Safari の date入力が短くなる問題の対策 ==== */
/* タスク名と同じ 100% 幅に強制し、見た目もテキスト入力と揃える */
#taskName,
#dueDate {
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* iOS Safari で date が独自幅になるのを抑止 */
input[type="date"] {
  inline-size: 100% !important; /* writing-mode 依存なく横幅100% */
  width: 100% !important;       /* 互換用に width も明示 */
  display: block;               
  -webkit-appearance: none;     /* iOS のネイティブ外観を無効化してCSSを効かせる */
  appearance: none;
  background-color: #fff;       /* テキスト入力と同じ白地 */
  border: 1px solid #e5e7eb;    /* 既存と同じ枠線 */
  border-radius: .5rem;         /* 既存と同じ角丸 */
  padding: .5rem .75rem;        /* 既存と同じ余白 */
}

/* Safariの内側コンテンツの余白を詰めて左右長さを揃える */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  padding: 0;
}

/* ===== 統一サイズ（タスク名／期限） & iOS対策 ===== */

/* 共通高さ（必要に応じて 44〜52px で微調整可） */
:root { --input-h: 48px; }

/* タスク名・期限を完全に同サイズに */
#taskName,
#dueDate {
  width: 100% !important;
  height: var(--input-h) !important;
  line-height: calc(var(--input-h) - 2px) !important;
  padding: 0 .75rem !important;       /* 左右だけ余白 */
  border: 1px solid #e5e7eb !important;
  border-radius: .5rem !important;
  background: #fff !important;
  display: block !important;
  box-sizing: border-box !important;

  /* タスク名は1行で省略表示（期限も同じ見た目に） */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  font-size: 16px; /* iOS のズーム防止 & 見た目揃え */
}

/* iOS Safari の date入力が勝手に小さく/内側が“丸pill”になるのを抑止 */
input[type="date"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  inline-size: 100% !important; /* writing-mode 依存なしで横幅100% */
  background-clip: padding-box;
}

/* 内側テキスト領域の高さ/寄せを統一 */
input[type="date"]::-webkit-date-and-time-value {
  line-height: inherit;
  min-height: 0;
  text-align: left;
  padding: 0;
}

/* （任意）プレースホルダの三点リーダーも揃える */
#taskName::placeholder { text-overflow: ellipsis; }

/* ==== タスク登録フォームの整形（タスク名を1行／ボックス幅そろえる） ==== */

/* 左ラベル（タスク名・期限・担当者）を必ず 1 行表示にする */
#viewTask h2.text-base.font-semibold.shrink-0{
  white-space: nowrap !important;
}

/* 右側の入力ボックスの横幅を強制的にそろえる（タスク名＝期限と同じ幅） */
#viewTask .flex.items-center.justify-between.gap-3 > .relative{
  width: 66.6667% !important;   /* = w-2/3 と同値（両行で統一） */
}

/* 入力欄のサイズは先に入れた共通ルールを踏襲（高さ/余白も一致） */
#taskName,
#dueDate{
  width: 100% !important;
  /* すでに設定済みの --input-h, padding, border 等が効いていればOK。
     念のため上書きが必要なら以下を解除:
     height: var(--input-h) !important;
     line-height: calc(var(--input-h) - 2px) !important;
  */
  white-space: nowrap !important;   /* タスク名の入力文字も1行 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ===== 開催日ポップの date 高さをタスク期限と統一 ===== */
#fixedDatePick{
  height: var(--input-h) !important;
  line-height: calc(var(--input-h) - 2px) !important;
  padding: 0 .75rem !important;
  font-size: 16px;
}

/* ===== プレースホルダのオーバーレイ（Tailwind不在でも表示） ===== */
.ph-ov{
  position:absolute; left:.75rem; right:auto; top:0; bottom:0;
  display:flex; align-items:center; color:#9CA3AF; /* gray-400 */
  pointer-events:none; user-select:none; -webkit-user-select:none;
}

/* ===== 2カラム横並び（モバイル含む） ===== */
.row-2col{ display:flex; gap:.5rem; }
.row-2col > *{ flex:1 1 0; }

/* 横並びで縦中央寄せしたい時に併用 */
.ai-center{ align-items:center; }

/* ===== 入力欄の統一高さユーティリティ（48px） ===== */
.h-input{
  height: var(--input-h) !important;
  line-height: calc(var(--input-h) - 2px) !important;
  padding: 0 .75rem !important;
  font-size: 16px !important;  /* iOSズーム防止 */
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: .5rem !important;
}

/* ========== カレンダー（複数日選択） ========== */
.cal .head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.25rem;
}
.cal .grid{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px;
}
.cal .dow{ font-size:.75rem; text-align:center; color:#6B7280; }
.cal .day{
  height:44px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb; border-radius:.5rem;
  font-weight:600;
}
.cal .day.is-empty{ visibility:hidden; }
.cal .day.is-selected{
  outline:2px solid var(--accent);
  background:#F0F9FF;
}

/* 選択済みピル */
.sel-list{ display:flex; flex-wrap:wrap; gap:6px; }
.sel-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; background:#F3F4F6; border-radius:9999px; font-size:.8rem;
}
.sel-pill button{ line-height:1; padding:0 2px; border:none; background:transparent; }

/* row-2col を縦中央に揃えられるように */
.row-2col{ display:flex; gap:.5rem; }
.row-2col.items-center{ align-items:center; }

/* ==== 候補日：選択欄（高さ固定で中だけスクロール） ==== */
.selbox{
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .5rem .75rem;
  min-height: 96px;
  max-height: 96px;
  overflow: auto;
  white-space: normal;       /* 右端で自然に折返し（日本語の「、」でも折返し可） */
  word-break: break-word;    /* 長いトークンもはみ出さない */
  line-height: 1.4;
  background: #fff;
}
.selbox.is-empty{ color:#9CA3AF; } /* gray-400 */

/* ==== カレンダー（候補日選択） ==== */
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.cal-head h4{ font-weight:700; font-size:1.1rem; }
.cal-nav{ display:flex; gap:.5rem; }
.cal-nav button{ border:1px solid #e5e7eb; border-radius:.5rem; padding:.35rem .6rem; background:#fff; }
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; margin-top:.5rem;
}
.cal-cell{
  height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; border-radius:.75rem; background:#fff; font-weight:600;
}
.cal-cell.is-sel{ background:#E8FAF0; color:inherit; box-shadow:inset 0 0 0 2px #00CE4E33; }
.cal-week{ display:grid; grid-template-columns:repeat(7,1fr); margin-top:.5rem; font-size:.8rem; opacity:.75; column-gap:.5rem; text-align:center; }
.cal-week > div{ text-align:center; }
.cal-week .sun, .cal-week .hol{ color:#EF4444; }
.cal-week .sat{ color:#2563EB; }
.cal-cell.sun, .cal-cell.hol{ color:#EF4444; }
.cal-cell.sat{ color:#2563EB; }
.cal-cell.hol.sat{ color:#EF4444; }
.cal-ops{ display:flex; justify-content:space-between; align-items:center; margin-top:.75rem; }
.cal-ops .left{ display:flex; gap:.75rem; }

.btn:disabled, .btn[disabled]{ opacity:.5; cursor:not-allowed; }
.modal-scroll{
  max-height:62vh;
  overflow-y:auto;
  margin-right:-4px;
  padding:4px 6px 8px;
}
.modal-scroll::-webkit-scrollbar{ width:6px; }
.modal-scroll::-webkit-scrollbar-thumb{ background:rgba(17,24,39,.25); border-radius:999px; }