/* @implements REQ-NFR-02 */
/*
 * devteam theme — Neon Glass
 * 参考: inbox の「クラウド運用ダッシュボード」「AI エージェント管理画面」のイメージ図
 *
 * 色の役割は 4 つに分け、混ぜない（agent-operations-ui-kit の原則を引き継ぐ）
 *   1. ブランド（--dt-cyan / --dt-violet と虹のアクセント）… 装飾だけ。状況の判断に使わない
 *   2. カテゴリー（--cat-*）… 部署・リソースの種類。固定の割り当て
 *   3. 状態（--st-*）… 正常・警告・異常・待機など。どのカテゴリーでも同じ色
 *   4. 系列（--series-*）… グラフ。エンティティごとに固定（validate_palette.js で検査済み・dark）
 *
 * ガラスは 2 種類
 *   .dt-frost      … 後ろを見せないポップアップ（モーダル・メニュー・トースト）。磨りガラス（強いぼかし＋粒子）
 *   .dt-inspector  … 後ろを見ながら使う詳細パネル。透明に近いガラス（弱いぼかし）
 */

:root {
  color-scheme: dark;

  /* ---- 土台 ---- */
  --dt-bg: #040a16;
  --dt-bg-2: #071125;
  --dt-surface: rgba(13, 25, 46, 0.62);
  --dt-surface-solid: #0b1526;
  --dt-surface-2: rgba(20, 36, 64, 0.55);
  --dt-surface-hover: rgba(34, 60, 104, 0.42);
  --dt-line: rgba(110, 170, 255, 0.16);
  --dt-line-strong: rgba(110, 190, 255, 0.34);
  --dt-text: #e8f0ff;
  --dt-text-2: #b6c4dc;
  --dt-muted: #7f90ae;
  --dt-faint: #56678a;

  /* ---- ブランド ---- */
  --dt-cyan: #22d3ee;
  --dt-blue: #3b82f6;
  --dt-violet: #a855f7;
  --dt-magenta: #e879f9;
  --dt-glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.45), 0 0 18px rgba(34, 211, 238, 0.28), inset 0 0 14px rgba(34, 211, 238, 0.12);
  --dt-rainbow: linear-gradient(95deg, #38bdf8 0%, #22d3ee 25%, #a78bfa 55%, #e879f9 80%, #fbbf24 100%);
  --dt-edge-light: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.55) 30%, rgba(167, 139, 250, 0.45) 70%, transparent);

  /* ---- 状態（どのカテゴリーでも同じ） ---- */
  --st-ok: #34d399;
  --st-running: #34d399;
  --st-warn: #fbbf24;
  --st-approval: #fbbf24;
  --st-error: #f43f5e;
  --st-waiting: #60a5fa;
  --st-scheduled: #a78bfa;
  --st-idle: #8b9ab4;
  --st-stopped: #64748b;
  --st-unknown: #3b4560;

  /* ---- カテゴリー（部署） ---- */
  --cat-orchestration: #86a7ff;
  --cat-engineering: #69c8f2;
  --cat-security: #69d7c3;
  --cat-data: #81d6aa;
  --cat-research: #b9d886;
  --cat-finance: #ecc879;
  --cat-operations: #f0a57f;
  --cat-communication: #e8a2c8;
  --cat-quality: #b8a2ef;
  --cat-support: #a6b8d0;

  /* ---- カテゴリー（AWS のリソース。AWS アイコンの色に合わせる） ---- */
  --aws-compute: #ed7100;
  --aws-database: #c925d1;
  --aws-network: #8c4fff;
  --aws-storage: #7aa116;
  --aws-integration: #e7157b;
  --aws-analytics: #4f7cff;
  --aws-security: #dd344c;

  /* ---- 系列（グラフ。dark の面 #0b1526 で検査済み） ---- */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #9085e9;
  --series-4: #199e70;
  /* 5・6 は dataviz の参照のパレットの黄・マゼンタの dark の段（6 色の並びで validate_palette の dark・#0b1526 に合格。
     隣の CVD ΔE 8.4・通常 19.3。2026-11-13 実データのアカウントが 6 件で、5・6 件目が同じ灰色になっていたため） */
  --series-5: #c98500;
  --series-6: #d55181;
  --series-other: #5b6b86;

  /* ---- 形 ---- */
  --dt-radius-sm: 8px;
  --dt-radius: 14px;
  --dt-radius-lg: 20px;
  --dt-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --dt-font: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --dt-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --dt-ease: cubic-bezier(0.2, 0.75, 0.25, 1);

  /* 磨りガラスの粒子（SVG のノイズ） */
  --dt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-category="orchestration"] { --category: var(--cat-orchestration); }
