/* =========================================================
   大庭工務店 社内ツール デザインコード v1（2026-10-08）
   使い方: <link rel="stylesheet" href="design.css"> を <head> に入れる。
   色・余白・文字は :root の変数だけを使う（色コードを直接書かない）。
   ========================================================= */

:root {
  /* 色：紺（基調）・青（強調）・白（背景）。黒背景・グラデーションは使わない */
  --navy: #1b2a4a;        /* ヘッダー・主グラフ */
  --navy-2: #23365f;
  --blue: #2f6fed;        /* 強調・リンク・2本目のグラフ */
  --blue-soft: #9db6f2;   /* 3本目のグラフ */
  --blue-bg: #e8f0ff;     /* 青の薄い背景（情報タグ） */
  --ink: #1f2430;         /* 本文の文字 */
  --sub: #5c6472;         /* 補足の文字・見出しの小文字 */
  --line: #e3e7ee;        /* 罫線・枠線 */
  --bg: #f4f6f9;          /* ページ背景 */
  --card: #ffffff;        /* カード背景 */
  /* 状態の色：良い＝緑／注意＝黄／悪い＝赤。この3色以外を状態に使わない */
  --green: #2e9e5b;  --green-bg: #e6f6ec;
  --amber: #d7900f;  --amber-bg: #fff4dc;
  --red: #d94848;    --red-bg: #fdeaea;
  --gray: #c7cdd8;        /* 無効・未入力 */
  /* 余白と角：この4段だけ使う */
  --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 28px;
  --radius: 12px; --radius-s: 8px;
  --shadow: 0 1px 2px rgba(20, 30, 50, .04);
  --font: "Meiryo UI", "Yu Gothic UI", "Hiragino Sans", "Segoe UI", sans-serif;
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.6; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: 0; }
h1 { font-size: 20px; }
h2 { font-size: 14px; color: var(--sub); margin-bottom: var(--sp-2); }
h3 { font-size: 14px; }
small, .muted { color: var(--sub); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- ヘッダー（紺・固定） ---------- */
.app-header { background: var(--navy); color: #fff; height: 56px; padding: 0 24px; display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 5; }
.app-header .brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.app-header .brand small { color: #cfd6e4; margin-left: 10px; font-weight: 400; }
.app-header nav { display: flex; gap: 4px; margin-left: 12px; }
.app-header nav button, .app-header nav a { background: transparent; border: 0; color: #cfd6e4; padding: 8px 14px; border-radius: var(--radius-s); font: inherit; font-size: 14px; cursor: pointer; }
.app-header nav .on { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; }
.app-header .right { margin-left: auto; font-size: 12px; color: #cfd6e4; }

/* ---------- タブで切り替えるページ（.page.on だけ表示） ---------- */
.page { display: none; }
.page.on { display: block; }

/* ---------- ページ・見出し ---------- */
.page-main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 48px; }
.titlebar { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.titlebar .owner { font-size: 12px; color: var(--sub); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.titlebar .src { font-size: 12px; color: var(--sub); margin-left: auto; }

/* ---------- グリッド（4・3・2・2:1・1:2） ---------- */
.grid { display: grid; gap: 14px; margin-bottom: 14px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g21 { grid-template-columns: 2fr 1fr; }
.g12 { grid-template-columns: 1fr 2fr; }
@media (max-width: 900px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3, .g2, .g21, .g12 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .g4 { grid-template-columns: 1fr; } .page-main { padding: 12px 12px 40px; } .app-header { padding: 0 12px; } .app-header .right { display: none; } }

/* ---------- カード ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.card h2 { font-size: 14px; color: var(--sub); margin: 0 0 10px; }

/* 数字カード（KPI）。数字は30px太字、単位・目標は小さく */
.kpi .v { font-size: 30px; font-weight: 700; line-height: 1.1; }
.kpi .v small { font-size: 14px; color: var(--sub); font-weight: 400; margin-left: 4px; }
.kpi .d { margin-top: 8px; font-size: 12px; color: var(--sub); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- タグ（状態） ---------- */
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.warn { background: var(--amber-bg); color: var(--amber); }
.tag.ng { background: var(--red-bg); color: var(--red); }
.tag.info { background: var(--blue-bg); color: var(--blue); }

/* ---------- 表 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { font-weight: 700; color: var(--sub); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
td { padding: 9px 6px; border-bottom: 1px solid #f0f2f6; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* ---------- お知らせ・アラート（左に色の線） ---------- */
.alert { border-left: 4px solid var(--red); background: var(--red-bg); padding: 10px 12px; border-radius: var(--radius-s); margin-bottom: 8px; font-size: 13px; }
.alert b { display: block; margin-bottom: 2px; }
.alert.warn { border-color: var(--amber); background: var(--amber-bg); }
.alert.ok { border-color: var(--green); background: var(--green-bg); }
.alert.info { border-color: var(--blue); background: var(--blue-bg); }

/* ---------- チェック・進捗バー ---------- */
.chk { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--gray); vertical-align: middle; text-align: center; line-height: 16px; font-size: 12px; color: #fff; }
.chk.on { background: var(--green); border-color: var(--green); }
.chk.late { background: var(--red); border-color: var(--red); }
.bar { height: 8px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }

/* ---------- ボタン・入力 ---------- */
.btn { display: inline-block; padding: 8px 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.btn:hover { background: #f7f9fc; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: #2559c9; }
input, select, textarea { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }

/* ---------- 注記・フッター ---------- */
.note { font-size: 12px; color: var(--sub); margin-top: 8px; }
.legend { font-size: 12px; color: var(--sub); display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.page-foot { margin-top: 28px; font-size: 12px; color: var(--sub); border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- グラフ（Chart.js）の高さ ---------- */
canvas { max-height: 260px; }

/* ---------- 印刷 ---------- */
@media print { .app-header { position: static; } .card { box-shadow: none; break-inside: avoid; } body { background: #fff; } }

/* ---------- OBA NAVI ハブ（入口・TOOL一覧）用 ---------- */
.crumb { font-size: 12px; color: var(--sub); margin: 4px 0 6px; }
.crumb a { color: var(--sub); }
.lead { color: var(--sub); margin: 0 0 var(--sp-3); }
a.card.link { display: block; color: inherit; text-decoration: none; }
a.card.link:hover { border-color: var(--blue-soft); text-decoration: none; }
a.card.link h3 { font-size: 16px; margin-bottom: 6px; }
a.card.link p, .card.off p { margin: 0 0 10px; font-size: 13px; color: var(--sub); }
.card.off { background: #fafbfc; }
.card.off h3 { font-size: 16px; margin-bottom: 6px; color: var(--sub); }