/* =========================================================
   Flowlog style.css (Unified)
   - かんたん/くわしく モード
   - ツールバー / プロジェクトカード / 工程 / 履歴 / グラフ
   - モーダル（確認/履歴/ガイド/グラフ共通）
   - トースト / オンボーディング
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --gap: 10px;
  --radius: 10px;
  --radius-sm: 8px;

  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --panel: #ffffff;
  --border: #dddddd;
  --border-subtle: #eeeeee;

  --text: #111111;
  --text-muted: #666666;

  --pill: #f5f5f5;
  --pill-info-bg: #eef7ff;
  --pill-info-bd: #cfe5ff;
  --pill-good-bg: #eaffea;
  --pill-good-bd: #bde5bd;
  --pill-warn-bg: #fff5e6;
  --pill-warn-bd: #ffe0ad;
  --pill-badge-bg: #fff0fb;
  --pill-badge-bd: #ffc7f3;

  --btn-bg: #ffffff;
  --btn-bd: #bbbbbb;
  --btn-bg-hover: #f7f7f7;

  --focus: 2px solid #5b9dd9;
  --overlay: rgba(0,0,0,.6);
  --shadow-modal: 0 20px 60px rgba(0,0,0,.25);

  --toast-bg: #222222;
  --toast-text: #ffffff;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #292d35e6;
    --bg-subtle: #333e62e8;
    --panel: #2f3546bc;
    --border: #2a2e39;
    --border-subtle: #242837;

    --text: #eef2f7;
    --text-muted: #9aa6bf;

    --pill: #242837;
    --pill-info-bg: #142136;
    --pill-info-bd: #294972;
    --pill-good-bg: #15271a;
    --pill-good-bd: #2a5b38;
    --pill-warn-bg: #2a2115;
    --pill-warn-bd: #6b5321;
    --pill-badge-bg: #2a1830;
    --pill-badge-bd: #6b2d77;

    --btn-bg: #1b1f2a;
    --btn-bd: #3a4154;
    --btn-bg-hover: #232936;

    --focus: 2px solid #60a5fa;
    --toast-bg: #0b0d12;
    --toast-text: #e5e7eb;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: var(--text);
  background: var(--bg);
}
h1 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; letter-spacing: .2px; }
hr { border: none; border-top: 1px solid var(--border-subtle); margin: 16px 0; }

/* Focus */
:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* ---------- Toolbar / Inputs / Buttons ---------- */
.toolbar {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.toolbar input[type="text"],
.toolbar input[type="number"],
.toolbar input[type="date"],
.toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
}
button {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--text);
  cursor: pointer;
  transition: background-color .15s ease, transform .02s ease;
}
button:hover { background: var(--btn-bg-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }

/* Buttons with inline SVG / label-like input */
button svg { vertical-align: -2px; margin-right: 6px; }
label.button-like {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm); cursor: pointer;
  background: var(--btn-bg); color: var(--text);
}
label.button-like:hover { background: var(--btn-bg-hover); }

/* Small meta text */
.meta { color: var(--text-muted); font-size: 12px; }

/* ---------- Layout / Project card ---------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.project {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
}
.project header {
  display: flex;
  gap: var(--gap);
  align-items: center;
  flex-wrap: wrap;
}
.title { font-weight: 700; letter-spacing: .2px; }

/* Process block */
.process {
  padding: 8px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  margin: 8px 0;
  background: transparent;
}
.row {
  display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center;
}
.row input[type="text"],
.row input[type="number"] {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  min-width: 160px;
}

/* Pills */
.pill {
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--pill);
  border: 1px solid transparent;
}
.pill.info { background: var(--pill-info-bg); border-color: var(--pill-info-bd); }
.pill.good { background: var(--pill-good-bg); border-color: var(--pill-good-bd); }
.pill.warn { background: var(--pill-warn-bg); border-color: var(--pill-warn-bd); }
.pill.badge { background: var(--pill-badge-bg); border-color: var(--pill-badge-bd); }

/* ---------- Modal (shared) ---------- */
.modal {
  position: fixed; inset: 0;
  background: var(--overlay);
  display: none; /* JSでflexに */
  align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: var(--panel); color: var(--text);
  padding: 18px; border-radius: var(--radius);
  width: 720px; max-width: 92%;
  text-align: left; box-shadow: var(--shadow-modal);
  border: 1px solid var(--border);
}
.modal-content h2, .modal-content h3 { margin-top: 0; }
.modal-buttons { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
/* 中央寄せを強制したい modal で使うことがあるので */
.modal-content[style*="text-align:center"] { text-align: center !important; }

/* History modal */
#historyControls {
  display: flex; gap: var(--gap); flex-wrap: wrap;
  align-items: center; margin: 10px 0;
}
#historyList {
  max-height: 60vh; overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 8px;
}
.history-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px 10px; padding: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.history-item:last-child { border-bottom: none; }
.history-date-group { margin: 10px 0 4px; font-weight: 700; }

/* Chart modal */
#chartCanvas { display: block; width: 100%; height: auto; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-text);
  padding: 10px 14px; border-radius: var(--radius);
  opacity: 0; transition: opacity .25s, transform .25s;
  z-index: 1500; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* ---------- Onboarding (empty state) ---------- */
.onboarding {
  border: 1px dashed var(--btn-bd);
  padding: 16px; border-radius: var(--radius);
  margin-bottom: 12px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
}

/* ---------- Simple mode ---------- */
.simple .advanced { display: none !important; }

/* ---------- Helpers ---------- */
.hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) { .modal-content { width: 92vw; } }
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
  .project header { flex-direction: column; align-items: flex-start; }
  button { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 選択中のカードを強調表示 */
.project.selected {
  border-color: #5aa3ff;                 /* 目立つ縁色 */
  box-shadow: 0 0 0 3px rgba(90,163,255,.18);
  background: color-mix(in oklab, var(--panel) 92%, #eaf3ff 8%);
  position: relative;
}
.project.selected::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 6px;
  border-radius: 8px 0 0 8px;
  background: #5aa3ff;                   /* 左の帯 */
}
.project .selected-pill { display: none; }
.project.selected .selected-pill { display: inline-block; } /* 選択中だけ表示 */