[data-category="engineering"] { --category: var(--cat-engineering); }
[data-category="security"] { --category: var(--cat-security); }
[data-category="data"] { --category: var(--cat-data); }
[data-category="research"] { --category: var(--cat-research); }
[data-category="finance"] { --category: var(--cat-finance); }
[data-category="operations"] { --category: var(--cat-operations); }
[data-category="communication"] { --category: var(--cat-communication); }
[data-category="quality"] { --category: var(--cat-quality); }
[data-category="support"] { --category: var(--cat-support); }

[data-state="ok"], [data-state="running"] { --state: var(--st-running); }
[data-state="warn"], [data-state="approval"] { --state: var(--st-approval); }
[data-state="error"] { --state: var(--st-error); }
[data-state="waiting"] { --state: var(--st-waiting); }
[data-state="scheduled"] { --state: var(--st-scheduled); }
[data-state="idle"] { --state: var(--st-idle); }
[data-state="stopped"] { --state: var(--st-stopped); }
[data-state="unknown"] { --state: var(--st-unknown); }

/* ================= 土台 ================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* ページ全体はスクロールさせない。枠（.dt-app）を画面に固定し、スクロールは中身の列（.dt-main・メニュー）の中だけ。
   iOS がアプリの行き来で表示の大きさ・位置を変えても、上のバーが動いたり高さの計算がずれたりしない
   （2026-11-13 小川さん「アプリを行ったり来たりすると表示エリアがどんどん狭くなる」「メニューバーが画面上部に固定されてなくてスクロールしちゃう」） */
html, body { overflow: hidden; overscroll-behavior: none; }
/* 画面の拡大縮小をさせない（2026-11-13 小川さん「拡大縮小できて、画面サイズ変わったりして鬱陶しい」）。JavaScript では止めず、宣言だけで決める
   （小川さん「こんなもん、jsで制御する話じゃなくね？」→ gesturestart を止める処理は消した）:
   - touch-action: pan-x pan-y … 指の操作は縦横のスクロールだけ許し、2 本指の拡大・ダブルタップの拡大は許さない（3D の canvas は three.js が touch-action: none を付けて自分で受ける）
   - 入力欄・選択欄・文字欄は、どの端末でも 16px（iOS が文字の小さい入力欄に触れたときに自動で拡大するのを防ぐ。大きい画面の Safari は
     マウスの端末（pointer: fine）を名乗ることがあり、「指で触る端末だけ」の指定では効かず、選択欄の拡大のまま戻れなくなっていた。
     2026-11-13 小川さん「更新されてリロードした直後にこうなんだけど」）
   - viewport の maximum-scale=1・user-scalable=no（mock/index.html）は、それを守るブラウザで効く。iOS の Safari は使いやすさのために無視する */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(37, 99, 235, 0.22), transparent 60%),
    radial-gradient(900px 600px at 105% 110%, rgba(147, 51, 234, 0.16), transparent 60%),
    radial-gradient(700px 400px at 60% 40%, rgba(14, 165, 233, 0.06), transparent 70%),
    var(--dt-bg);
  background-attachment: fixed;
  color: var(--dt-text);
  font: 14px/1.55 var(--dt-font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
/* hidden 属性は、display を持つ部品（.dt-count・.dt-scrim・.dt-tip など）でも必ず隠す */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }   /* どの端末でも 16px（上の「画面の拡大縮小をさせない」） */
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--dt-cyan); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(34, 211, 238, 0.3); }
.dt-mono, .num { font-family: var(--dt-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--dt-font); }
.muted { color: var(--dt-muted); }

/* ================= レイアウト ================= */
/* 上のバーの高さは中身で決まる（道具が入らない幅では 2 行・説明を出すと伸びる）。重ねて開くメニューは、高さを数えずに 2 行目の区画に置く（下の @media） */
.dt-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); position: fixed; inset: 0;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
/* 上のバー: ロゴ（押すとメニューを開閉）・画面の題（押すと説明を出し入れ）・画面の道具（検索・フィルタ）・アバター。
   道具が題の横に入らない幅では、題の下の 2 行目に回る（2026-11-13 小川さん「ダッシュボードとかのタイトルがコンテンツエリアにあるけど、ナビゲーションのバーに入れて
   devteamってタイトルはいらない アイコンタップでメニューを開閉させて」「検索とかフィルタなどのパーツはナビゲーションバーに入れて」「縦長にしてフィルタとかが入らない場合は2行にする」） */
.dt-topbar { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  min-height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 20px 0; border-bottom: 1px solid var(--dt-line);
  background: linear-gradient(180deg, rgba(6, 14, 30, 0.9), rgba(6, 14, 30, 0.55)); backdrop-filter: blur(12px); position: relative; z-index: 30; }

