/* バンソウズ ダッシュボード共通デザイン基盤 v1.0.0  テーマ: けんちゃん漬
   出どころ: デジタル庁デザインシステム v2.0.1（MIT）/ Material Design 3
   正本: ~/Programs/bansos-design  直接編集せず、正本を直して配り直す */

/* けんちゃん漬（kenchanzuke）のテーマ。tools/generate-theme.mjs が自動生成。直接編集しない。 */
/* シード色 #116c5f → Material Design 3 のトーナルパレットでデジタル庁の段階（50〜1200）へ展開 */
:root {
  --color-key-50: #b5ffef;
  --color-key-100: #a5f4e3;
  --color-key-200: #97e6d5;
  --color-key-300: #79c7b7;
  --color-key-400: #58a697;
  --color-key-500: #3e8e80;
  --color-key-600: #297c6e;
  --color-key-700: #136d60;
  --color-key-800: #00564b;
  --color-key-900: #00443b;
  --color-key-1000: #003029;
  --color-key-1100: #00221d;
  --color-key-1200: #001c17;

  --color-primary: #136d60;
  --color-primary-hover: #00564b;
  --color-primary-active: #00443b;
  --color-on-primary: #ffffff;
  --color-primary-container: #b5ffef;
  --color-on-primary-container: #136d60;
  --color-bg: #f5f3f4;
  --color-surface: #ffffff;
  --color-surface-container: #fbf9f9;
  --color-surface-container-high: #efedee;
  --color-on-surface: #1f2020;
  --color-on-surface-variant: #686b6e;
  --color-outline: #818487;
  --color-outline-variant: #d2d5d8;
  --color-nav: #292c31;
  --color-nav-hover: #32353a;
  --color-nav-active: #44474c;
  --color-on-nav: #e1e2e8;
  --color-on-nav-variant: #b7b9be;
  --color-success: #197a4b;
  --color-success-icon: #1d8b56;
  --color-success-container: #e6f5ec;
  --color-on-success-container: #0c472a;
  --color-success-border: #c2e5d1;
  --color-warning: #c74700;
  --color-warning-icon: #e25100;
  --color-warning-container: #ffeee2;
  --color-on-warning-container: #6d2700;
  --color-warning-border: #ffdfca;
  --color-error: #ce0000;
  --color-error-icon: #ec0000;
  --color-error-container: #fdeeee;
  --color-on-error-container: #850000;
  --color-error-border: #ffdada;
  --color-info: #00428c;
  --color-info-icon: #0066be;
  --color-info-container: #f0f9ff;
  --color-on-info-container: #00316a;
  --color-info-border: #dcf0ff;
  --color-focus: #1f2020;
}

/* ===========================================================================
   基礎層：値の定義だけを置く。ここに部品や見た目のルールは書かない。
   出どころ
   - 文字・角丸・影・中立色 : デジタル庁デザインシステム v2.0.1（vendor/dads-tokens.css）
   - 余白・タップ寸法・画面幅 : Material Design 3（ウィンドウサイズクラス）
   色のロール（--color-primary など）は themes/<クライアント>.css が与える。
   =========================================================================== */

:root {
  /* --- 文字 ------------------------------------------------------------ */
  /* デジタル庁の指定書体は Noto Sans JP。Apple は同等のヒラギノ、Android は
     Noto Sans CJK JP を端末内蔵で持つため、Webフォントは読み込まない。
     屋外の弱い電波でも表示が遅れないことを優先する。 */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: "SF Mono", "Noto Sans Mono", ui-monospace, Menlo, monospace;

  /* 業務画面なので Dense 系。14px 未満は使わない（デジタル庁の下限） */
  --fs-h1: 24px;
  --fs-h2: 18px;
  --fs-h3: 16px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-kpi: 28px;

  --lh-heading: 1.4;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-tight: 1.2;

  --fw-normal: 400;
  --fw-bold: 700;

  /* --- 余白（8px 基準） ------------------------------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;

  /* --- 形 --------------------------------------------------------------- */
  --radius-part: 4px;   /* ボタン・入力欄・チップ */
  --radius-panel: 8px;  /* パネル・表の外枠 */
  --radius-overlay: 12px; /* モーダル・ドロワー */

  /* 影は重ねる面にだけ使う。画面内の区切りは罫線と余白で表す */
  --elevation-overlay: 0 8px 24px 5px rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.3);

  /* --- 操作部品の寸法 ---------------------------------------------------- */
  --tap: 44px;              /* 指で押す部品の最小の高さ */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* --- 面の重なり（Material Design 3 の状態レイヤー） --------------------- */
  --state-hover: 0.08;
  --state-pressed: 0.12;

  /* --- 画面の骨格 -------------------------------------------------------- */
  --sidebar-width: 240px;
  --rail-width: 88px;
  --topbar-height: 56px;
  --bottom-nav-height: 0px;
  --content-max: 1280px;
}

