/* cocotre — コンポーネント CSS (design-system.html v1.3 由来)
 * tokens.css の変数を参照。demo・webapp が共有する見た目の実体。
 * Phase 3 で Tailwind v4 ユーティリティ (shared/input.css) を必要に応じ併用する。
 */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-main);
  background: var(--bg-subtle);
}
a { color: var(--primary-700); }

/* ---- アプリシェル ---- */
header.app {
  height: 56px; background: var(--primary-500);
  display: flex; align-items: center; padding: 0 24px;
  position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm);
}
.app-brand { color: #fff; font-weight: 700; font-size: 1.125rem; display: flex; align-items: center; gap: 10px; }
.app-demo-tag {
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  background: var(--accent-500); color: #fff; padding: 2px 8px; border-radius: 999px;
}
.shell { display: flex; min-height: calc(100vh - 56px); }
.sidebar { width: 240px; flex: none; background: var(--surface); border-right: 1px solid var(--divider); padding: 16px 0; }
.sidebar a {
  display: block; padding: 10px 20px; color: var(--text-main);
  text-decoration: none; font-size: .9375rem; border-left: 3px solid transparent;
}
.sidebar a:hover { background: var(--bg-subtle); }
.sidebar a.active { background: var(--primary-50); color: var(--primary-700); font-weight: 700; border-left-color: var(--primary-500); }
.content { flex: 1; padding: 24px; }

/* ---- 見出し ---- */
h2.sec { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin: 0 0 8px; padding-left: 12px; border-left: 4px solid var(--primary-500); }
p.sec-note { color: var(--text-sub); font-size: .875rem; margin: 0 0 24px; }

/* ---- カード / 統計 ---- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; margin-bottom: 24px; }
.stat-row { display: flex; gap: 16px; margin-bottom: 24px; }
.stat { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 24px; min-width: 140px; }
.stat .num { font-size: 1.75rem; font-weight: 700; color: var(--primary-700); }
.stat .lbl { font-size: .8125rem; color: var(--text-sub); }

/* ---- ボタン ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: .9375rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; transition: background .15s;
}
.btn-primary { background: var(--primary-600); color: #fff; }
.btn-primary:hover { background: var(--primary-500); }
.btn-secondary { background: var(--surface); color: var(--primary-700); border-color: var(--primary-600); }
.btn-secondary:hover { background: var(--primary-50); }
.btn-danger { background: var(--error-500); color: #fff; }
.btn-ghost { background: transparent; color: var(--primary-700); }
.btn-ghost:hover { background: var(--primary-50); }
.btn-cta { background: var(--accent-500); color: #fff; }
.btn-on-dark { background: #fff; color: var(--primary-700); }

/* ---- テーブル ---- */
table.ds { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .875rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
table.ds th { background: var(--primary-50); color: var(--text-main); font-weight: 500; text-align: left; padding: 12px; border-bottom: 1px solid var(--divider); }
table.ds td { padding: 0 12px; height: 48px; border-bottom: 1px solid var(--divider); }
table.ds tbody tr:nth-child(even) { background: var(--bg-subtle); }
table.ds tbody tr:hover { background: var(--primary-100); }
td.score-high { background: var(--score-hr-bg); color: var(--score-hr-tx); font-weight: 700; border-left: 3px solid var(--error-500); }
td.score-caution { background: var(--score-ca-bg); color: var(--score-ca-tx); font-weight: 700; }

/* ---- バッジ ---- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-normal { background: var(--primary-50); color: var(--primary-700); }
.badge-ent { background: var(--ent-bg); color: var(--ent-tx); }
.badge-starter { background: var(--surface); color: var(--primary-700); border: 1px solid var(--primary-600); }
.badge-done { background: var(--bg-muted); color: var(--text-sub); }
.badge-active { background: var(--primary-50); color: var(--primary-700); }
.badge-unnotified { background: var(--score-ca-bg); color: var(--score-ca-tx); }
.badge-nottaken { background: var(--bg-muted); color: var(--text-sub); }