/* メニュー。開いても閉じても、アイコンは同じ位置（細い列 64px の中央）に置き、名前は列の幅の外を隠す。
   開閉は幅を動かし、名前は薄く消える（2026-11-13 小川さん「メニューの展開・縮小も、アニメーションさせて」） */
.dt-side { border-right: 1px solid var(--dt-line); padding: 14px 8px; display: flex; flex-direction: column; gap: 4px; background: rgba(4, 10, 22, 0.5);
  min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.dt-side a { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 10px; color: var(--dt-text-2); border: 1px solid transparent; white-space: nowrap; }
.dt-side .lbl { transition: opacity 0.22s var(--dt-ease); }
.dt-side a > svg { flex: none; }   /* 閉じた細い列で、はみ出す名前に押されてアイコンが縮まない */
.dt-side a:hover { background: var(--dt-surface-hover); color: var(--dt-text); }
.dt-side a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.1)); border-color: rgba(34, 211, 238, 0.4);
  box-shadow: inset 0 0 12px rgba(34, 211, 238, 0.12); }
.dt-side .dt-side-sec { font-size: 11px; color: var(--dt-faint); padding: 14px 14px 4px; letter-spacing: 0.08em; border-top: 1px solid var(--dt-line); margin-top: 8px; white-space: nowrap; }
.dt-conn { display: flex; align-items: center; gap: 14px; padding: 4px 14px 10px; font-size: 13px; color: var(--dt-text-2); white-space: nowrap; }
.dt-conn .dt-dot { margin: 0 4.5px; }
/* 判断・承認のアイコンの場所（件数のバッジか、全部済んだらチェック）。アイコンと同じ位置の中央に置く */
.dt-side .nav-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 -2px; flex: none; }
/* ロゴとアバターは、2 行になっても題の行にそろえる（題の行の高さ 46px・上下 9px） */
.dt-topbar > .dt-brand-btn, .dt-topbar > .dt-user-btn { align-self: start; margin-top: 9px; }
.dt-topbar > .dt-user-btn { margin-top: 12px; }
.dt-brand-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: none; padding: 0; cursor: pointer; }
.dt-brand-btn:hover, .dt-brand-btn[aria-expanded="true"] { background: var(--dt-surface-hover); border-color: var(--dt-line); }
.dt-bar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; padding: 9px 0; }
.dt-bar-title { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 46px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.dt-bar-title h1 { margin: 0; font-size: 20px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 22px rgba(80, 160, 255, 0.35); }
.dt-bar-title .chev { flex: none; color: var(--dt-text-2); transition: transform 0.2s var(--dt-ease); }
.dt-bar-title[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dt-bar-title:disabled { cursor: default; }
.dt-bar-title:disabled .chev { display: none; }
.dt-bar-tools { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.dt-bar-tools:empty { display: none; }
.dt-bar-tools .dt-input { flex: 0 1 280px; min-width: 160px; }
.dt-bar-tools .dt-select { flex: 0 1 200px; min-width: 130px; }
/* スマホの幅では、道具は題の行に入らないので、上のバーの 2 行目に幅いっぱいで置く */
@media (max-width: 759.98px) {
  .dt-bar-head { display: contents; }
  .dt-bar-title { grid-column: 2; grid-row: 1; }
  .dt-bar-tools { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-bottom: 10px; }
  .dt-bar-tools .dt-input, .dt-bar-tools .dt-select { flex: 1 1 140px; min-width: 0; }
  .dt-bar-desc { grid-row: 3; }
}
/* バー全体に重ねる欄（検索の入力・タブの選択肢）。開いている間はバーのほかの物を隠す。上の余白（ホーム画面から開いたとき）の下に置く */
.dt-bar-over { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: env(safe-area-inset-top, 0px) 20px 0;
  background: rgb(6, 14, 30); visibility: hidden; pointer-events: none;
  /* 押したボタンの位置（--ox）から円で広がり、閉じると同じ所へ縮む（2026-11-13 小川さん「もっと拡大・非表示とかの動きを持たせて（アニメーションも使って）」） */
  clip-path: circle(0 at var(--ox, 100%) 50%); transition: clip-path 0.32s var(--dt-ease), visibility 0s linear 0.32s; }
.dt-bar-over > * { opacity: 0; transform: translateX(14px); transition: opacity 0.2s var(--dt-ease), transform 0.2s var(--dt-ease); }
.dt-bar-over > .lbl { color: var(--dt-text-2); font-size: 13px; flex: none; }
.dt-bar-over > .dt-seg { flex: 0 1 auto; min-width: 0; overflow-x: auto; }
.dt-bar-over > .dt-over-x { flex: none; }
/* タブの選択肢は、押したボタンの近く（右）に寄せて出す（2026-11-13 小川さん「右側にあるパーツを展開して、なんで左寄せに表示させるの？近くに出して」） */
.dt-pick-over { justify-content: flex-end; }
.dt-topbar[data-search="open"] > .dt-bar-search, .dt-pick.open > .dt-pick-over { visibility: visible; pointer-events: auto;
  clip-path: circle(150vmax at var(--ox, 100%) 50%); transition: clip-path 0.42s var(--dt-ease), visibility 0s; }
.dt-topbar[data-search="open"] > .dt-bar-search > *, .dt-pick.open > .dt-pick-over > * { opacity: 1; transform: none; transition-delay: 0.08s; transition-duration: 0.3s; }
/* 重ねる欄を開いている間、バーのほかの物は縮みながら消える */
.dt-brand-btn, .dt-user-btn, .dt-bar-title, .dt-bar-tools > *, .dt-pick-btn { transition: opacity 0.25s var(--dt-ease), transform 0.25s var(--dt-ease); }
.dt-topbar[data-search="open"] :is(.dt-brand-btn, .dt-user-btn, .dt-bar-title, .dt-bar-tools > *),
.dt-topbar:has(.dt-pick.open) :is(.dt-brand-btn, .dt-user-btn, .dt-bar-title, .dt-bar-tools > :not(.dt-pick.open), .dt-pick.open > .dt-pick-btn) {
  opacity: 0; transform: scale(0.94); pointer-events: none; }
.dt-bar-search input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: 0; color: inherit; padding: 10px 0; }
.dt-bar-search input::-webkit-search-cancel-button { display: none; }
.dt-pick-btn { gap: 6px; }
.dt-bar-tools .dt-seg button { min-height: 38px; }
/* 説明は題を押すと、高さが伸びて現れる（行の高さ 0fr → 1fr） */
.dt-bar-desc { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s var(--dt-ease), opacity 0.3s var(--dt-ease); }
.dt-bar-desc.open { grid-template-rows: 1fr; opacity: 1; }
.dt-bar-desc > p { min-height: 0; overflow: hidden; margin: 0; padding-bottom: 10px; color: var(--dt-text-2); font-size: 13px; overflow-wrap: anywhere; }
.dt-bar-desc:not(.open) > p { padding-bottom: 0; }
/* ドロワー（mock/app.js の setSide）。PC の出し方（760px 以上）では、閉じるとアイコンだけの細い列（名前は title の吹き出し）、
   開くと名前つき。1280px 以上は内容の横の列（列の幅を動かす）、760〜1279px は内容の上に重ねる（メニューの幅を動かす）。スマホの幅は下の @media */
.dt-app { transition: grid-template-columns 0.28s var(--dt-ease); }
.dt-app[data-side="closed"] { grid-template-columns: 64px minmax(0, 1fr); }
.dt-app[data-side="closed"] .dt-side .lbl { opacity: 0; }
.dt-side-scrim { display: none; }
@media (min-width: 760px) and (max-width: 1279.98px) {
  .dt-app, .dt-app[data-side] { grid-template-columns: 64px minmax(0, 1fr); }
  .dt-app .dt-side { position: absolute; grid-row: 2; grid-column: 1; z-index: 40; left: 0; top: 0; bottom: 0; height: auto; width: 64px;
    transition: width 0.28s var(--dt-ease), background 0.28s, box-shadow 0.28s; }
  .dt-app[data-side="open"] .dt-side { width: 260px; background: rgba(6, 14, 30, 0.97); box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
  .dt-side-scrim { display: block; position: absolute; grid-row: 2; grid-column: 1 / -1; inset: 0; z-index: 35; background: rgba(1, 4, 12, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 0.28s var(--dt-ease); }
  .dt-app[data-side="open"] .dt-side-scrim { opacity: 1; pointer-events: auto; }
  /* メニューは列から外して重ねるので、内容は 2 列目に置いたままにする（細い列の跡は空ける） */
  .dt-app .dt-main { grid-column: 2; }
}
.dt-main { padding: 20px 24px calc(40px + env(safe-area-inset-bottom, 0px)); min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }


.dt-grid { display: grid; gap: 16px; }
.dt-grid.kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dt-grid.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.dt-grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dt-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dt-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ================= 面（パネル） ================= */
.dt-panel {
  position: relative; border-radius: var(--dt-radius); border: 1px solid var(--dt-line);
  background: linear-gradient(180deg, rgba(18, 34, 62, 0.62), rgba(9, 18, 36, 0.66));
  box-shadow: inset 0 1px 0 rgba(160, 210, 255, 0.07), 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 16px 18px; min-width: 0;
}
/* 上辺の光（ガラスの縁） */
.dt-panel::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: var(--dt-edge-light); opacity: 0.8; pointer-events: none; }
.dt-panel.flush { padding: 0; overflow: hidden; }
.dt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dt-panel-head h2, .dt-panel-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
/* 見出しの名前が長くても、右のバッジ・ボタン・リンクをカードの外に押し出さない（名前は折り返し、右の物は縮めない） */
.dt-panel-head > * { min-width: 0; overflow-wrap: anywhere; }
.dt-panel-head > .dt-badge, .dt-panel-head > .dt-btn, .dt-panel-head > .link, .dt-panel-head > .dt-seg { flex: none; }
.dt-panel-head .link { color: var(--dt-cyan); font-size: 13px; }

/* KPI カード */
/* 中身の列は縮められるようにし（minmax(0, 1fr)）、数値の後ろの補足は折り返す。狭いカードで文字やグラフがカードの外に出ないように（ui:check の h-overflow） */
.dt-kpi { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 16px 18px; }
.dt-kpi .ico { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; color: var(--dt-cyan); filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.5)); }
.dt-kpi .lbl { color: var(--dt-text-2); font-size: 13px; }
.dt-kpi .lbl { min-width: 0; overflow-wrap: anywhere; }
/* 数値の行はグラフの下まで使う（数値そのものは折り返さず、後ろの単位・補足だけを折り返す） */
.dt-kpi .val { grid-column: 2 / 4; min-width: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.01em; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
.dt-kpi .val small { font-size: 14px; color: var(--dt-text-2); margin-left: 4px; font-weight: 500; }
.dt-kpi .spark { grid-row: 1; grid-column: 3; width: 96px; height: 30px; }
/* 総トークンの内訳（入力・出力・キャッシュ書込・キャッシュ読込）を 2 列の小さな表で */
.dt-kpi .sub { grid-column: 2 / 4; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; font-size: 12px; color: var(--dt-text-2); line-height: 1.5; }
.dt-kpi .sub span { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.dt-kpi .sub i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dt-kpi .sub b { margin-left: auto; color: var(--dt-text); font-weight: 600; }
/* カードが細いとき（メニューの列を開いた広い幅で 4 枚並ぶなど）は 1 列にする（ui:check の panel-overflow） */
.dt-kpi { container-type: inline-size; }
@container (max-width: 340px) { .dt-kpi .sub { grid-template-columns: minmax(0, 1fr); } }
.delta { font-size: 13px; margin-left: 8px; font-weight: 600; }
.delta.up { color: var(--st-ok); } .delta.down { color: var(--st-error); } .delta.flat { color: var(--dt-muted); }

/* ================= 部品 ================= */
.dt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--dt-line-strong);
  background: rgba(16, 32, 58, 0.7); color: var(--dt-text); transition: all 0.18s var(--dt-ease); white-space: nowrap; }
.dt-btn:hover { border-color: rgba(34, 211, 238, 0.6); box-shadow: 0 0 14px rgba(34, 211, 238, 0.2); }
.dt-btn.primary { background: linear-gradient(180deg, rgba(34, 180, 238, 0.4), rgba(37, 99, 235, 0.38)); border-color: rgba(34, 211, 238, 0.65); box-shadow: var(--dt-glow-cyan); }
.dt-btn.danger { border-color: rgba(244, 63, 94, 0.55); color: #fecdd3; }
.dt-btn.ghost { background: transparent; border-color: transparent; }
.dt-btn.block { width: 100%; justify-content: center; padding: 12px; border-style: dashed; }
.dt-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--dt-line-strong); background: rgba(16, 32, 58, 0.6); }

