/* ============================================================
   awscost.css - AWS 料金集計システムの表示スタイル
   出自：design/mock-*.html（確定デザイン）から機械統合（完全同一ルールの重複を除去）。
   冒頭の :root は id-pc-inventory assets/css/style.css と同値の継承トークン。
   z-index の段階：10=装飾 / 50=固定ヘッダ / 60=浮遊操作 / 70=モーダル（任意値は使わない）
   ============================================================ */
/* ============================================================
   継承トークン：id-pc-inventory assets/css/style.css と同一値。
   実装時は style.css を流用し、本ファイルの「拡張」だけを awscost.css へ置く。
   ============================================================ */
:root {
  --field-h: 34px;
  --field-h-sm: 28px;
  --primary-d: #2b56bd;
  --danger-d: #b91c1c;
  /* 面は「ページ → カード」の 2 段。地の色を白から離し、カードの白を浮かせる。
     罫線は表の行区切りが見える濃さにする（薄い灰では情報の切れ目が読み取れない）。 */
  --bg: #eaeef6;
  --panel: #ffffff;
  --ink: #111a2b;
  --ink-soft: #3a4761;
  --muted: #5d6a80;
  --line: #d8dfea;
  --line-strong: #b6c2d5;
  --thead: #e4eaf5;
  --primary: #3b6fe0;
  --warn: #e08910;
  --ok: #16a34a;
  --danger: #dc2626;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20,30,55,.05), 0 2px 6px rgba(20,30,55,.05);
}

* { box-sizing: border-box; }

body { margin: 0; font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 14px; }

a { color: var(--primary); text-decoration: none; }

a:hover { text-decoration: underline; }

/* topbar（継承） */
.topbar {
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #0f172a;
  color: #fff;
  padding: 0 20px;
  height: 52px;
}

.brand {
  white-space: nowrap;
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.mainnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }

