/*
 * ダッシュボードの見た目。色はすべて CSS のカスタムプロパティ（--db-*）で持たせてあるので、
 * 置いたページ側で .db { --db-accent: …; } のように書けば、この CSS を直さずに着せ替えできる。
 * 明（既定）・暗（OS に従う / 指定）・印刷・動きを控える設定・狭い画面まで、ここ 1 か所で受け持つ。
 */

.db {
  /* 地と字 */
  --db-surface: #fcfcfb;
  --db-card: #ffffff;
  --db-border: #e3e2dc;
  --db-text: #0b0b0b;
  --db-text-2: #52514e;
  /* 小さな字にも使う薄い色。地の色（#ffffff・#fcfcfb）に対して 4.5:1 を保てるところまで濃くしてある */
  --db-text-3: #6b6a64;
  --db-grid: #ebeae4;

  /* 区分の色（8 色の固定の並び。9 個目は作らず「その他」の灰にまとめる） */
  --db-series-1: #2a78d6;
  --db-series-2: #eb6834;
  --db-series-3: #1baf7a;
  --db-series-4: #eda100;
  --db-series-5: #e87ba4;
  --db-series-6: #008300;
  --db-series-7: #4a3aa7;
  --db-series-8: #e34948;
  --db-series-0: #a3a29b;
  --db-accent: var(--db-series-1);

  /* 良い・悪い（差と目標だけに使う。系列には使わない） */
  --db-good: #0ca30c;
  --db-bad: #d03b3b;
  /* 「達成」の札のように、色の面に字をのせるときの組み合わせ（字と面で 4.5:1 を保つ） */
  --db-good-strong: #087a08;
  --db-good-strong-text: #ffffff;

  --db-radius: 12px;
  --db-gap: 16px;

  box-sizing: border-box;
  /* 吹き出しは、この包みの左上からの場所で置く（ページ側で拡大・縮小されても指のところに出る） */
  position: relative;
  padding: 20px;
  background: var(--db-surface);
  color: var(--db-text);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium",
    "Yu Gothic", Meiryo, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.db *,
.db *::before,
.db *::after {
  box-sizing: inherit;
}

/* ---- 暗い配色 ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  .db[data-db-theme="auto"] {
    --db-surface: #1a1a19;
    --db-card: #232322;
    --db-border: #3b3b37;
    --db-text: #f3f2ee;
    --db-text-2: #c1bfb7;
    --db-text-3: #8d8b83;
    --db-grid: #333330;

    --db-series-1: #3987e5;
    --db-series-2: #d95926;
    --db-series-3: #199e70;
    --db-series-4: #c98500;
    --db-series-5: #d55181;
    --db-series-6: #008300;
    --db-series-7: #9085e9;
    --db-series-8: #e66767;
    --db-series-0: #6f6e68;

    --db-good-strong: #4ec94e;
    --db-good-strong-text: #0b1f0b;
  }
}

.db[data-db-theme="dark"] {
  --db-surface: #1a1a19;
  --db-card: #232322;
  --db-border: #3b3b37;
  --db-text: #f3f2ee;
  --db-text-2: #c1bfb7;
  --db-text-3: #8d8b83;
  --db-grid: #333330;

  --db-series-1: #3987e5;
  --db-series-2: #d95926;
  --db-series-3: #199e70;
  --db-series-4: #c98500;
  --db-series-5: #d55181;
  --db-series-6: #008300;
  --db-series-7: #9085e9;
  --db-series-8: #e66767;
  --db-series-0: #6f6e68;

  --db-good-strong: #4ec94e;
  --db-good-strong-text: #0b1f0b;
}

/* 区分の色は、この 9 つの class だけで配る（図の中に色を直接書かない） */
.db .db-s0 { color: var(--db-series-0); }
.db .db-s1 { color: var(--db-series-1); }
.db .db-s2 { color: var(--db-series-2); }
.db .db-s3 { color: var(--db-series-3); }
.db .db-s4 { color: var(--db-series-4); }
.db .db-s5 { color: var(--db-series-5); }
.db .db-s6 { color: var(--db-series-6); }
.db .db-s7 { color: var(--db-series-7); }
.db .db-s8 { color: var(--db-series-8); }

/* ---- 題・知らせ -------------------------------------------------------- */

.db-title {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.db-note {
  margin: 12px 0 0;
  color: var(--db-text-3);
  font-size: 0.8125rem;
}

.db-status {
  padding: 40px 16px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  background: var(--db-card);
  color: var(--db-text-2);
  text-align: center;
}

.db-errors {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--db-border);
  border-radius: 10px;
  background: var(--db-card);
  color: var(--db-text-2);
  font-size: 0.8125rem;
}

.db-errors > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--db-text);
}