.dt-select, .dt-input { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--dt-line-strong);
  background: rgba(8, 18, 36, 0.75); min-width: 0; }
.dt-input input, .dt-select select { background: none; border: 0; outline: 0; min-width: 0; width: 100%; }
.dt-select select { -webkit-appearance: none; appearance: none; }   /* 矢印は .dt-select の中のアイコンだけ（ブラウザの矢印と二重にしない） */
.dt-select select option { background: var(--dt-surface-solid); }
.dt-input input::placeholder { color: var(--dt-faint); }

.dt-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--dt-line-strong); background: rgba(8, 18, 36, 0.7); white-space: nowrap; }
.dt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--state, var(--st-ok)); box-shadow: 0 0 8px var(--state, var(--st-ok)); flex: none; display: inline-block; }
.dt-dot.live { animation: dt-blink 2.2s infinite; }
@keyframes dt-blink { 50% { opacity: 0.4; } }

.dt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--state, var(--dt-text-2)); background: color-mix(in srgb, var(--state, #8b9ab4) 16%, transparent); border: 1px solid color-mix(in srgb, var(--state, #8b9ab4) 35%, transparent); }
.dt-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dt-badge.plain::before { display: none; }
.dt-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(130, 150, 190, 0.18); color: var(--dt-text-2); }
.dt-count.alert { background: var(--st-error); color: #fff; box-shadow: 0 0 10px rgba(244, 63, 94, 0.6); }
.dt-chip { font-size: 11px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--dt-line-strong); color: var(--dt-text-2); white-space: nowrap; }

.dt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--dt-line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.dt-tabs button { background: none; border: 1px solid transparent; border-bottom: 0; padding: 9px 18px; border-radius: 10px 10px 0 0; color: var(--dt-text-2); white-space: nowrap; }
.dt-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.04)); border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 -6px 18px rgba(34, 211, 238, 0.12) inset; }