.mainnav a { color: #cbd5e1; padding: 6px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 500; }

.mainnav a:hover { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }

.mainnav a.active {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  background: var(--primary);
  color: #fff;
}

.userbox {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #cbd5e1;
  white-space: nowrap;
}

.userbox .logout { color: #fca5a5; }

.userbox .logout:hover { color: #fff; text-decoration: underline; }

.content {
  padding: 20px 28px 48px;
  max-width: none;
  width: 100%;
  margin: 0;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.card h2 { font-size: 15px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }

.card h2 .note { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 8px; }

/* ============================================================
   awscost 拡張（本プロジェクトで新設する分だけ）
   ============================================================ */

/* データ時点の常時表示（全画面共通ヘッダ行） */
/* 本文のデータ時点の行は上のバーへ移した（statusrow は使わない） */

/* 上のバーの右に置くデータ時点。暗い面の上なので配色を反転させる */
.asof { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px;
  font-size: 12px; color: #cbd5e1; white-space: nowrap; }

.asof:hover { background: rgba(255,255,255,.18); text-decoration: none; color: #fff; }

.asof span, .asof b { white-space: nowrap; }

/* 暗いバーの上に置くので白。数字は等幅で桁を揃える */
.asof b { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }

.asof .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }

.statusrow .spacer { flex: 1; }

.statusrow a { font-size: 12.5px; }

/* 金額の共通処理：等幅数字・右揃えは表側で指定 */
.money {
  font-variant-numeric: tabular-nums lining-nums;
}

/* KPI 行 */
/* KPI も等分。4 枚のうち 2 枚ぶんの境目が、下の段の境目（中央）と一致する */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-bottom: 16px; align-items: stretch; }

.kpi { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #94a3b8;
  border-radius: var(--radius); padding: 14px 18px 12px; box-shadow: var(--shadow); min-width: 0; }

.kpi-label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }

.kpi-num { font-size: 26px; font-weight: 700; line-height: 1.35; }

.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.kpi-hero  { border-left-color: #0f172a; }

.kpi-fcast { border-left-color: var(--primary); }

.kpi-delta { border-left-color: var(--danger); }

.kpi-credit{ border-left-color: #9333ea; }

/* ヒーロー金額（今月の利用料金） */
.hero-usd { font-size: 42px; font-weight: 700; line-height: 1.15; }

.hero-jpy { font-size: 17px; color: var(--ink-soft); font-weight: 600; margin-left: 10px; }

.hero-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }

/* バッジ：暫定・確定・調整・未設定 */
.badge {
  vertical-align: 2px;
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-prov { color: #96570a; border-color: var(--warn); background: #fdf3e3; }

/* 暫定 */
.badge-fixed {
  color: #166534;
  border-color: var(--ok);
  background: #e8f8ee;
}

/* 確定 */
.badge-unset { color: #5b6779; border-color: var(--line-strong); background: var(--bg); }

/* 未設定 */

/* 増減（符号＋色の両立。色だけに頼らない） */
.delta-up {
  color: var(--danger);
}

.delta-down { color: #15803d; }

.delta-flat { color: var(--muted); }

.delta-pct {
  margin-left: 6px;
  vertical-align: 2px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 0 7px;
  border-radius: 999px;
}

.delta-pct.up { background: #fee2e2; color: #991b1b; }

.delta-pct.down { background: #dcfce7; color: #166534; }

/* ============================================================
   署名要素：月のリズム（日次増分ストリップ）
   1 マス = 1 日。高さ = その日の増分。斜線 = 暫定（直近の取得分）。
   空マス = 未反映。増分は取得日基準（実使用は 1〜2 日前）。
   ============================================================ */
.daystrip { margin-top: 12px; }

.daystrip-bars { display: grid; grid-template-columns: repeat(31, 1fr); gap: 3px; align-items: end; height: 44px; }

.ds { position: relative; border-radius: 2px 2px 0 0; background: var(--primary); opacity: .82; min-height: 3px;
  isolation: isolate; }

/* ホバーで opacity が 1 に達するとスタッキングコンテキストが破棄されレイアウトが走る（実測 31 本で 31 回）。常に文脈を持たせて合成だけに閉じる */
.ds:hover { opacity: 1; }

.ds-prov { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, #f6d9ae 3px 6px); opacity: .95; }

/* 暫定 */
.ds-none { background: none; border: 1px dashed var(--line-strong); border-bottom: none; height: 100% !important; opacity: .5; border-radius: 0; }

/* 未反映 */
.daystrip-axis { display: grid; grid-template-columns: repeat(31, 1fr); gap: 3px; margin-top: 3px; }

.daystrip-axis span { font-size: 9.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.daystrip-cap { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }

.daystrip-cap i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.cap-n { background: var(--primary); opacity: .82; }

.cap-p { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, #f6d9ae 3px 6px); }

.cap-e { border: 1px dashed var(--line-strong); }

/* 2 段目：増分上位・アカウント別 ほか */
/* 同じ段のカードは高さを揃える（start のままだと中身の量で凸凹になる）。
   カード自身も伸ばすため .card 側で height:100% を効かせる。 */
/* 段ごとに列の比率を変えると、縦に並んだカードの境目が揃わず散らかって見える。
   全段を等分にして、カードの幅と境目の位置を画面全体で合わせる。 */
.grid2, .grid2b {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.grid2 > .card, .grid2b > .card, .kpis > .kpi { height: 100%; }

/* ランキング行（増分上位・サービス別で共用） */
.rank { width: 100%; border-collapse: collapse; }

.rank td, .rank th { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }

.rank th { text-align: left; }

/* 行見出し th の UA 既定（中央寄せ）を打ち消し。太さは .r-name の 600 */
.rank tr:last-child td, .rank tr:last-child th { border-bottom: none; }

.rank .r-name { font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: clip; white-space: nowrap; }

.rank .r-meta { font-size: 11.5px; color: var(--muted); font-weight: 400; display: block; }

.rank .r-amt { text-align: right; font-weight: 700; white-space: nowrap; }

.rank .r-amt small { display: block; font-size: 11px; font-weight: 400; }

.rank .r-bar { width: 32%; }

.rbar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }

.rbar i { display: block; height: 100%; background: var(--primary); opacity: .55; border-radius: 999px; }

.acct-chip { display: inline-block; font-size: 10.5px; color: var(--ink-soft); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }

/* 取得状態ミニ */
.fetch-mini { display: flex; align-items: center; gap: 10px; font-size: 13px; }

.fetch-mini .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }

/* ボタンも入力部品と同じ高さに揃える（--field-h の 1 箇所で決まる） */
.btn { display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--ink); border: 1.5px solid var(--line-strong);
  border-radius: 6px; height: var(--field-h); padding: 0 14px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s; }

.btn:hover { border-color: var(--primary); color: var(--primary); }

.btn:disabled { cursor: not-allowed; }

/* フッター（継承） */
.footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 18px 0 24px;
}

/* ============================================================
   スマホ（要点画面へ自動切替：今月・月末見込み・データ時点のみ）
   ============================================================ */
.m-only { display: none; }

@media (max-width: 767px) {
  .content { padding: 14px 14px 40px; }
  .mainnav, .userbox { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .kpi-delta, .kpi-credit, .grid2, .grid2b { display: none; }  /* 要点 2 つに絞る */
  .hero-usd { font-size: 46px; }
  .daystrip-axis, .asof-upd { display: none; }
  .m-only { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi-hero { grid-column: 1 / -1; }
  .grid2, .grid2b { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  /* 実装では id-pc-inventory の style.css を継承する。そこには無限ループのスピナーと
     セル点滅の animation があり、transition だけを止めても走り続ける（実測で確認）。
     animation と scroll-behavior まで止めて初めて動きが無くなる。 */
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

p.note { max-width: 60em; }

/* 説明文の行長上限（60 字）。全幅に伸びると 90 字超の行ができ読みにくい（design-review で実測） */
.sr-only {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* left/top 明示＝静的位置由来の横はみ出しを防ぐ */

/* ============ ダークテーマ（id-pc-inventory の実値を継承。切替は右下のボタン＝モック用） ============ */
:root[data-theme="dark"] {
  --bg:#0e1420;
  --panel:#171f2e;
  --ink:#e8ecf4;
  --ink-soft:#aeb9cb;
  --muted:#7e8ba3;
  --line:#273244;
  --line-strong:#38465f;
  --thead:#202b40;
  --primary:#4d82ef;
  --primary-d:#6a97f4;
  --danger:#e5484d;
  --warn:#e0951f;
  --ok:#2fb85f;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.40);
  color-scheme: dark;
}

[data-theme="dark"] .topbar { background:#0c111c; box-shadow: inset 0 -1px 0 var(--line); }

[data-theme="dark"] .badge-prov { background:rgba(224,149,31,.16); color:var(--warn); }

[data-theme="dark"] .badge-fixed { background:rgba(47,184,95,.16); color:var(--ok); }

[data-theme="dark"] .badge-neutral { background:#202b40; }

[data-theme="dark"] .badge-admin { background:rgba(77,130,239,.20); color:#8fb0f7; }

[data-theme="dark"] .badge-ng { background:rgba(229,72,77,.18); color:#f2a3a6; }

[data-theme="dark"] .delta-down { color: var(--ok); }

[data-theme="dark"] .badge-unset { color: var(--muted); }

[data-theme="dark"] .delta-pct.up { background:rgba(229,72,77,.22); color:#f2a3a6; }

[data-theme="dark"] .delta-pct.down { background:rgba(47,184,95,.22); color:#8fe6b0; }

[data-theme="dark"] .flash-ok { background:#12351f; color:#8fe6b0; border-color:#1d5c37; }

[data-theme="dark"] .flash-ng, [data-theme="dark"] .stale-band, [data-theme="dark"] .login-err { background:#3a1a1f; color:#f2a3a6; border-color:#5c262c; }

[data-theme="dark"] .rbar, [data-theme="dark"] .sk { background:#202b40; }

[data-theme="dark"] .ds-prov, [data-theme="dark"] .db-prov, [data-theme="dark"] .mb-prov,
[data-theme="dark"] .cap-p, [data-theme="dark"] .mini-strip i.p {
  background: repeating-linear-gradient(135deg, var(--warn) 0 3px, #4a3416 3px 6px); }

[data-theme="dark"] .kpi-hero { border-left-color:#cbd5e1; }

[data-theme="dark"] .row-selected td { background:#1e2a44; }

[data-theme="dark"] .detail-row td { background:#131b29; }

[data-theme="dark"] .line-msg { background:rgba(47,184,95,.14); border-color:#1d5c37; }

[data-theme="dark"] .paper-wrap { background:#0a0f19; }

/* 紙面（PDF プレビュー）は印刷物のため両テーマとも白のまま */
/* z-index の段階: 10=グリッド線等の装飾 / 50=固定ヘッダ / 60=浮遊操作。任意値は使わない */
.theme-toggle { position:fixed; right:calc(14px + env(safe-area-inset-right, 0px));
  bottom:calc(14px + env(safe-area-inset-bottom, 0px)); z-index:60; background:var(--panel); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 16px; font:inherit; font-size:13px;
  font-weight:600; cursor:pointer; box-shadow:var(--shadow); }

/* baseline-ui: 見出しは均等折返し・本文は読みやすい折返し */
h1, h2, h3 { text-wrap: balance; }

p, .note, .hint, .sub, .empty div, .modal p { text-wrap: pretty; }

/* 継承トークン（mock-dashboard.html と同一。実装では style.css ＋ awscost.css を共有） */










.card h2 .note, .note { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 8px; }



.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }

.btn-primary:hover {
  color: #fff;
  background: var(--primary-d);
}









/* デモ用の区切り見出し（実画面には無い） */
.demo-h { font-size: 13px; font-weight: 700; color: var(--muted); margin: 28px 0 10px; text-transform: none; }

/* 警告帯（データが古い）：flash-error を全幅で流用 */
.stale-band { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: var(--radius);
  padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.stale-band b { font-variant-numeric: tabular-nums; }

.stale-band a { font-weight: 600; }

/* 取得状況：結果と月別合計 */
.fetch-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fetch-status .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; }

.fetch-status .big { font-size: 16px; font-weight: 700; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tbl th { text-align: left; font-size: 12.5px; color: var(--ink); font-weight: 600; padding: 8px 12px;
  background: var(--thead); border-bottom: 2px solid var(--line-strong); white-space: nowrap;
  letter-spacing: .02em; }

.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }

.tbl tr:last-child td { border-bottom: none; }

.tbl .num {
  text-align: right;
  white-space: nowrap;
}

.tbl .center { text-align: center; }

/* ============================================================
   並べ替え可能な列見出し（PC 管理台帳と同じ見え方）
   大量データの表はサーバ側で並べ替えるためリンク、少量の表は JS。
   どちらも見出しの右端に記号を出し、現在の向きを色で示す。
   ============================================================ */
.tbl th { position: relative; }

.tbl th.th-sort { padding-right: 20px; cursor: pointer; user-select: none; }

/* 見出しはどこを押しても並べ替わるようにする（文字だけでは狙いにくい）。
   リンクを絶対配置で見出し全体へ広げ、漏斗だけがその上に来る。 */
.tbl th.th-sort { position: relative; }

.tbl th.th-sort a { color: inherit; display: inline; }

.tbl th.th-sort a::before { content: ""; position: absolute; inset: 0; z-index: 0; }

.tbl th.th-sort > .fn { position: relative; z-index: 1; }

.tbl th.th-sort a:hover { text-decoration: none; }

.tbl th.th-sort:hover { background: var(--bg); color: var(--ink); }

.tbl th.th-sort::after { content: "\2195"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--line-strong); font-size: 11px; }

.tbl th.sort-asc::after { content: "\25B2"; color: var(--primary); }

.tbl th.sort-desc::after { content: "\25BC"; color: var(--primary); }

/* ============================================================
   列見出しの絞り込み（漏斗）
   見出しの右に小さく置き、押すと候補が開く。選ぶとアイコンが色付く。
   ============================================================ */
/* 漏斗は見出し文字の隣へ普通に並べる。絶対配置にすると、並べ替えの記号や
   見出しの折り返しと重なって位置が崩れる */
.fn { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }

.fn-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 1px solid transparent; border-radius: 4px;
  background: none; color: var(--line-strong); cursor: pointer; }

.fn-btn:hover { background: var(--panel); color: var(--ink-soft); border-color: var(--line-strong); }

.fn-on .fn-btn { color: var(--primary); background: rgba(59,111,224,.14); border-color: var(--primary); }

.fn-panel { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 220px;
  max-width: 320px; max-height: 320px; overflow: auto; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 10px 28px rgba(20,30,55,.22);
  padding: 6px; font-weight: 400; }

.fn-search { display: block; padding: 4px; position: sticky; top: -6px; background: var(--panel); }

.fn-search input { width: 100%; }

.fn-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px;
  border-radius: 5px; cursor: pointer; white-space: nowrap; color: var(--ink); }

.fn-opt:hover { background: var(--bg); }

.fn-opt span { overflow: hidden; text-overflow: clip; }

.fn-all { border-bottom: 1px solid var(--line); margin-bottom: 4px; font-weight: 600; color: var(--ink-soft); }

.fn-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line);
  margin-top: 4px; padding-top: 6px; }

.fn-clear { background: none; border: none; color: var(--primary); font-size: 12.5px;
  font-family: inherit; font-weight: 600; cursor: pointer; padding: 2px 6px; }

.fn-clear:hover { text-decoration: underline; }

/* 見出しを固定して長い表でも列名を見失わない */
/* ============================================================
   長い表は枠内でスクロールさせ、その中で見出しを固定する。
   カード自身（overflow-x:auto）を基準にすると、ページのスクロールとは
   別の基準になって見出しが分断されるため、専用の枠を挟む。
   ============================================================ */
.table-scroll { overflow: auto; max-height: calc(100vh - 300px); border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); }

.table-scroll .tbl thead th { position: sticky; top: 0; z-index: 4; background: var(--thead);
  box-shadow: inset 0 -2px 0 var(--line-strong); }

/* 枠の角丸に合わせて内側の罫線を消す */
.table-scroll .tbl { border-collapse: separate; border-spacing: 0; }

.table-scroll .tbl tr:last-child td { border-bottom: none; }

/* 表の行は交互に色を敷いて横方向を追いやすくする */
.tbl tbody tr:nth-child(even) > td { background: rgba(20,30,55,.015); }

.tbl tbody tr:hover > td { background: rgba(59,111,224,.06); }

.hist-ok { color: #15803d; font-weight: 600; white-space: nowrap; }

.hist-none { color: var(--muted); font-weight: 600; white-space: nowrap; }

.hist-ng { color: var(--danger); font-weight: 600; white-space: nowrap; }

/* 進捗（SSE） */
.steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-top: 10px; }

.step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--panel); }

.step.done { border-color: var(--ok); color: var(--ok); }

.step.now { border-color: var(--primary); color: var(--primary); font-weight: 700; }

.step-arrow { color: var(--line-strong); }

/* リソース別：絞り込みとテーブル */
.filterbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.filterbar select, .filterbar input[type=text] { font: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); }

.filterbar input[type=text] { width: 200px; }

.filterbar .spacer { flex: 1; }


/* select・ボタンと同じ高さに揃える（line-height 継承差の打ち消し） */

.res-name { font-weight: 600; white-space: nowrap; display: block; }

/* ============================================================
   リソース別の一覧：1 行 1 リソース。列幅を決めて視線の動きを固定し、
   金額の右に構成比の帯を置いて「どれが大きいか」を一目で分かるようにする。
   ============================================================ */
/* 幅は割合で固定せず、内容が収まる最小幅だけを決める。
   割合で固定すると長い ARN やサービス名が切れる（省略記号で誤魔化さない）。
   画面が狭いときは表の枠内で横へスクロールする。 */
.c-name { min-width: 240px; }

.c-acct { white-space: nowrap; }

.c-svc { white-space: nowrap; }

.c-region { white-space: nowrap; font-variant-numeric: tabular-nums; }

.c-usage { white-space: nowrap; text-align: right; }

.c-lit { white-space: nowrap; }

.c-delta { white-space: nowrap; text-align: right; }

/* 金額の列：数字と構成比の帯を 1 つのセルへまとめる。
   別の列にすると見出しが「金額」と空欄に分かれ、並べ替えの対象も分かりにくくなる */
.c-cost { white-space: nowrap; width: 1%; }

.amt-cell { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.amt-num { min-width: 76px; text-align: right; }

.amt-cell .cbar { width: 110px; flex: none; }

.cbar { display: block; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }

.cbar i { display: block; height: 100%; background: var(--primary); opacity: .8; border-radius: 999px; }

/* 集計対象の切り替え（ダッシュボード上部） */
.acctbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.acctbar label { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* 増減の帯：中央から左右に伸ばさず、増加は赤・減少は緑で右方向に伸ばす */
.dbar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; min-width: 60px; }

.dbar i { display: block; height: 100%; border-radius: 999px; }

.dbar i.up { background: var(--danger); opacity: .75; }

.dbar i.down { background: var(--ok); opacity: .75; }

/* ============================================================
   操作結果の通知（画面下部）
   本文の上に差し込むと読んでいた位置がずれるため、下部へ固定して出す。
   成功は緑・失敗は赤・情報は青。動きは透明度と縦の移動だけに閉じる。
   ============================================================ */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: min(90vw, 560px);
  padding: 11px 14px 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(20,30,55,.28); z-index: 60; opacity: 0;
  transition: opacity .2s ease-out, transform .2s ease-out; }

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.toast-ok { background: #15803d; color: #fff; }

.toast-ng { background: #b91c1c; color: #fff; }

.toast-info { background: #1e40af; color: #fff; }

.toast-icon { font-size: 15px; line-height: 1; flex: none; }

.toast-msg { flex: 1; }

.toast-close { background: none; border: none; color: inherit; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 2px; opacity: .8; font-family: inherit; }

.toast-close:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* リソース ID は「先頭 N 文字＋~」をサーバ側で作って渡す（CSS で切らない＝省略記号 ~ を必ず見せる） */
.res-id {
  display: block;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.pager { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }

.pager a, .pager span { white-space: nowrap; }

.pager .note { white-space: normal; }

/* 空状態 */
.empty {
  text-align: center;
  padding: 26px 16px;
  color: var(--muted);
}

.empty .e-title { font-size: 15px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }

.empty .btn { margin-top: 12px; }

/* モーダル（デモ用の疑似ビューポート。実装は既存モーダル部品を流用） */
.modal-demo {
  position: relative;
  min-height: 240px;
  background: rgba(15,23,42,.45);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.modal { background: var(--panel); border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,.35);
  width: min(440px, 90%); padding: 20px 22px; }

.modal h3 { font-size: 15px; margin: 0 0 10px; }

.modal p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; }

.modal .m-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 1100px) {
  .content { padding: 16px 16px 40px; }
}

@media (max-width: 767px) {
  .mainnav { display: none; }
  .col-opt, .res-id { display: none; }  /* スマホは名前と金額を守る（ID・サービス列は詳細で見る） */
  .tbl { font-size: 12px; }
  .filterbar input[type=text] { width: 100%; }
  .card { overflow-x: auto; }  /* 幅の広い表はカード内で横スクロール。ページ全体は横に流さない */
  /* min-width は不要: 本ページの表は nowrap セルが自然幅を保つ（付けると 390px でカード内スクロールが新規発生する） */
}

/* left/top 明示＝静的位置由来の横はみ出しを防ぐ */
@media (prefers-reduced-motion: reduce) {
  /* 実装では id-pc-inventory の style.css を継承する。そこには無限ループのスピナーと
     セル点滅の animation があり、transition だけを止めても走り続ける（実測で確認）。
     animation と scroll-behavior まで止めて初めて動きが無くなる。 */
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============ ダークテーマ（id-pc-inventory の実値を継承。切替は右下のボタン＝モック用） ============ */


[data-theme="dark"] .delta-down, [data-theme="dark"] .hist-ok { color: var(--ok); }







/* ============ 推移（月次）：署名要素と同じ言語の棒 ============ */
/* 上の余白は説明の吹き出しが見出しへ重ならないための逃げ */
.mchart { position: relative; height: 220px; margin: 28px 0 4px; }

.mchart .grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-strong); font-size: 10.5px;
  color: var(--muted); z-index: 2; pointer-events: none; }

.mchart .grid span { position: absolute; right: 0; top: -16px; background: var(--panel); padding-left: 6px; }

.mbars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, 1fr); gap: 8px; align-items: end; }

.mb { background: var(--primary); opacity: .82; border-radius: 3px 3px 0 0; min-height: 4px; isolation: isolate; }

.mb:hover { opacity: 1; }

.mb-prov { background: repeating-linear-gradient(135deg, var(--warn) 0 4px, #f6d9ae 4px 8px); opacity: .95; }

.maxis { display: grid; grid-template-columns: repeat(14, 1fr); gap: 8px; font-size: 10px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: center; font-variant-numeric: tabular-nums; }

.maxis .y { color: var(--ink-soft); font-weight: 700; }

.mchips { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }

.mchips .lbl { color: var(--muted); font-size: 12px; }

/* ============ 日次増分：マイナス対応の拡大ストリップ ============ */
/* 上の余白は説明の吹き出しが見出しへ重ならないための逃げ */
.dchart { margin-top: 28px; position: relative; }

/* 目盛線（増分の目安。棒の裏に敷く） */
.dchart .dline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-strong);
  font-size: 10.5px; color: var(--muted); pointer-events: none; }

.dchart .dline span { position: absolute; right: 0; top: -15px; background: var(--panel); padding-left: 6px; }

.dgrid { display: grid; grid-template-columns: repeat(31, 1fr); gap: 3px; }

.dcell { display: flex; flex-direction: column; }

.dup { height: 140px; display: flex; align-items: flex-end; }

.ddown { height: 66px; display: flex; align-items: flex-start; border-top: 1px solid var(--line-strong); }

/* マイナスの増分が無い月は、下向きの領域を持たない（無駄な空白を作らない） */
.ddown-flat { height: 0; }

.db { width: 100%; background: var(--primary); opacity: .82; border-radius: 2px 2px 0 0; isolation: isolate; }

/* isolation: ホバーで opacity が 1 に達する棒は、文脈を固定しないとレイアウトが走る（実測で確認） */
.db:hover { opacity: 1; }

.db-neg { background: var(--ok); opacity: .85; border-radius: 0 0 2px 2px; }

.db-prov { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, #f6d9ae 3px 6px); }

.db-zero { width: 100%; height: 2px; background: var(--line-strong); align-self: flex-end; }

.daxis { display: grid; grid-template-columns: repeat(31, 1fr); gap: 3px; margin-top: 3px; }

.daxis span { font-size: 9.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.dnotes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.dnote { font-size: 11.5px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 10px; }

.dnote b { font-variant-numeric: tabular-nums; }

.dcap { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }

.dcap i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.cap-g { background: var(--ok); opacity: .85; }

/* 調整（月末後の遡り修正）別枠 */
.adjrow { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 9px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); font-size: 13px; background: var(--bg); }

.adjrow .tag { font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }

@media (max-width: 767px) {
  .content { padding: 14px 14px 40px; }
  .mainnav { display: none; }
  .maxis span, .daxis span { display: none; }
  .maxis .y, .maxis .y2 { display: block; }
  .daxis span:nth-child(10n+1) { display: block; }
  .mbars, .maxis { gap: 4px; }
}

/* 説明文の行長上限（60 字）。全幅に伸びると 90 字超の行ができ読みにくい（design-review で実測） */
@media (prefers-reduced-motion: reduce) {
  /* 実装では id-pc-inventory の style.css を継承する。そこには無限ループのスピナーと
     セル点滅の animation があり、transition だけを止めても走り続ける（実測で確認）。
     animation と scroll-behavior まで止めて初めて動きが無くなる。 */
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}



/* 表を主体にしない画面（推移・日次増分・レポート・取得状況・設定）は
   読みやすい幅で中央に寄せる。入力欄や図が 2000px まで伸びても読みやすくならず、
   見出しと値が離れて対応を追いにくくなるため。 */
.content-narrow { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* 全幅（PC 管理台帳と同じ）。広いモニタでは表と図をそのまま広げて使う */



.mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }

.btn-danger-link { background: none; border: none; color: var(--danger); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; }

.badge-neutral { color: var(--ink-soft); border-color: var(--line-strong); background: var(--bg); }

.badge-admin { color: var(--primary-d); border-color: var(--primary); background: #eaf0fc; }

.badge-ng { color: #b91c1c; border-color: var(--danger); background: #fdeaea; }

.flash-ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; border-radius: var(--radius);
  padding: 8px 12px; font-size: 13px; margin-top: 10px; display: inline-block; }

.flash-ng { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: var(--radius);
  padding: 8px 12px; font-size: 13px; margin-top: 10px; display: inline-block; }



/* ============================================================
   入力部品の統一（PC 管理台帳 style.css と同じ寸法）
   高さは --field-h の 1 箇所で決める。padding を上下に持たせたまま height を
   詰めると文字が潰れるため（旧実装：height 29px に padding 12px＋border 2px で
   文字領域が 15px しか残らず、select の中身が潰れていた）、
   上下 padding は 0 にして height と line-height で中央に置く。
   ============================================================ */


input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=url], select, textarea {
  font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--panel);
  border: 1.5px solid var(--line-strong); border-radius: 6px;
  height: var(--field-h); padding: 0 11px; line-height: calc(var(--field-h) - 3px);
  transition: border-color .12s, box-shadow .12s; }

textarea { height: auto; padding: 7px 11px; line-height: 1.6; }

input[type=text]:hover, input[type=password]:hover, input[type=number]:hover,
select:hover, textarea:hover { border-color: var(--primary); }

input[type=text]:focus, input[type=password]:focus, input[type=number]:focus,
select:focus, textarea:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,111,224,.15); }

input:disabled, select:disabled, textarea:disabled, input[readonly] {
  background: var(--bg); color: var(--muted); cursor: not-allowed; border-color: var(--line); }

/* 表の中だけは 1 段小さく（行の高さを抑える）。ここも上下 padding は持たせない */
td input[type=text], td input[type=password], td input[type=number], td select {
  height: var(--field-h-sm); line-height: calc(var(--field-h-sm) - 3px); font-size: 13px; padding: 0 8px; }

select { cursor: pointer; }

/* 金額など右揃えの数値入力（幅は内容に合わせて固定） */
.num-input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }

/* 伏せ字の入力欄と、その右に置く表示切り替え。
   align-items を stretch にしないと、入力欄と釦の上端が数 px ずれる */
.field-reveal { display: flex; align-items: stretch; gap: 6px; }

.field-reveal input { flex: 1; min-width: 0; }

.form input, .form select, .form textarea { min-width: 0; max-width: 100%; }

.reveal-btn { flex: none; height: var(--field-h); padding: 0 10px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; color: var(--ink-soft); background: var(--bg);
  border: 1.5px solid var(--line-strong); border-radius: 6px; cursor: pointer; }

.reveal-btn:hover { border-color: var(--primary); color: var(--primary); }

.reveal-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 利用者一覧の操作列：パスワードの変更と削除を 1 行に並べる */
.u-ops { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.u-passwd { display: flex; align-items: center; gap: 6px; }

/* 表の中は入力を 1 段小さくしているが、この行では釦と並ぶので高さを合わせる */
.u-passwd input[type=password] { width: 190px; height: var(--field-h);
  line-height: calc(var(--field-h) - 3px); font-size: 13.5px; padding: 0 11px; }

/* コマンド例（cron の登録行など） */
.code-block { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; margin: 10px 0; }

.code-block code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px;
  line-height: 1.7; white-space: pre; color: var(--ink); }

/* ============================================================
   通知先ごとのパネル
   1 つの表に詰め込むと、どの設定がどの通知先のものか分からなくなるため、
   通知先ごとに枠を分ける。有効なパネルは左に色の帯を付けて区別する。
   ============================================================ */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px;
  margin-bottom: 16px; align-items: stretch; }

.panels > .panel { height: 100%; }

.panel { border-left: 4px solid var(--line-strong); }

.panel-on { border-left-color: var(--ok); }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }

.panel-head h2 { margin: 0; padding: 0; border: none; }

.panel-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--ink-soft); font-weight: 600; cursor: pointer; white-space: nowrap; }

.panel-switch input { cursor: pointer; }

/* パネル内は 2 列のままでは窮屈なので、見出し列を狭くする */
.form-narrow { grid-template-columns: 130px minmax(0, 1fr); max-width: none; }

/* 通知する条件の一覧（通知先ごとに個別に選ぶ） */
.cond-list { display: flex; flex-direction: column; gap: 2px; }

.cond-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink);
  padding: 3px 6px; border-radius: 5px; cursor: pointer; }

.cond-item:hover { background: var(--bg); }

.cond-item input { cursor: pointer; flex: none; }

/* ============================================================
   グラフの説明（マウスを乗せた瞬間に出す）
   ブラウザ標準の title は 1 秒ほど待たないと出ないため、値を読み取るのに
   使うグラフでは自前で出す。表示は透明度だけで動かす。
   ============================================================ */
[data-tip] { position: relative; }

[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: #0f172a; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.5;
  padding: 5px 9px; border-radius: 6px; white-space: pre; pointer-events: none;
  opacity: 0; visibility: hidden; z-index: 30; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }

/* 吹き出しを出している棒だけを持ち上げる。これが無いと、後ろに並ぶ棒
   （HTML の後ろにある要素が上に重なる）に隠れて読めない */
[data-tip]:hover, [data-tip]:focus-visible { z-index: 31; }

.ds, .db, .mb { position: relative; }

/* 端の棒は吹き出しが画面外へ出るので内側へ寄せる */
[data-tip].tip-left::after { left: 0; transform: none; }

[data-tip].tip-right::after { left: auto; right: 0; transform: none; }

/* ============================================================
   グラフの軸（縦＝金額・横＝月／日）
   ============================================================ */
.chart-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto;
  gap: 0 8px; align-items: stretch; }

.axis-y { grid-row: 1; grid-column: 1; display: flex; align-items: center; }

.axis-y span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px;
  color: var(--muted); font-weight: 600; letter-spacing: .04em; }

.axis-x { grid-row: 3; grid-column: 2; text-align: center; font-size: 11px; color: var(--muted);
  font-weight: 600; letter-spacing: .04em; padding-top: 2px; }

.chart-body { grid-row: 1; grid-column: 2; }

.chart-labels { grid-row: 2; grid-column: 2; }

/* 2 列目は minmax(0,1fr)。1fr のままだと入力欄の既定幅より狭くできず、
   枠の外へはみ出す（パネルに入れたときに実際に起きた） */
.form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 16px;
  align-items: center; max-width: 640px; }

.form label, .form .flabel { font-size: 13px; color: var(--ink-soft); font-weight: 600; }



/* left/top 明示＝静的位置由来の横はみ出しを防ぐ */
.form .full { grid-column: 1 / -1; }

.form .hint { grid-column: 2; font-size: 12px; color: var(--muted); margin-top: -8px; }

.settings-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }

.settings-tabs a { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); background: var(--panel); }

.settings-tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; }



.li-type { font-size: 10.5px; color: var(--muted); }

/* ログイン */
.login-wrap { min-height: 480px; background: var(--bg); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 12px; }

.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  width: min(400px, 92%); padding: 26px 28px; }

.login-card h1 { font-size: 18px; margin: 0 0 4px; }

.login-card .sub { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }

.login-btn-sso { display: block; width: 100%; text-align: center; background: var(--primary); color: #fff;
  border: 1px solid var(--primary); border-radius: 8px; padding: 10px 0; font-size: 14px; font-weight: 700; cursor: pointer; }

.login-btn-sso:hover { background: var(--primary-d); }

.login-div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 16px 0; }

.login-div::before, .login-div::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.login-form { display: flex; flex-direction: column; gap: 10px; }

.login-form input { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--panel); color: var(--ink); }

.login-btn-local { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 8px 0; font-size: 13.5px; font-weight: 600; cursor: pointer; }

.login-btn-local:hover { border-color: var(--primary); color: var(--primary); }

.login-err { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; margin-bottom: 12px; }

@media (max-width: 767px) {
  .mainnav { display: none; }
  .form { grid-template-columns: 1fr; gap: 6px; }
  .form .hint { grid-column: 1; }
  .col-opt, .res-id { display: none; }
  .tbl { font-size: 12px; }
  .filterbar input[type=text] { width: 100%; }
  .card { overflow-x: auto; }  /* 幅の広い表はカード内で横スクロール。ページ全体は横に流さない */
  .tbl { min-width: 540px; }   /* 表は自然な幅を保ち、狭い列への詰め込みで崩さない */
  .tbl a { white-space: nowrap; }
  .login-wrap { min-height: 420px; }
}





.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.btn-danger:hover { background: var(--danger-d); }

/* 先頭の h1（sr-only）を挟んでも A. の上余白を保つ */


.tbl th[scope="row"] { font-size: inherit; color: inherit; font-weight: 400; white-space: normal;
  padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }

/* 行見出しは td と同じ見た目 */


/* A. リソース詳細（選択行の直下に展開するパネル） */
.row-selected td { background: #eef3fd; }

.detail-row td { background: #f8fafd; padding: 0; }

/* 展開した詳細は、どの行の中身かが分かるように左を空けて段を下げる。
   左の縦棒（太く角を丸めたもの）が親の行とのつながりを示す。 */
.detail-pane { position: relative; padding: 14px 18px 16px 22px; margin-left: 32px; }

.detail-pane::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 5px; border-radius: 999px; background: var(--primary); }

.detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }

.detail-pane h3 { font-size: 13px; margin: 0 0 6px; color: var(--ink-soft); }

.detail-id { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  overflow-wrap: anywhere; }

.mini-strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; align-items: end; height: 40px; margin-top: 4px; }

.mini-strip i { background: var(--primary); opacity: .82; border-radius: 1px; min-height: 2px; }

.mini-strip i.p { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, #f6d9ae 3px 6px); }

.kv { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.kv td, .kv th { padding: 3px 8px 3px 0; border: none; vertical-align: top; }

.kv th { color: var(--muted); white-space: nowrap; width: 110px; text-align: left; font-weight: 400; }

/* B. 骨組み（読込中。アニメーションは使わない方針のため静的） */
.sk { background: #e8ecf3; border-radius: 6px; display: inline-block; }

/* 進捗バー：伸縮は width ではなく transform: scaleX で表す。
   width を動かすと進捗が進むたびにレイアウトが走る（実測：300ms の遷移でレイアウト 19 回／scaleX は 0 回）。
   右端は親の overflow で切るため、子には角丸を付けない。 */
.pbar {
  height: 8px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}

.pbar i {
  display: block;
  height: 8px;
  background: var(--primary);
  opacity: .7;
  transform-origin: left center;
}

/* D. モーダル */


/* E. 通知文面ひな形 */
.mail { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; font-size: 13px; }

.mail-h { background: var(--bg); padding: 8px 14px; border-bottom: 1px solid var(--line); }

.mail-b { padding: 12px 14px; white-space: pre-line; }

.teams-card { border: 1px solid var(--line-strong); border-left: 4px solid var(--danger); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; background: var(--panel); }

.line-msg { display: inline-block; background: #e8f8ee; border: 1px solid #bbf7d0; border-radius: 14px 14px 14px 4px;
  padding: 10px 14px; font-size: 13px; white-space: pre-line; }

.tmpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.gen-ng { font-size: 13px; color: #991b1b; background: #fee2e2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 8px 10px; margin-top: 12px; }

@media (max-width: 900px) { .detail-grid, .tmpl-grid { grid-template-columns: 1fr; } }

@media (max-width: 767px) {
  .content { padding: 14px 14px 40px; }
  .card { overflow-x: auto; }
  .tbl { min-width: 520px; }
}

[data-theme="dark"] .flash-ng, [data-theme="dark"] .stale-band, [data-theme="dark"] .login-err, [data-theme="dark"] .gen-ng { background:#3a1a1f; color:#f2a3a6; border-color:#5c262c; }



.note { font-weight: 400; color: var(--muted); font-size: 12px; }

/* ============ A. PDF 紙面（A4 縦・1 ページ） ============ */
.paper-wrap { background: #dde3ec; border-radius: 12px; padding: 26px; display: flex; justify-content: center; }

.paper { position: relative; background: #fff; width: 700px; max-width: 100%; padding: 44px 52px;
  box-shadow: 0 6px 24px rgba(15,23,42,.18); color: #172033; overflow: hidden; }

.paper .p-head { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 3px solid #0f172a; padding-bottom: 10px; }

.paper h1 { font-size: 19px; margin: 0; }

.paper .p-sub { font-size: 11.5px; color: #414d63; }

.p-total { display: flex; align-items: baseline; gap: 16px; margin: 18px 0 4px; }

.p-total .usd { font-size: 34px; font-weight: 700; }

.p-total .jpy { font-size: 16px; color: #414d63; font-weight: 600; }

.p-total .rate { font-size: 11px; color: #6b7688; }

.p-meta { font-size: 11px; color: #6b7688; margin-bottom: 14px; }

.p-sec { font-size: 12.5px; font-weight: 700; margin: 16px 0 6px; padding-left: 8px; border-left: 4px solid #3b6fe0; }

.p-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }

.p-tbl th { text-align: left; font-weight: 600; color: #414d63; border-bottom: 1.5px solid #172033; padding: 4px 6px; }

.p-tbl td { padding: 4px 6px; border-bottom: 1px solid #e6eaf1; }

.p-tbl th[scope="row"] { font-weight: 400; color: inherit; border-bottom: 1px solid #e6eaf1; }

/* 行見出しは td と同じ見た目 */
.p-tbl .num { text-align: right; white-space: nowrap; }

.p-tbl .pct { text-align: right; color: #6b7688; white-space: nowrap; width: 52px; }

.p-tbl tr.total td, .p-tbl tr.total th[scope="row"] { border-top: 1.5px solid #172033; border-bottom: none; font-weight: 700; }

.p-foot { display: flex; justify-content: space-between; margin-top: 26px; padding-top: 8px;
  border-top: 1px solid #ccd5e3; font-size: 10px; color: #6b7688; }

/* 暫定月の透かし（確定月では出さない） */
.p-draft { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%) rotate(-24deg);
  font-size: 104px; font-weight: 700; color: rgba(224,137,16,.12); pointer-events: none; }

/* B. Excel 列構成 */
.xls { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.xls th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 2px solid var(--line); }

.xls td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* C. 残余状態 */




.empty b { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; }

/* D. ファビコン */
.fav-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

@media (max-width: 767px) {
  .content { padding: 14px 14px 40px; }
  .paper { padding: 24px 18px; }
  .paper-wrap { padding: 12px; }
  .p-draft { font-size: 56px; }
  .card { overflow-x: auto; }
}

/* ── 実装専用（モックでは配色切替ボタン・デモ額縁が担っていた部分） ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none;
  align-items: center; justify-content: center; z-index: 70; padding: 16px; }
.modal-overlay.open { display: flex; }
.flash-info { background: #e0ecff; color: #1e40af; border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 8px 12px; font-size: 13px; margin-bottom: 12px; display: inline-block; }
[data-theme="dark"] .flash-info { background: #16294a; color: #bcd4f5; border-color: #2c4a7a; }