.db-errors ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}

.db-errors li + li {
  margin-top: 4px;
}

/* ---- 絞り込みの行 ------------------------------------------------------ */

.db-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 0 0 var(--db-gap);
}

.db-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.db-field-label {
  color: var(--db-text-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.db-select,
.db-date {
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  background: var(--db-card);
  color: var(--db-text);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
}

.db-reset,
.db-toggle,
.db-action {
  padding: 6px 10px;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  background: var(--db-card);
  color: var(--db-text-2);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.db-reset:hover,
.db-toggle:hover,
.db-action:hover {
  border-color: var(--db-text-3);
  color: var(--db-text);
}

.db-toggle[aria-pressed="true"] {
  border-color: var(--db-accent);
  color: var(--db-accent);
}

/* ---- 部品の格子 -------------------------------------------------------- */

.db-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--db-gap);
  /* 同じ行に並ぶ部品は高さをそろえる（背の低い部品の下に空きができると、並びが崩れて見える） */
  align-items: stretch;
}

.db-size-s { grid-column: span 1; }
.db-size-m { grid-column: span 2; }
.db-size-l { grid-column: span 4; }

.db-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  background: var(--db-card);
}

.db-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.db-card-title {
  margin: 0;
  color: var(--db-text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.db-card-body {
  /* 高さのそろった札の中で、余った高さは中身の下に付ける（図や数は上にそろえたままにする） */
  flex: 1 1 auto;
  min-width: 0;
}

.db-card-note {
  margin: 10px 0 0;
  color: var(--db-text-3);
  font-size: 0.75rem;
  line-height: 1.5;
}

.db-empty {
  margin: 0;
  padding: 36px 8px;
  color: var(--db-text-3);
  font-size: 0.8125rem;
  text-align: center;
}

.db-error {
  margin: 0;
  padding: 10px 0 14px;
  color: var(--db-text-2);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ---- KPI --------------------------------------------------------------- */

.db-kpi-value {
  margin: 0;
  /* 大きな数は、字の形どおりの幅で組んだ方が読みやすい（等幅数字にしない） */
  font-variant-numeric: proportional-nums;
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.125rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.db-kpi-delta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--db-text-2);
}

.db-delta-mark {
  font-weight: 600;
}

.db-delta-label {
  color: var(--db-text-3);
  font-size: 0.75rem;
}

.db-delta-good .db-delta-mark { color: var(--db-good); }
.db-delta-bad .db-delta-mark { color: var(--db-bad); }
.db-delta-flat .db-delta-mark { color: var(--db-text-3); }

.db-spark {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  margin-top: 10px;
}

/* ---- 目標 -------------------------------------------------------------- */

.db-meter-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
}

.db-meter-value {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.db-meter-sep,
.db-meter-target {
  color: var(--db-text-3);
  font-size: 0.875rem;
}

/* どの月の数字なのかを、値のとなりに小さく添える（読みの邪魔をしない大きさで） */
.db-meter-month {
  margin-inline-start: auto;
  color: var(--db-text-3);
  font-size: 0.75rem;
  white-space: nowrap;
}

.db-meter-track {
  height: 12px;
  border-radius: 6px;
  background: var(--db-grid);
  background: color-mix(in srgb, var(--db-accent) 16%, var(--db-card));
  overflow: hidden;
}

.db-meter-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--db-accent);
  transition: width 0.24s ease;
}

.db-meter-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--db-text-2);
}

.db-meter-reached {
  padding: 1px 7px;
  border-radius: 999px;
  /* 小さな字を色の面にのせるので、字と面の差が 4.5:1 になる組み合わせを使う */
  background: var(--db-good-strong);
  color: var(--db-good-strong-text);
  font-size: 0.6875rem;
  font-weight: 600;
}

.db-meter-ratio {
  font-variant-numeric: tabular-nums;
}

/* ---- 図（折れ線・棒） -------------------------------------------------- */

.db-chart {
  /* 図は縦横の比を保って伸び縮みする。広い画面で大きくなりすぎると、図の中の字だけが
     まわりの文字より大きくなってしまうので、ここで幅の上限を決めて真ん中に置く */
  max-width: 820px;
  margin-inline: auto;
}

.db-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  /* 札は枠の外へ出ることがあるので、切り取らない */
  overflow: visible;
  /* 図の上を横になぞると値を読めるようにし、縦はページの送りに渡す（指で読み進められるように） */
  touch-action: pan-y;
}

