/* ==========================================================
   otel-collector.com — ダークテーマ
   ========================================================== */

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

body {
  font: 14px/1.6 -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
  background: #0f1115;
  color: #e6e6e6;
  margin: 0;
}

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

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

small { font-size: 11px; }

/* ----------------------------------------------------------
   ヘッダー
   ---------------------------------------------------------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1d24;
  border-bottom: 1px solid #2a2e37;
  padding: .6rem 1.5rem;
  height: 48px;
}

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

.horizontal { display: flex; align-items: center; gap: 1rem; }
.header__user { display: flex; align-items: center; gap: .75rem; }
.header__user_name a { color: #9aa4b2; font-size: 13px; }
.header__logout_link { color: #9aa4b2; font-size: 13px; }
.header__logout_link:hover { color: #7dd3fc; }

/* ----------------------------------------------------------
   メニュー（横ナビ）
   ---------------------------------------------------------- */
.menu {
  background: #13161c;
  border-bottom: 1px solid #2a2e37;
  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: #9aa4b2;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.menu__t1_link { color: #9aa4b2; }
.menu__t1_link:hover { color: #7dd3fc; text-decoration: none; }
.menu__t1_txt { pointer-events: none; }

/* ----------------------------------------------------------
   ページレイアウト
   ---------------------------------------------------------- */
.page-main {
  display: flex;
  min-height: calc(100vh - 48px - 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: #9aa4b2;
  margin: 0;
  letter-spacing: .03em;
}

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

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

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

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

/* ----------------------------------------------------------
   セクション見出し
   ---------------------------------------------------------- */
.otel-section-title {
  font-size: .8rem;
  font-weight: 600;
  color: #9aa4b2;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #23262e;
  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 #23262e;
  font-size: 12px;
  vertical-align: top;
}

.listtable th { color: #9aa4b2; font-weight: 500; white-space: nowrap; }
.listtable tr:last-child td { border-bottom: none; }
.listtable tr:hover td { background: #181b22; }

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

.rowtable th {
  color: #9aa4b2;
  font-weight: 500;
  width: 130px;
  white-space: nowrap;
  background: #13161c;
}

/* ----------------------------------------------------------
   フォーム入力
   ---------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  background: #1a1d24;
  border: 1px solid #2a2e37;
  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: #7dd3fc;
}

/* ----------------------------------------------------------
   ボタン
   ---------------------------------------------------------- */
.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: #7dd3fc;
  color: #0f1115;
  font-weight: 600;
}

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

.button.is_secondary {
  background: #1a1d24;
  color: #9aa4b2;
  border: 1px solid #2a2e37;
}

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

/* ----------------------------------------------------------
   通知 / アラート
   ---------------------------------------------------------- */
.notice {
  background: #0e2233;
  border-left: 3px solid #7dd3fc;
  color: #b0d9f5;
  padding: .65rem 1rem;
  margin-bottom: 1rem;
  font-size: 13px;
}

.alert {
  background: #2a1010;
  border-left: 3px solid #f87171;
  color: #fca5a5;
  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: #1a1d24;
  border: 1px solid #2a2e37;
  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: #13161c;
  border-top: 1px solid #2a2e37;
  color: #9aa4b2;
  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 #2a2e37;
  border-radius: 3px;
  font-size: 12px;
  color: #9aa4b2;
  text-decoration: none;
}

.pagination__item a:hover { border-color: #7dd3fc; color: #7dd3fc; }
.pagination__item.is_current_page span {
  background: #7dd3fc;
  color: #0f1115;
  border-color: #7dd3fc;
  font-weight: 600;
}
.pagination__ellipsis { font-size: 12px; color: #9aa4b2; align-self: center; }

/* ----------------------------------------------------------
   期間フィルタ
   ---------------------------------------------------------- */
.range-filter {
  font-size: 12px;
  color: #9aa4b2;
  margin-bottom: 1rem;
}
.range-filter a { color: #7dd3fc; }
.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: #9aa4b2; }
.search-clear:hover { color: #f87171; }

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

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

/* ----------------------------------------------------------
   Select2 ダークテーマ上書き
   （select2.min.css は common.php の head で style.css より前に
     読み込まれるため、ここでの上書きが確実に勝つ）
   ---------------------------------------------------------- */
.select2-container--default .select2-selection--multiple {
  background: #1a1d24;
  border: 1px solid #2a2e37;
  border-radius: 3px;
  min-height: 32px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #7dd3fc;
  outline: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #162030;
  border: 1px solid #4a90d9;
  color: #7dd3fc;
  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: #4a90d9;
  margin-right: 4px;
  border: none;
  background: transparent;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #f87171;
  background: transparent;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
  color: #c9d1db;
}
.select2-container--default .select2-selection__placeholder {
  color: #6b7280;
}
.select2-container--default .select2-selection__clear {
  color: #6b7280;
}
.select2-dropdown {
  background: #1a1d24;
  border: 1px solid #2a2e37;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.select2-search--dropdown .select2-search__field {
  background: #0f1117;
  border: 1px solid #2a2e37;
  color: #c9d1db;
  border-radius: 2px;
  padding: 4px 6px;
}
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: #7dd3fc;
}
.select2-results__option {
  font-size: 12px;
  color: #9aa4b2;
  padding: 5px 8px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #162030;
  color: #7dd3fc;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: #1e2a3a;
  color: #7dd3fc;
}

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

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

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

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

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

/* ----------------------------------------------------------
   異常ハイライト（ユーザー一覧）
   ---------------------------------------------------------- */
.listtable tr.is-anomaly td { background: #2a210f; }
.listtable tr.is-anomaly td:first-child { border-left: 3px solid #f0a830; }
.listtable tr.is-anomaly:hover td { background: #322710; }
.otel-anomaly-note { font-size: 11px; color: #9aa4b2; margin: 0 0 .5rem; }

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

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

.chat-message__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .75rem;
  background: #1a1d24;
  font-size: 12px;
  color: #9aa4b2;
}
.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: #d0d7de;
}

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

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