/* Material Design 3 のウィンドウサイズクラス
   compact  〜599px    スマホ縦        下部ナビ・1カラム
   medium   600〜839   スマホ横/小型   レール・1カラム
   expanded 840〜1199  タブレット/PC   サイドバー・2カラム可
   large    1200px〜   PC              サイドバー・2カラム以上 */
@media (max-width: 599px) {
  :root {
    --sp-3: 16px;
    --sp-4: 24px;
    --bottom-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===========================================================================
   素の HTML 要素の見た目。部品クラスを付けなくてもこの状態で読める形にする。
   =========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  color: var(--color-on-surface);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-2); }
p:last-child { margin-bottom: 0; }

small, .bd-small { font-size: var(--fs-small); line-height: var(--lh-small); }

a {
  color: var(--color-primary);
  text-underline-offset: 2px;
}
a:hover { color: var(--color-primary-hover); }

/* 操作できる部品には必ず同じ形の焦点表示を付ける（キーボード操作の必須要件） */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-part);
}

img { max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--color-outline-variant);
  margin: var(--sp-3) 0;
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9375em; }

/* 数値は桁を揃える。表と KPI の読み違いを防ぐ */
.bd-num { font-variant-numeric: tabular-nums; }

.bd-muted { color: var(--color-on-surface-variant); }

/* 画面には出さず読み上げにだけ渡す文言 */
.bd-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===========================================================================
   部品層：全ダッシュボードで共通の UI 部品。クラス名は bd- で始める
   （移行中の既存 CSS とぶつからないようにするため）。
   守る決まり
   1. 色帯（border-left / border-top のアクセント）で種類を示さない
   2. 状態は「アイコン＋文言」で示し、色だけに頼らない
   3. 影はモーダル・ドロワーだけ。区切りは 1px の罫線と余白
   4. 角丸は 部品4px / パネル8px / 重なる面12px の3種類だけ
   =========================================================================== */

/* --- パネル --------------------------------------------------------------- */
.bd-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-panel);
  padding: var(--sp-3);
}
.bd-panel + .bd-panel { margin-top: var(--sp-3); }
.bd-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.bd-panel__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); }

/* --- KPI ------------------------------------------------------------------ */
.bd-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-2);
}
.bd-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-panel);
  padding: var(--sp-2);
}
.bd-kpi__label { font-size: var(--fs-small); color: var(--color-on-surface-variant); }
.bd-kpi__value {
  font-size: var(--fs-kpi);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-1);
}
.bd-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-small); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.bd-kpi__delta--up { color: var(--color-success); }
.bd-kpi__delta--down { color: var(--color-error); }

/* --- ボタン --------------------------------------------------------------- */
.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: var(--tap); padding: 0 var(--sp-2);
  font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold);
  line-height: 1; border-radius: var(--radius-part);
  border: 1px solid transparent; cursor: pointer;
  background: var(--color-surface); color: var(--color-on-surface);
  text-decoration: none;
}
.bd-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.bd-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.bd-btn--primary:active { background: var(--color-primary-active); }
.bd-btn--secondary { border-color: var(--color-outline); color: var(--color-on-surface); }
.bd-btn--secondary:hover { background: var(--color-surface-container-high); }
.bd-btn--text { background: transparent; color: var(--color-primary); padding: 0 var(--sp-1); }
.bd-btn--text:hover { background: var(--color-surface-container-high); }
.bd-btn--danger { background: var(--color-error); color: #fff; }
.bd-btn:disabled, .bd-btn[aria-disabled="true"] {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  border-color: var(--color-outline-variant);
  cursor: not-allowed;
}
.bd-btn--small { min-height: 36px; font-size: var(--fs-small); }

/* --- 入力 ----------------------------------------------------------------- */
.bd-field { display: block; margin-bottom: var(--sp-2); }
.bd-field__label {
  display: block; font-size: var(--fs-small); font-weight: var(--fw-bold);
  margin-bottom: 4px;
}
.bd-field__note { display: block; font-size: var(--fs-small); color: var(--color-on-surface-variant); margin-top: 4px; }
.bd-input, .bd-select, .bd-textarea {
  width: 100%; min-height: var(--tap); padding: 0 12px;
  font-family: inherit; font-size: var(--fs-body); color: var(--color-on-surface);
  background: var(--color-surface);
  border: 1px solid var(--color-outline); border-radius: var(--radius-part);
}
.bd-textarea { padding: 12px; line-height: var(--lh-body); resize: vertical; }
.bd-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.bd-input:disabled, .bd-select:disabled, .bd-textarea:disabled {
  background: var(--color-surface-container-high); color: var(--color-on-surface-variant);
}
.bd-field--error .bd-input, .bd-field--error .bd-select, .bd-field--error .bd-textarea {
  border-color: var(--color-error); border-width: 2px;
}
.bd-field__error {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-small); color: var(--color-error); margin-top: 4px;
}
.bd-check {
  display: flex; align-items: center; gap: var(--sp-1);
  min-height: var(--tap); cursor: pointer;
}
.bd-check input { width: 20px; height: 20px; accent-color: var(--color-primary); }