.dt-seg { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--dt-line-strong); background: rgba(8, 18, 36, 0.75); }
.dt-seg button { border: 0; background: none; padding: 5px 12px; border-radius: 7px; color: var(--dt-text-2); }
.dt-seg button[aria-pressed="true"] { background: rgba(34, 211, 238, 0.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.5); }

.dt-toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(100, 116, 139, 0.4); border: 0; flex: none; }
.dt-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #cbd5e1; transition: all 0.18s var(--dt-ease); }
.dt-toggle[aria-checked="true"] { background: linear-gradient(90deg, #0ea5e9, #22d3ee); box-shadow: 0 0 12px rgba(34, 211, 238, 0.5); }
.dt-toggle[aria-checked="true"]::after { left: 19px; background: #fff; }

.dt-meter { height: 6px; border-radius: 999px; background: rgba(120, 150, 200, 0.16); overflow: hidden; min-width: 60px; }
.dt-meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0ea5e9, #22d3ee); box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
.dt-meter.warn > i { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }
.dt-meter.error > i { background: linear-gradient(90deg, #e11d48, #f43f5e); box-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }

/* 表 */
.dt-table { width: 100%; border-collapse: collapse; }
.dt-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--dt-muted); padding: 8px 10px; border-bottom: 1px solid var(--dt-line); white-space: nowrap; }
.dt-table td { padding: 11px 10px; border-bottom: 1px solid rgba(110, 170, 255, 0.08); vertical-align: middle; overflow-wrap: anywhere; }
/* 長い名前・ID（MCP のツール名・セッション ID・URL）は表の中で折り返し、数値の列は折り返さない
   （2026-11-13 小川さん「ここのテーブルおかしい ちゃんとチェックした？」。ツールの名前で表がカードの外に伸び、画面ごと横にずれていた） */
.dt-table td.dt-mono, .dt-table td .dt-mono { word-break: break-all; }
.dt-table td.num, .dt-table td.r { white-space: nowrap; overflow-wrap: normal; }
.dt-table tbody tr { transition: background 0.15s; }
.dt-table tbody tr:hover { background: rgba(34, 211, 238, 0.05); }
.dt-table tbody tr.pick { cursor: pointer; }
.dt-table tbody tr.pick:focus-visible { outline: 2px solid var(--dt-cyan); outline-offset: -2px; }
.dt-table td.r, .dt-table th.r { text-align: right; }
.dt-table .meter-cell { display: flex; align-items: center; gap: 10px; }
.dt-table-wrap { overflow-x: auto; }
/* 読み込み中（期間などを切り替えて、まだ読み終わっていない間）。中身を薄くし、押せないようにする */
.is-loading { opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }
.dt-loading { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dt-text-2); }
.dt-loading::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--dt-line-strong); border-top-color: var(--dt-cyan); animation: dt-spin 0.8s linear infinite; }
@keyframes dt-spin { to { transform: rotate(360deg); } }

