/*  イメージカラー　#2E5C9E                      */
:root {
  --bg:#DCE8F9; --card:#111827; --muted:#94a3b8; --text:#e5e7eb;
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --btn:#2563eb;
}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
header{
  padding:16px 20px;
  border-bottom:1px solid #1f2937;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  align-items: center;
}
h1{margin:0;font-size:18px}
main{
  padding:16px;
  max-width:960px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.card{
  background:var(--card);
  border:1px solid #1f2937;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.card header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #1f2937;
}
.card h2{margin:0;font-size:15px}
.row{padding:12px 14px;border-top:1px solid #1f2937}
.muted{color:var(--muted)}
.kvs{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:6px 10px;
}
pre{
  margin:0;
  padding:10px;
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:8px;
  max-height:260px;
  overflow:auto;
  font-size:12px;
}
button{
  appearance:none;
  background:var(--btn);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font:inherit;
  font-size:13px;
}
button.ghost{
  background:transparent;
  border:1px solid #2b3a64;
}
button + button{margin-left:8px}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  vertical-align:middle;
}
.ok{
  background:rgba(16,185,129,.15);
  color:var(--ok);
  border:1px solid rgba(16,185,129,.4);
}
.warn{
  background:rgba(245,158,11,.15);
  color:var(--warn);
  border:1px solid rgba(245,158,11,.4);
}
.err{
  background:rgba(239,68,68,.15);
  color:var(--err);
  border:1px solid rgba(239,68,68,.4);
}
small{color:var(--muted)}

/* テーブル周り */
/* テーブル周り */
table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  table-layout:fixed;        /* 幅指定を優先させる */
  width: auto;                  /* ← 重要！（100%を撤廃） */
}
th,td{
  padding: 4px 6px;
  border-bottom: 1px solid #1f2937;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;          /* 改行しない        */
  overflow: hidden;             /* 枠からはみ出さない */
  text-overflow: ellipsis;      /* 末尾を … にする   */
  box-sizing: border-box;       /* 幅計算を安定させる（お好み） */
}
th{
  position:sticky;
  top:0;
  background:#020617;
  z-index:1;
}




/* FPL プレビューマップ */
.thumb-map{
  width:160px;
  height:120px;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background:#020617;
}

/* 本番では飛行計画検索パネルを非表示にする */
#fpl-search-panel {
  display: none !important;
}
/* 本番では UTM / REQ / FPL のユーザ情報パネルを非表示 */
#utm .row:nth-of-type(1),
#req .row:nth-of-type(1),
#fpl .row:nth-of-type(1) {
  display: none !important;
}

/*　こっち効いていない本番ではシンプル通報パネルを非表示にする */
#fpl-search-panel + div {
  display: none !important;
}
/* 本番ではシンプル通報パネルを非表示 */
#simple-report-panel {
  display: none !important;
}




/* ===========================
   本番系：データ表示部分を白地×黒文字に変更
   =========================== */

/* カード本体（背景1段明るく） */
.card {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #d0d0d0 !important;
}

/* ヘッダー部分 */
.card header {
  background: #f7f7f7 !important;
  color: #000000 !important;
  border-bottom: 1px solid #d0d0d0 !important;
}

/* テキスト全般 */
.card h2,
.card small,
.card .muted,
.card div,
.card td,
.card th {
  color: #000000 !important;
}

/* テーブルの背景と罫線 */
table {
  background: #ffffff !important;
  color: #000000 !important;
}
th {
  background: #eeeeee !important;
  color: #000000 !important;
  border-bottom: 1px solid #c0c0c0 !important;
}
td {
  border-bottom: 1px solid #e0e0e0 !important;
}

/* プレビュー地図の外枠 */
.thumb-map {
  background: #ffffff !important;
}

/* バッジ類も暗色→明色へ */
.badge {
  color: #000000 !important;
  border: 1px solid #999 !important;
  background: #e8e8e8 !important;
}

