/* ==========================================================
   推論フック管理画面 — ダークテーマ（黒×金×赤）

   背景は黒(#0a0a0a)、アクセントは金系(#d4af37)、警告/deny行は赤系(#ef4444)で統一している。
   コンプライアンスAPI管理画面は同じ構造で水色系(#7dd3fc)アクセントのため、
   取り違えないようにアクセントと背景色を変えている。
   色を変更する場合は、あちらと同系色にしないこと。
   ========================================================== */

/* ----------------------------------------------------------
   ベース
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font: 14px/1.6 -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
  /* コンプライアンスAPI管理画面は青みの背景。こちらは純黒の背景にする */
  background: #0a0a0a;
  color: #e6e6e6;
  margin: 0;
}

a { color: #d4af37; text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: #c9b56c;
}

small { font-size: 11px; }

/* ----------------------------------------------------------
   ヘッダー
   ---------------------------------------------------------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #121110;
  /* 最上部の金のラインで、コンプライアンスAPI管理画面と即座に見分ける */
  border-top: 3px solid #d4af37;
  border-bottom: 1px solid #2e2a20;
  padding: .6rem 1.5rem;
  height: 51px;
}

.header__logo { margin: 0; }
.header__logo .header__link { color: #d4af37; }
.header__link { color: #e6e6e6; font-weight: 600; font-size: .95rem; }
.header__link:hover { color: #d4af37; text-decoration: none; }

.horizontal { display: flex; align-items: center; gap: 1rem; }
.header__user { display: flex; align-items: center; gap: .75rem; }
.header__organization {
  margin: 0;
  color: #a39c8c;
  font-size: 12px;
  white-space: nowrap;
}
.header__user_name a { color: #a39c8c; font-size: 13px; }
.header__logout_link { color: #a39c8c; font-size: 13px; }
.header__logout_link:hover { color: #d4af37; }

/* ----------------------------------------------------------
   メニュー（横ナビ）
   ---------------------------------------------------------- */
.menu {
  background: #121110;
  border-bottom: 1px solid #2e2a20;
  padding: 0 1.5rem;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.menu__item { position: relative; }

.menu__t1 {
  display: block;
  padding: .55rem 1rem;
  color: #a39c8c;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.menu__t1_link { color: #a39c8c; }
.menu__t1_link:hover { color: #d4af37; text-decoration: none; }
.menu__t1_txt { pointer-events: none; }

/* ----------------------------------------------------------
   ページレイアウト
   ---------------------------------------------------------- */
.page-main {
  display: flex;
  /* 100vh - ヘッダー(51px。うち3pxは上端の金のライン) - フッター(38px) */
  min-height: calc(100vh - 51px - 38px);
}

/* サイドメニューなし構成（.has_side_menu は今後のため定義だけ） */
.page-contents {
  flex: 1;
  padding: 1.5rem 2rem 3rem;
  min-width: 0;
}

/* ----------------------------------------------------------
   トピックパス（ページタイトル）
   ---------------------------------------------------------- */
.topicpath { margin-bottom: 1.25rem; }
.topicpath__h1 {
  font-size: 1rem;
  font-weight: 600;
  color: #a39c8c;
  margin: 0;
  letter-spacing: .03em;
}

/* ----------------------------------------------------------
   KPI カード（ダッシュボード）
   ---------------------------------------------------------- */
.otel-kpi-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.otel-kpi-card {
  background: #171412;
  border: 1px solid #2e2a20;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  min-width: 140px;
}

.otel-kpi-label {
  font-size: 11px;
  color: #a39c8c;
  margin: 0 0 .3rem;
}

.otel-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #d4af37;
  line-height: 1;
  margin: 0;
}

/* ----------------------------------------------------------
   セクション見出し
   ---------------------------------------------------------- */
.otel-section-title {
  font-size: .8rem;
  font-weight: 600;
  color: #a39c8c;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #1f1c16;
  padding-bottom: .4rem;
  margin: 0 0 .6rem;
}

/* ----------------------------------------------------------
   テーブル共通（.listtable / .rowtable）
   ---------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin-top: .5rem; }

.listtable th,
.listtable td {
  text-align: left;
  padding: .35rem .6rem;
  border-bottom: 1px solid #1f1c16;
  font-size: 12px;
  vertical-align: top;
}

.listtable th { color: #a39c8c; font-weight: 500; white-space: nowrap; }
.listtable tr:last-child td { border-bottom: none; }
.listtable tr:hover td { background: #1f1c16; }

.rowtable th,
.rowtable td {
  padding: .55rem .75rem;
  border-bottom: 1px solid #1f1c16;
  font-size: 13px;
  vertical-align: middle;
}

.rowtable th {
  color: #a39c8c;
  font-weight: 500;
  width: 130px;
  white-space: nowrap;
  background: #121110;
}

/* ----------------------------------------------------------
   フォーム入力
   ---------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  background: #171412;
  border: 1px solid #2e2a20;
  border-radius: 4px;
  color: #e6e6e6;
  padding: .4rem .65rem;
  font-size: 13px;
  width: 100%;
  max-width: 320px;
  outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #d4af37;
}

/* ----------------------------------------------------------
   ボタン
   ---------------------------------------------------------- */
.button {
  display: inline-block;
  padding: .45rem 1.4rem;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}

.button.is_dark,
.button.is_primary {
  background: #d4af37;
  color: #1a1400;
  font-weight: 600;
}

.button.is_dark:hover,
.button.is_primary:hover { background: #e8c464; }

.button.is_secondary {
  background: #171412;
  color: #a39c8c;
  border: 1px solid #2e2a20;
}

.button.is_secondary:hover { border-color: #d4af37; color: #d4af37; }

/* ----------------------------------------------------------
   通知 / アラート
   ---------------------------------------------------------- */
.notice {
  background: #241f0a;
  border-left: 3px solid #d4af37;
  color: #e6d9a8;
  padding: .65rem 1rem;
  margin-bottom: 1rem;
  font-size: 13px;
}

.alert {
  background: #2a0f12;
  border-left: 3px solid #ef4444;
  color: #f2a8b3;
  padding: .65rem 1rem;
  margin-bottom: 1rem;
  font-size: 13px;
}

.notice p, .alert p { margin: 0; }

/* ----------------------------------------------------------
   ログインページ専用
   ---------------------------------------------------------- */
body.login_page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

body.login_page .page-main {
  display: block;
  width: 100%;
  max-width: 400px;
}

/* ログイン画面はメニューが出ないため取り違えやすい。
   カード上端の金のラインで、どちらの管理画面か分かるようにする */
body.login_page .page-contents {
  background: #171412;
  border: 1px solid #2e2a20;
  border-top: 3px solid #d4af37;
  border-radius: 8px;
  padding: 2rem;
}

body.login_page .topicpath__h1 {
  font-size: 1.1rem;
  color: #e6e6e6;
  text-align: center;
  margin-bottom: 1.5rem;
  text-transform: none;
}

body.login_page .rowtable { margin-bottom: 1.25rem; }

body.login_page .login_button {
  width: 100%;
  padding: .6rem;
  font-size: .95rem;
}

/* ----------------------------------------------------------
   ユーティリティ
   ---------------------------------------------------------- */
.centering { text-align: center; }
.ta_right   { text-align: right; }
.listtable th.ta_right,
.listtable td.ta_right { text-align: right; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }

/* ----------------------------------------------------------
   フッター
   ---------------------------------------------------------- */
.footer {
  background: #121110;
  border-top: 1px solid #2e2a20;
  color: #a39c8c;
  font-size: 11px;
  padding: .5rem 1.5rem;
  text-align: right;
}

/* ----------------------------------------------------------
   ローディングオーバーレイ（非表示固定）
   ---------------------------------------------------------- */
.loading_overlay { display: none !important; }

/* ----------------------------------------------------------
   ページャー
   ---------------------------------------------------------- */
.pagination { margin-top: .75rem; }

.pagination__body {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}

.pagination__item a,
.pagination__item span {
  display: inline-block;
  padding: .2rem .55rem;
  border: 1px solid #2e2a20;
  border-radius: 3px;
  font-size: 12px;
  color: #a39c8c;
  text-decoration: none;
}

.pagination__item a:hover { border-color: #d4af37; color: #d4af37; }
.pagination__item.is_current_page span {
  background: #d4af37;
  color: #1a1400;
  border-color: #d4af37;
  font-weight: 600;
}
.pagination__ellipsis { font-size: 12px; color: #a39c8c; align-self: center; }

/* ----------------------------------------------------------
   期間フィルタ
   ---------------------------------------------------------- */
.range-filter {
  font-size: 12px;
  color: #a39c8c;
  margin-bottom: 1rem;
}
.range-filter a { color: #d4af37; }
.range-filter strong { color: #e6e6e6; }

/* ----------------------------------------------------------
   検索フォーム
   ---------------------------------------------------------- */
.search-form {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.search-form input[type="text"] { max-width: 240px; }
.search-form select { max-width: 200px; }
.search-clear { font-size: 12px; color: #a39c8c; }
.search-clear:hover { color: #ef4444; }

.date_range {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.date_range .date_picker { max-width: 120px; }
.date_range__sep { color: #a39c8c; font-size: 12px; }

.date_preset {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 12px;
}
.date_preset a { color: #a39c8c; }
.date_preset a:hover { color: #d4af37; }
.date_preset a.is_active { color: #d4af37; font-weight: 600; }

/* ----------------------------------------------------------
   Select2 ダークテーマ上書き
   （select2.min.css は common.php の head で style.css より前に
     読み込まれるため、ここでの上書きが確実に勝つ）
   ---------------------------------------------------------- */
.select2-container--default .select2-selection--multiple {
  background: #171412;
  border: 1px solid #2e2a20;
  border-radius: 3px;
  min-height: 32px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #d4af37;
  outline: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #2a2413;
  border: 1px solid #c9a23a;
  color: #d4af37;
  border-radius: 2px;
  font-size: 12px;
  padding: 1px 6px;
  margin: 3px 4px 0 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #c9a23a;
  margin-right: 4px;
  border: none;
  background: transparent;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ef4444;
  background: transparent;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
  color: #e6e6e6;
}
.select2-container--default .select2-selection__placeholder {
  color: #7a7565;
}
.select2-container--default .select2-selection__clear {
  color: #7a7565;
}
.select2-dropdown {
  background: #171412;
  border: 1px solid #2e2a20;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.select2-search--dropdown .select2-search__field {
  background: #0a0a0a;
  border: 1px solid #2e2a20;
  color: #e6e6e6;
  border-radius: 2px;
  padding: 4px 6px;
}
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: #d4af37;
}
.select2-results__option {
  font-size: 12px;
  color: #a39c8c;
  padding: 5px 8px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #2a2413;
  color: #d4af37;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: #332a12;
  color: #d4af37;
}

/* ----------------------------------------------------------
   エラー表示
   ---------------------------------------------------------- */
.text-err { color: #ef4444; }
.otel-kpi-value--err { color: #ef4444; }

/* ----------------------------------------------------------
   検索キーワードハイライト
   ---------------------------------------------------------- */
/* アクセントの金と紛れないよう、検索ヒットは明るい黄色にする */
mark { background: #f0d97a; color: #1a1400; padding: 0 2px; border-radius: 2px; }

/* ----------------------------------------------------------
   プロンプトテキスト（user_prompt イベント）
   ---------------------------------------------------------- */
.prompt-text {
  font-style: italic;
  color: #b0a894;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ----------------------------------------------------------
   セクションヘッダ付属要素
   ---------------------------------------------------------- */
.otel-section-subtitle {
  font-size: 11px;
  color: #a39c8c;
  margin: 0 0 .4rem;
}

.otel-section-link {
  font-size: 11px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  margin-left: .75rem;
  color: #d4af37;
}

/* ----------------------------------------------------------
   テーブルフッター
   ---------------------------------------------------------- */
.listtable tfoot th,
.listtable tfoot td {
  border-top: 2px solid #2e2a20;
  border-bottom: none;
  color: #e6e6e6;
  font-weight: 600;
  font-size: 12px;
  padding: .35rem .6rem;
}

/* ----------------------------------------------------------
   異常ハイライト（deny判定を含む行）

   テーマのアクセントが金系のため、deny行は赤系で区別する。
   金系に寄せると、通常の強調と見分けが付かなくなる。
   ---------------------------------------------------------- */
.listtable tr.is-anomaly td { background: #2a0f12; }
.listtable tr.is-anomaly td:first-child { border-left: 3px solid #ef4444; }
.listtable tr.is-anomaly:hover td { background: #351216; }
.otel-anomaly-note { font-size: 11px; color: #a39c8c; margin: 0 0 .5rem; }

/* ----------------------------------------------------------
   トレンドグラフ（Chart.js キャンバス）
   ---------------------------------------------------------- */
.otel-chart-wrap {
  height: 260px;
  margin: .5rem 0 1.5rem;
  background: #171412;
  border: 1px solid #2e2a20;
  border-radius: 6px;
  padding: .75rem 1rem .5rem;
}

/* ----------------------------------------------------------
   チャット詳細（chat_detail.php）
   ---------------------------------------------------------- */
.chat-message {
  margin: 0 0 1rem;
  border: 1px solid #2e2a20;
  border-radius: 6px;
  overflow: hidden;
}
.chat-message--user    { border-left: 3px solid #d4af37; }
.chat-message--assistant { border-left: 3px solid #8a8a8a; }

.chat-message__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .75rem;
  background: #171412;
  font-size: 12px;
  color: #a39c8c;
}
.chat-message__role { font-weight: 600; color: #e6e6e6; }
.chat-message__time { margin-left: auto; }

.chat-message__body  { padding: .6rem .75rem; }
.chat-message__text  {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: #e6e6e6;
}

.chat-message__files {
  padding: .4rem .75rem .5rem;
  border-top: 1px solid #2e2a20;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.chat-file-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: 11px;
  background: #171412;
  border: 1px solid #2e2a20;
  border-radius: 4px;
  padding: .15rem .5rem;
}
.chat-file-mime { color: #a39c8c; }

/* 削除済みチャット行 */
.listtable tr.is-deleted td { color: #7a7565; }
.listtable tr.is-deleted td:first-child { border-left: 3px solid #7a7565; }