/* リスト（アラート・判断待ち） */
.dt-list { list-style: none; margin: 0; padding: 0; }
.dt-list li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(110, 170, 255, 0.08); }
.dt-list li:last-child { border-bottom: 0; }
.dt-list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-list .when { color: var(--dt-muted); font-size: 12px; white-space: nowrap; }

/* エージェント行（部署ごとの折りたたみ） */
.dt-group { border: 1px solid var(--dt-line); border-radius: var(--dt-radius); background: rgba(12, 24, 46, 0.55); margin-bottom: 12px; overflow: hidden; }
.dt-group > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 15px; }
.dt-group > summary::-webkit-details-marker { display: none; }
.dt-group > summary .chev { transition: transform 0.2s; color: var(--dt-muted); }
.dt-group[open] > summary .chev { transform: rotate(90deg); }
.dt-group > summary .cat-ico { color: var(--category); filter: drop-shadow(0 0 5px var(--category)); }
.dt-agent { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 90px 56px; gap: 14px; align-items: center; padding: 10px 16px 10px 28px;
  border-top: 1px solid rgba(110, 170, 255, 0.07); cursor: pointer; transition: background 0.15s; }
.dt-agent:hover, .dt-agent[aria-selected="true"] { background: rgba(34, 211, 238, 0.07); }
.dt-agent[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--dt-cyan); }
.dt-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--category, #69c8f2) 55%, #0b1526), #0b1526 75%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--category, #69c8f2) 70%, transparent), 0 0 14px color-mix(in srgb, var(--category, #69c8f2) 35%, transparent); }
.dt-avatar.lg { width: 64px; height: 64px; }
/* ログインしたユーザーのアバター（写真か頭文字）。上のバーではボタンいっぱいの丸にする */
.dt-avatar-me { flex: none; overflow: hidden; }
.dt-avatar-me img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.dt-avatar-initial { font-weight: 700; line-height: 1; }
.dt-icon-btn.dt-user-btn { border-radius: 50%; padding: 0; }
.dt-agent .name { font-weight: 600; }
.dt-agent .desc { color: var(--dt-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-agent .metric { text-align: right; font-weight: 600; }
/* 一覧の幅（画面の幅ではない）で詰める。PC の出し方でもメニューの列を開くと一覧が細くなる（iPhone Duo を開いた幅など） */
.dt-group { container-type: inline-size; }
@container (max-width: 480px) {
  .dt-agent { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding-left: 16px; }
  .dt-agent .spark, .dt-agent .metric { display: none; }
}

/* 工程（パイプライン） */
.dt-steps { display: flex; align-items: center; gap: 0; }
.dt-steps .step { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--dt-text-2); flex: none; }
.dt-steps .step i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dt-faint); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.dt-steps .step.done i { border-color: var(--st-ok); background: var(--st-ok); color: #052e1c; box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); }
.dt-steps .step.now i { border-color: var(--dt-violet); box-shadow: 0 0 12px rgba(168, 85, 247, 0.8); background: radial-gradient(circle, #e9d5ff 0 30%, transparent 35%); }
.dt-steps .bar { flex: 1; height: 2px; background: var(--dt-faint); margin: 0 6px 18px; min-width: 24px; }
.dt-steps .bar.done { background: var(--st-ok); box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); }

/* ================= ガラス ================= */
/* 後ろを見せないポップアップ：磨りガラス */
.dt-frost {
  position: relative; isolation: isolate;
  border-radius: var(--dt-radius-lg); border: 1px solid rgba(180, 220, 255, 0.22);
  background: linear-gradient(160deg, rgba(64, 98, 150, 0.4), rgba(18, 30, 56, 0.58) 45%, rgba(30, 24, 70, 0.54));
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(0.85);
  backdrop-filter: blur(28px) saturate(160%) brightness(0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 30px 80px rgba(0, 0, 0, 0.55);
}
.dt-frost::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--dt-grain); opacity: 0.09; mix-blend-mode: overlay; pointer-events: none; z-index: -1; }
.dt-frost::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: var(--dt-edge-light); }