/* --- 表 ------------------------------------------------------------------- */
.bd-table-wrap {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-panel);
  overflow: auto;
  background: var(--color-surface);
}
.bd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.bd-table th, .bd-table td {
  padding: 12px var(--sp-2); text-align: left;
  border-bottom: 1px solid var(--color-outline-variant);
}
.bd-table th {
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  background: var(--color-surface-container);
  white-space: nowrap;
}
.bd-table tr:last-child td { border-bottom: 0; }
.bd-table .bd-num, .bd-table th.bd-num { text-align: right; font-variant-numeric: tabular-nums; }
/* 縞模様は使わない。行の区別は罫線だけで足りる */

/* --- 状態表示（色だけに頼らない） ------------------------------------------ */
.bd-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.bd-status--ok { color: var(--color-success); }
.bd-status--warn { color: var(--color-warning); }
.bd-status--error { color: var(--color-error); }
.bd-status--info { color: var(--color-info); }
.bd-status--muted { color: var(--color-on-surface-variant); font-weight: var(--fw-normal); }

.bd-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; font-size: var(--fs-small);
  border: 1px solid var(--color-outline); border-radius: var(--radius-part);
  background: var(--color-surface);
}

/* --- 通知バナー ------------------------------------------------------------ */
.bd-banner {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-2); border-radius: var(--radius-panel);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container);
}
.bd-banner__icon { flex: 0 0 auto; display: flex; width: 24px; height: 24px; }
.bd-banner__body { flex: 1 1 auto; }
.bd-banner__title { font-weight: var(--fw-bold); }
.bd-banner__text { font-size: var(--fs-body); }
.bd-banner--info { background: var(--color-info-container); border-color: var(--color-info-border); color: var(--color-on-info-container); }
.bd-banner--info .bd-banner__icon { color: var(--color-info); }
.bd-banner--success { background: var(--color-success-container); border-color: var(--color-success-border); color: var(--color-on-success-container); }
.bd-banner--success .bd-banner__icon { color: var(--color-success); }
.bd-banner--warning { background: var(--color-warning-container); border-color: var(--color-warning-border); color: var(--color-on-warning-container); }
.bd-banner--warning .bd-banner__icon { color: var(--color-warning); }
.bd-banner--error { background: var(--color-error-container); border-color: var(--color-error-border); color: var(--color-on-error-container); }
.bd-banner--error .bd-banner__icon { color: var(--color-error); }

/* --- タブ（下線型） -------------------------------------------------------- */
.bd-tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--color-outline-variant); overflow-x: auto; }
.bd-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-body); color: var(--color-on-surface-variant);
  padding: 12px 4px; min-height: var(--tap);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.bd-tab[aria-selected="true"] {
  color: var(--color-on-surface); font-weight: var(--fw-bold);
  border-bottom-color: var(--color-primary);
}

/* --- 折りたたみ（説明・内訳はここへしまう） --------------------------------- */
.bd-accordion {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-part);
  background: var(--color-surface);
}
.bd-accordion > summary {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: 12px var(--sp-2); min-height: var(--tap);
  font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer;
  list-style: none;
}
.bd-accordion > summary::-webkit-details-marker { display: none; }
.bd-accordion > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.bd-accordion[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.bd-accordion__body { padding: 0 var(--sp-2) var(--sp-2); }

/* --- 空状態 ---------------------------------------------------------------- */
.bd-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2); text-align: center;
  color: var(--color-on-surface-variant);
}
.bd-empty__icon { color: var(--color-on-surface-variant); }

/* --- 重なる面（ここだけ影を使う） ------------------------------------------- */
.bd-modal {
  background: var(--color-surface);
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-overlay);
  padding: var(--sp-3);
  max-width: 560px; width: calc(100% - var(--sp-3) * 2);
}
.bd-modal__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.bd-modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-1); margin-top: var(--sp-3); }