/* OK / WARN / ERR も白地に合うようマイルドに */
.ok {
  background: #dff6e5 !important;
  color: #0a8a50 !important;
}
.warn {
  background: #fff5d1 !important;
  color: #a67500 !important;
}
.err {
  background: #ffe2e2 !important;
  color: #b30000 !important;
}
/* ============================
   本番系：生JSON (<pre>) も白地×黒文字に統一
   ============================ */

pre {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #d0d0d0 !important;
}
/* ============================
   本番系：飛行計画テーブルの高さを3倍に importantが強い
   ============================ */
#fplTable > div {
  max-height: 720px !important;  /* 240px × 3 */
}
/* タイトル行の配置（変更なし） */
.title-line {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
  margin: 0 0 0.4rem 0;
}

/* 「開発者にメールする」の文字だけオレンジにする */
.mail-inline {
  color: #FF9933 !important;   /* ← 補色オレンジ */
  text-decoration: underline;
  font-size: 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
}

/* ホバー時：少し明るいオレンジ */
.mail-inline:hover {
  color: #FFA64D !important;
  text-decoration: none;
}

/* タイトル全体を縦3行に */
.title-lines {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

/* 1行目：メインタイトル */
.title-lines .line-main {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2E5C9E;               /* 既存のタイトル色に合わせる */
}

/* 2行目：開発　水原 */
.mail-inline {
  color: #2E5C9E;            /* ブランドカラー */
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  width: fit-content;
}

.mail-inline:hover {
  color: #FFA64D;
  text-decoration: none;
}

/* 3行目：サブタイトル */
.title-lines .line-sub {
  font-size: 1.2rem;
  color: #2E5C9E;            /* ブランドカラー*/
  font-weight: 700;
}
/* 本番では「取得」ボタンを非表示 */
#utm header .ghost,
#req header .ghost,
#fpl header .ghost {
  display: none !important;
}


.oneebi-logo img{
  height: 44px;       /* ←ここで大きさ調整 */
  width: auto;
  display: block;
}

/* ヘッダー全体のレイアウト調整 */
header {
  position: relative; /* 子要素の絶対配置の基準にします */
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* ロゴを右上に配置するスタイル */
.oneebi-logo {
  position: absolute; /* ヘッダー内の絶対位置に固定 */
  top: 10px;          /* 上からの距離 */
  right: 15px;        /* 右からの距離 */
  z-index: 100;       /* 他の要素より手前に表示 */
}

.oneebi-logo img {
  width: 160px;        /* ロゴの横幅（小さく調整） */
  height: auto;       /* 比率を維持 */
  display: block;
  opacity: 0.9;       /* 少し透過させると馴染みます */
  transition: opacity 0.2s;
  border-radius: 4px; /* 必要に応じて角を丸く */
}

.oneebi-logo img:hover {
  opacity: 1;         /* ホバー時に明るく */
}

/* モバイル対応：画面が狭い時にタイトルと重ならないよう調整 */
@media (max-width: 600px) {
  .oneebi-logo img {
    width: 100px;      /* スマホではさらに小さく */
  }
  .line-main {
    padding-right: 70px; /* タイトルがロゴに被らないように余白を作る */
  }
}

/* 有効期限が近い行のハイライト（お好みで調整） */
tr.expiry-soon td {
  background: rgba(245, 158, 11, 0.18); /* 警告っぽい */
}

tr.expiry-urgent td {
  background: rgba(239, 68, 68, 0.18);  /* 危険っぽい */
}

/* 文字色も少し強くしたい場合 */
tr.expiry-soon td,
tr.expiry-urgent td {
  color: #fff;
}
.site-footer {
  margin-top: 16px;
  font-size: 11px;
  text-align: right;
}

.footer-link {
  color: #2E5C9E;          /* ブランドブルー */
  margin-left: 12px;
  font-weight: 600;
  text-decoration: underline;
}

.footer-link:hover {
  color: #244A80;          /* 少し濃いブルー */
  text-decoration: none;
}