.dt-scrim { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  /* 暗幕にはぼかしを掛けない。backdrop-filter を持つ要素は中の要素の「背景の根」になり、中の .dt-frost が後ろのページをぼかせなくなる */
  background: radial-gradient(circle at 50% 40%, rgba(10, 20, 40, 0.2), rgba(2, 6, 14, 0.55)); }
.dt-modal { width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px; }
.dt-modal h2 { margin: 0 0 4px; font-size: 19px; }
.dt-modal .sub { color: var(--dt-text-2); margin-bottom: 16px; }
.dt-modal .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
/* 一覧で選んだ物の詳細のポップアップ。右上の × で閉じる */
.dt-modal.wide { width: min(920px, 100%); position: relative; }
.dt-modal.wide h2 { padding-right: 40px; }
.dt-modal-x { position: sticky; top: 0; float: right; margin: -6px -8px 0 8px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--dt-line-strong); background: rgba(8, 18, 36, 0.8); color: var(--dt-text-2); }
.dt-modal .field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.dt-modal .field label { font-size: 12px; color: var(--dt-text-2); }
.dt-modal .field .dt-input, .dt-modal .field .dt-select { width: 100%; }
.dt-modal textarea { width: 100%; min-height: 80px; background: rgba(4, 10, 22, 0.5); border: 1px solid var(--dt-line-strong); border-radius: 10px; padding: 10px; resize: vertical; }
.dt-menu { position: fixed; z-index: 110; min-width: 200px; padding: 6px; border-radius: 14px; }
.dt-menu button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 12px; border: 0; background: none; border-radius: 8px; text-align: left; }
.dt-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.dt-toast { position: fixed; right: 20px; bottom: 20px; z-index: 120; padding: 12px 16px; border-radius: 14px; display: flex; gap: 10px; align-items: center; animation: dt-rise 0.24s var(--dt-ease); }
@keyframes dt-rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* 後ろを見ながら使う詳細パネル：透明に近いガラス */
.dt-inspector {
  border-radius: var(--dt-radius); border: 1px solid rgba(120, 190, 255, 0.28);
  background: linear-gradient(180deg, rgba(10, 22, 44, 0.5), rgba(6, 12, 26, 0.42));
  -webkit-backdrop-filter: blur(5px) saturate(120%); backdrop-filter: blur(5px) saturate(120%);
  box-shadow: inset 0 0 22px rgba(34, 211, 238, 0.06), 0 12px 36px rgba(0, 0, 0, 0.35);
}

