/* ═══════════════════════════════════════
   KPI Dashboard — 共通スタイル
   全ページで読み込む
═══════════════════════════════════════ */

:root {
  --bg:       #f0f2f5;
  --surface:  #ffffff;
  --surface2: #f8fafc;
  --border:   #e2e8f0;
  --text:     #1a1a2e;
  --sub:      #64748b;
  --accent:   #4f8ef7;
  --good:     #22c55e;
  --warn:     #f59e0b;
  --bad:      #ef4444;
  --purple:   #7c3aed;
  --header:   #1a1a2e;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── 2段ヘッダー ─────────────────────── */
header {
  background: var(--header);
  color: #fff;
  position: sticky; top: 0; z-index: 100;
  flex-shrink: 0;
}

/* 1段目: タイトル + アカウント */
.header-row1 {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-brand {
  display: flex; align-items: center; gap: 8px;
}
.header-brand h1 {
  font-size: 0.95rem; font-weight: 700; color: #fff;
  letter-spacing: -.01em;
}
.header-row1 .nav-links {
  margin-left: 14px;
}
.header-account {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* 2段目: メニュー + アクション */
.header-row2 {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 20px;
  flex-wrap: wrap;
}
.header-actions {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-left: auto;
}

/* ── ナビ ── */
.nav-links { display: flex; gap: 2px; }
.nav-link {
  color: rgba(255,255,255,.55); text-decoration: none;
  font-size: 0.8rem; padding: 5px 11px; border-radius: 6px;
  transition: background .12s, color .12s;
}
.nav-link:hover  { background: rgba(255,255,255,.1);  color: #fff; }
.nav-link.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }

/* ── ユーザー選択 ── */
.user-select {
  background: rgba(255,255,255,.12); color: #fff;
  border: none; border-radius: 8px;
  padding: 5px 10px; font-size: 0.82rem; cursor: pointer; outline: none;
}
.user-select option { color: var(--text); background: #fff; }
.user-badge {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* ── 期間バッジ ── */
.period-badge {
  font-size: 0.72rem; color: rgba(255,255,255,.5);
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  white-space: nowrap;
}

/* ── 日付入力 ── */
.date-label { font-size: 0.75rem; color: rgba(255,255,255,.55); }
.date-input {
  padding: 5px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 0.78rem;
  background: rgba(255,255,255,.1); color: #fff;
  outline: none; color-scheme: dark;
}
.date-input:focus { border-color: var(--accent); }

/* ── ボタン ── */
.btn {
  padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 0.8rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s, opacity .12s;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover   { background: #3a7be0; }
.btn-suggest   { background: var(--purple); color: #fff; }
.btn-suggest:hover   { background: #6d28d9; }
.btn-secondary { background: rgba(255,255,255,.14); color: #fff; }
.btn-secondary:hover { background: rgba(255,255,255,.22); }
.btn-light     { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-light:hover     { background: var(--border); }
.btn-danger    { background: #fee2e2; color: #dc2626; }
.btn-danger:hover    { background: #fecaca; }
.btn-promote   { background: #ede9fe; color: var(--purple); }
.btn-promote:hover   { background: #ddd6fe; }

/* ── ローディング ── */
.loading { text-align: center; padding: 30px; color: var(--sub); font-size: 0.84rem; }
.error   { color: var(--bad); font-size: 0.84rem; }

/* ── スピナー ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}