.db-grid-line {
  stroke: var(--db-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.db-axis-zero {
  stroke: var(--db-border);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.db-x-label,
.db-y-label {
  fill: var(--db-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.db-mark-label {
  fill: var(--db-text-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.db-crosshair {
  stroke: var(--db-text-3);
  stroke-width: 1;
  pointer-events: none;
}

.db-hit {
  fill: transparent;
  outline: none;
  cursor: default;
}

.db-hit:hover,
.db-hit:focus-visible {
  fill: var(--db-text);
  fill-opacity: 0.05;
}

.db-hit:focus-visible {
  stroke: var(--db-accent);
  stroke-width: 1.5;
}

/* ---- 凡例 -------------------------------------------------------------- */

.db-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.db-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--db-text-2);
  font-size: 0.75rem;
}

.db-legend-swatch {
  display: inline-block;
  flex: none;
  background: currentColor;
}

.db-legend-line {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

.db-legend-bar {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ---- 表 ---------------------------------------------------------------- */

.db-table-wrap {
  /* 行の多い表だけが縦に伸びて、隣の部品との釣り合いが崩れないように高さを止める
     （見出しは貼り付いたまま残るので、送っても何の列か分かる） */
  max-height: 440px;
  overflow: auto;
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.db-table th,
.db-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--db-border);
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
}

.db-table thead th {
  position: sticky;
  top: 0;
  background: var(--db-card);
  color: var(--db-text-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.db-table tbody tr:last-child td {
  border-bottom: none;
}

.db-table .db-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.db-row:hover {
  background: var(--db-surface);
}

.db-sort {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.db-sort::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  color: var(--db-text-3);
}

.db-table th[aria-sort="descending"] .db-sort::after { content: "▼"; }
.db-table th[aria-sort="ascending"] .db-sort::after { content: "▲"; }
.db-table th[aria-sort="descending"],
.db-table th[aria-sort="ascending"] { color: var(--db-text); }

/* ---- 吹き出し（中身は操作の側が入れる） -------------------------------- */

.db-tip {
  /* 置き場所（.db）の中に置く。ページ側が transform で動かしていても、中身と一緒に動く */
  position: absolute;
  z-index: 40;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  background: var(--db-card);
  color: var(--db-text);
  font-size: 0.75rem;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.08);
  pointer-events: none;
}

.db-tip-title {
  margin-bottom: 4px;
  color: var(--db-text-3);
  font-weight: 600;
}

.db-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.db-tip-swatch {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.db-tip-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.db-tip-label {
  color: var(--db-text-2);
}

/* ---- focus のしるし ---------------------------------------------------- */

.db :focus-visible {
  outline: 2px solid var(--db-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- 狭い画面 ---------------------------------------------------------- */

@media (max-width: 900px) {
  .db-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .db-size-m,
  .db-size-l {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .db {
    padding: 12px;
  }
  /* 手のひらの幅でも 2 列は保つ。小さな数の札を 2 つずつ並べたほうが、
     縦に 4 つ積むより一目で見渡せる（図は 2 列ぶんの幅を使う） */
  .db-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .db-size-s {
    grid-column: span 1;
  }
  .db-size-m,
  .db-size-l {
    grid-column: span 2;
  }
  .db-select,
  .db-date {
    max-width: none;
  }
  .db-field {
    flex: 1 1 140px;
  }
  /* 狭い画面では図が小さくなるので、図の中の札だけ少し大きくして読めるようにする */
  .db-x-label,
  .db-y-label,
  .db-mark-label {
    font-size: 15px;
  }
}

/* いちばん狭い画面だけは 1 列にする（2 列にすると数の札が折り返してしまうため） */
@media (max-width: 359px) {
  .db-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .db-size-s,
  .db-size-m,
  .db-size-l {
    grid-column: span 1;
  }
}

/* ---- 動きを控える設定 -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .db,
  .db *,
  .db *::before,
  .db *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 印刷 -------------------------------------------------------------- */

@media print {
  .db {
    padding: 0;
    background: #ffffff;
    --db-surface: #ffffff;
    --db-card: #ffffff;
  }
  .db-filters,
  .db-toggle,
  .db-action,
  .db-reset,
  .db-tip {
    display: none !important;
  }
  .db-grid {
    gap: 12px;
  }
  .db-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .db-table-wrap {
    max-height: none;
    overflow: visible;
  }
  .db-table thead th {
    position: static;
  }
}