@charset "UTF-8";
/* ============================================================================
 * views/dashboard.css
 * COLAVIA v1.008.0000
 *
 *   ダッシュボード（§6 の画面一覧 / §5.6-2）。
 *
 *   出所: mock/dashboard.html の <style> から、
 *         このシステムにまだ無かった部品を持ってきたもの。
 *         .grid / .stat / .rows / .row / .card__head は共通の部品でもあるが、
 *         いまのところ使うのはこの画面だけなのでここに置く。
 *         他の画面でも使うようになったら components.css へ移す。
 *
 *   ＜数値カードは押せる＞
 *   モックでは飾りだが、数を見て「では見に行こう」となるのが自然な流れ。
 *   それぞれの一覧へ、条件つきで渡す。
 *
 *   サイズの指定は px より rem / vh / vw を優先する（§2.2）。
 *   :has() は使わない（§2.2）。
 * ========================================================================== */

/* ==========================================================================
   グリッド
   ========================================================================== */

.grid { display: grid; gap: var(--sp-4); }

.grid--stats {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--sp-5);
}

/* 主要カラム＋補助カラムの2分割 */

.grid--split {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}

/* ==========================================================================
   概況の数値カード
   ========================================================================== */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);

  padding: var(--sp-4);
  border: 0.0625rem solid var(--c-hairline);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  box-shadow: var(--shadow-card);

  color: var(--c-text);
  text-decoration: none;

  transition: border-color var(--dur-fast) var(--ease);
}

a.stat:hover { border-color: var(--c-accent); }

.stat__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

.stat__value {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.stat__unit {
  margin-left: 0.125rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-secondary);
}

.stat__note { font-size: var(--fs-xs); color: var(--c-text-tertiary); }

/* ==========================================================================
   カードの見出し
   ========================================================================== */

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
}

.card__body { padding: 0 var(--sp-4) var(--sp-4); }

/* ==========================================================================
   リスト行
   ========================================================================== */

.rows { border-top: 0.0625rem solid var(--c-separator); }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);

  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.0625rem solid var(--c-separator);
  color: var(--c-text);
  text-decoration: none;

  transition: background-color var(--dur-fast) var(--ease);
}

.row:last-child { border-bottom: none; }
.row:hover { background-color: var(--c-fill); }

/* 進捗バーのように、下に伸びるものを持つ行 */

.row--stack { align-items: flex-start; }

.row__main { flex: 1 1 auto; min-width: 0; }

.row__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;

  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;

  /* 長い内容は1行で省略する */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

.row__side {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* まだ見ていない更新の印。件数は出さず、あることだけを示す */

.dot--new {
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--r-full);
  background: var(--c-accent);
}

/* ==========================================================================
   進捗
   ========================================================================== */

.dash-prog {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.dash-prog .progress { flex: 1 1 auto; }

.dash-prog__n {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-secondary);
}

/* ==========================================================================
   狭い画面
   ========================================================================== */

@media (max-width: 64rem) {

  .grid--stats { grid-template-columns: repeat(2, 1fr); }
  .grid--split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {

  .grid--stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  /* 担当のアバターは落とす。狭い画面では内容と期限を優先する */
  .row__side .avatar-stack { display: none; }

  .row { padding: var(--sp-3); }
}

@media (max-width: 30rem) {

  .grid--stats { grid-template-columns: 1fr; }
}