/* ツールチップ（グラフ・3D） */
.dt-tip { position: fixed; z-index: 130; pointer-events: none; padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.5;
  background: rgba(6, 12, 26, 0.9); border: 1px solid var(--dt-line-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); white-space: nowrap; }
.dt-tip .sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* グラフ */
.dt-chart { width: 100%; display: block; overflow: visible; }
.dt-chart .grid line { stroke: rgba(130, 160, 210, 0.12); }
.dt-chart .axis text { fill: var(--dt-muted); font-size: 11px; }
.dt-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--dt-text-2); }
.dt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dt-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ================= レスポンシブ ================= */
@media (max-width: 1280px) {
  .dt-grid.kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-grid.two { grid-template-columns: 1fr; }
}
/* スマホの幅（mock/app.js の PHONE と同じ）。iPhone Duo を開いた幅（約 806px）は PC と同じ出し方にする */
@media (max-width: 759.98px) {
  .dt-app, .dt-app[data-side] { grid-template-columns: minmax(0, 1fr); }
  .dt-app .dt-side, .dt-app[data-side="closed"] .dt-side { display: flex; position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; height: auto;
    width: min(300px, 86vw); padding-top: calc(env(safe-area-inset-top, 0px) + 16px); padding-left: max(12px, env(safe-area-inset-left, 0px));
    background: rgba(6, 14, 30, 0.96); box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); transform: translateX(-105%); transition: transform 0.22s var(--dt-ease); }
  .dt-app[data-side="open"] .dt-side { transform: none; }
  .dt-side-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(1, 4, 12, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.22s var(--dt-ease); }
  .dt-app[data-side="open"] .dt-side-scrim { opacity: 1; pointer-events: auto; }
  .dt-grid.halves, .dt-grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dt-scrim { padding: 8px; }
  .dt-modal { padding: 18px 16px; }
  .dt-main { padding: 16px; }
  .dt-grid.kpi { grid-template-columns: 1fr; }
  .dt-topbar { padding: env(safe-area-inset-top, 0px) 12px 0; gap: 10px; }
  .dt-tabs button { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ヒートマップ（稼働の履歴：行＝セッション、列＝時間） */
.dt-heat { display: flex; flex-direction: column; gap: 3px; min-width: 640px; }
.dt-heat .row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 64px; gap: 10px; align-items: center; border-radius: 8px; padding: 2px 4px; cursor: pointer; }
.dt-heat .row:hover, .dt-heat .row.sel { background: rgba(34, 211, 238, 0.07); }
.dt-heat .row.sel { box-shadow: inset 3px 0 0 var(--dt-cyan); }
.dt-heat .row.axis { cursor: default; background: none; box-shadow: none; }
.dt-heat .lab { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.dt-heat .lab small { color: var(--dt-muted); margin-left: 6px; }
.dt-heat .cells { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; }
.dt-heat .cells i { height: 18px; border-radius: 3px; }
.dt-heat .cells i:hover { outline: 1px solid #fff; }
.dt-heat .axis .cells span { font-size: 10px; color: var(--dt-muted); white-space: nowrap; overflow: visible; }
.dt-heat .sum { text-align: right; font-size: 12px; }
/* 凡例の線の見本（グラフの点線と同じ形）：均等なペース・記録の無い間 */
.dt-legend i.dt-legend-pace, .dt-legend i.dt-legend-gap { width: 18px; height: 0; border-radius: 0; background: none; border-top: 1.5px dashed var(--dt-muted); }
.dt-legend i.dt-legend-gap { border-top-style: dotted; border-top-color: var(--dt-text-2); }