/* ===========================================================================
   骨格層：画面幅で navigation の形を切り替える。
   Material Design 3 のウィンドウサイズクラスに合わせ、境界は 600 / 840 / 1200px。
   HTML の並びは常に同じで、CSS だけが形を変える。
     <div class="bd-app">
       <nav class="bd-nav"> … </nav>
       <div class="bd-main">
         <header class="bd-topbar"> … </header>
         <main class="bd-content"> … </main>
       </div>
       <nav class="bd-bottom-nav"> … </nav>   ← スマホ縦のときだけ出る
     </div>
   =========================================================================== */

.bd-app { display: flex; min-height: 100dvh; background: var(--color-bg); }

.bd-nav {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  background: var(--color-nav);
  color: var(--color-on-nav);
  padding: var(--sp-2) 0;
  display: flex; flex-direction: column; gap: 2px;
}
.bd-nav__brand {
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.bd-nav__group {
  font-size: var(--fs-small); color: var(--color-on-nav-variant);
  padding: var(--sp-2) var(--sp-2) 4px;
}
.bd-nav__item {
  display: flex; align-items: center; gap: var(--sp-1);
  min-height: var(--tap); padding: 0 var(--sp-2);
  color: var(--color-on-nav); text-decoration: none;
  font-size: var(--fs-body); background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left; width: 100%;
}
.bd-nav__item:hover { background: var(--color-nav-hover); color: var(--color-on-nav); }
/* 選択中は左の色帯ではなく面の明るさと太字で示す */
.bd-nav__item[aria-current="page"] { background: var(--color-nav-active); font-weight: var(--fw-bold); }

.bd-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.bd-topbar {
  height: var(--topbar-height);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 0 var(--sp-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
}
.bd-topbar__meta { font-size: var(--fs-small); color: var(--color-on-surface-variant); }

.bd-content {
  flex: 1 1 auto;
  padding: var(--sp-3);
  padding-bottom: calc(var(--sp-4) + var(--bottom-nav-height));
  max-width: var(--content-max);
  width: 100%;
}
.bd-page-title { margin-bottom: var(--sp-3); }
.bd-section + .bd-section { margin-top: var(--sp-4); }

.bd-bottom-nav { display: none; }

/* 2カラム。expanded 未満では自動で1カラムに畳む */
.bd-cols { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 840px) {
  .bd-cols--2 { grid-template-columns: 1fr 1fr; }
  .bd-cols--main-side { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}

/* --- medium（600〜839px）：レール ------------------------------------------ */
@media (max-width: 839px) and (min-width: 600px) {
  .bd-nav { flex-basis: var(--rail-width); width: var(--rail-width); align-items: stretch; }
  .bd-nav__brand, .bd-nav__group { display: none; }
  .bd-nav__item {
    flex-direction: column; gap: 2px; justify-content: center;
    padding: var(--sp-1) 4px; min-height: 64px;
    font-size: var(--fs-small); text-align: center;
  }
}

/* --- compact（〜599px）：下部ナビ ------------------------------------------- */
@media (max-width: 599px) {
  .bd-nav { display: none; }
  .bd-content { padding: var(--sp-2); padding-bottom: calc(var(--sp-3) + var(--bottom-nav-height)); }
  .bd-topbar { padding: 0 var(--sp-2); }
  .bd-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; justify-content: space-around;
    background: var(--color-nav); color: var(--color-on-nav);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bd-bottom-nav__item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 64px; padding: var(--sp-1) 4px;
    color: var(--color-on-nav-variant); text-decoration: none;
    font-size: var(--fs-small); background: none; border: 0; font-family: inherit; cursor: pointer;
  }
  .bd-bottom-nav__item[aria-current="page"] { color: var(--color-on-nav); font-weight: var(--fw-bold); }
  /* スマホでは表を横スクロールさせず、主要列だけを見せて詳細は折りたたむ */
  .bd-table-wrap--stack .bd-table thead { display: none; }
  .bd-table-wrap--stack .bd-table tr {
    display: grid; grid-template-columns: 1fr auto; gap: 4px var(--sp-1);
    padding: 12px var(--sp-2); border-bottom: 1px solid var(--color-outline-variant);
  }
  .bd-table-wrap--stack .bd-table td { border: 0; padding: 0; }
}

/* --- 印刷 ------------------------------------------------------------------- */
@media print {
  .bd-nav, .bd-bottom-nav, .bd-topbar { display: none !important; }
  .bd-app { display: block; }
  .bd-content { padding: 0; max-width: none; }
  .bd-panel { border-color: #999; break-inside: avoid; }
}