/* =========================================================================
   基本レイアウト・地図・ポップアップ設定
========================================================================= */
#map {
    min-height: 480px;
}

.maplibregl-popup {
    max-width: 360px !important;
}

.maplibregl-popup-content {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    width: 320px;
    box-sizing: border-box;
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.maplibregl-popup-tip {
    border-top-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* =========================================================================
   脱AI・シンクタンク＆データジャーナリズム調 テーマ定義
========================================================================= */

/* モダン（標準テーマ）の配色定義 */
:root[data-theme="modern"], :root {
    --bg-base: #f4f5f7;          /* ページ全体の背景色（画面外側の地の色） */
    --bg-surface: #ffffff;       /* カード・テーブル・パネルの背景色 */
    --bg-surface-alt: #eaedf2;   /* テーブルの見出し行や、薄い背景ブロックの色 */
    
    --text-primary: #0f172a;     /* 本文・事業者名・数値などの主要文字色 */
    --text-secondary: #475569;   /* 運輸局名や補足説明などのサブ文字色 */
    --text-muted: #64748b;       /* 単位表示や薄い注記文字色 */
    
    --border-color: #cbd5e1;     /* パネルやテーブルの枠線・仕切り線の色 */
    --border-color-light: #e2e8f0;/* テーブル内部などの薄い仕切り線の色 */
    
    --accent-primary: #1e3a8a;   /* ボタンや選択中タブなどのアクセント色 */
    --accent-bg: #dbeafe;        /* タグや選択中の淡い背景色 */
    
    --header-bg: #0b1329;        /* 画面最上部ヘッダーの背景色 */
    --header-text: #f8fafc;      /* ヘッダーの文字色 */
}


/* 2. ダーク (サイバー感を抑えた深夜の管制室・プロターミナル風) */
:root[data-theme="dark"] {
    --bg-base: #0b0f19;          /* 真っ黒ではなく重厚なオニキスブラック */
    --bg-surface: #111827;       /* ダークパネル */
    --bg-surface-alt: #1f2937;   /* テーブル見出し・境界 */
    --text-primary: #f1f5f9;     /* 眩しさを抑えたオフホワイト */
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #374151;     /* 締まったダーク境界線 */
    --border-color-light: #1f2937;
    --accent-primary: #38bdf8;   /* 計器類のような落ち着いたシアンブルー */
    --accent-bg: #0369a1;
    --header-bg: #030712;
    --header-text: #f8fafc;
}

/* 3. シック (白書・歴史的アーカイブ・学術ペーパー風) */
:root[data-theme="chic"] {
    --bg-base: #edebe8;          /* 経年紙のような温かみのあるアイボリーグレー */
    --bg-surface: #faf9f6;       /* 柔らかいオフホワイト */
    --bg-surface-alt: #e3dfdb;   /* クラシックな区切り色 */
    --text-primary: #262320;     /* 暖かみのある墨色 */
    --text-secondary: #59534c;
    --text-muted: #80776e;
    --border-color: #cdc6bd;     /* 羊皮紙調の境界線 */
    --border-color-light: #ded8d0;
    --accent-primary: #831843;   /* 格式高いボルドー・ワインレッド */
    --accent-bg: #fce7f3;
    --header-bg: #2b2623;        /* 濃いチャコールブラウン */
    --header-text: #faf9f6;
}

/* 4. サイエンス (学術・研究所・テクニカルアナリティクス風) */
:root[data-theme="science"] {
    --bg-base: #f0f4f8;          /* クールなライトアイスブルー */
    --bg-surface: #ffffff;       /* クリアホワイト */
    --bg-surface-alt: #e1e8f0;   /* スチールグレー */
    --text-primary: #0a192f;     /* 厳格なディープネイビー */
    --text-secondary: #334e68;   /* ブルーグレー */
    --text-muted: #627d98;
    --border-color: #bcccdc;     /* 青みのあるクリアな境界線 */
    --border-color-light: #e1e8f0;
    --accent-primary: #0284c7;   /* テクニカルシアンブルー */
    --accent-bg: #e0f2fe;
    --header-bg: #071527;        /* 深海のような濃紺 */
    --header-text: #f0f9ff;
}

/* 5. ポップ (親しみやすい案内サイン・路線図トーン) */
:root[data-theme="pop"] {
    --bg-base: #fdfbf7;          /* 暖かみのあるウォームクリーム */
    --bg-surface: #ffffff;       /* ホワイト */
    --bg-surface-alt: #f4eee2;   /* サンドベージュ */
    --text-primary: #292524;     /* 柔らかなチャコール */
    --text-secondary: #57534e;   /* ウォームグレー */
    --text-muted: #857e77;
    --border-color: #ded6c8;     /* コントラストを抑えたベージュボーダー */
    --border-color-light: #f0eae1;
    --accent-primary: #ea580c;   /* 鮮やかなビタミンオレンジ */
    --accent-bg: #ffedd5;
    --header-bg: #1c1917;        /* ウォームブラック */
    --header-text: #fafaf9;
}

/* =========================================================================
   脱AIのためのフォント・角丸・タイポグラフィ調整
========================================================================= */

/* 数字の桁をピシッと揃える（等幅プロポーショナル） */
body {
    font-feature-settings: "palt" 1;
}

#stat-companies, #stat-km, #stat-revenue, #stat-staff,
#data-table td, #ranking-table-body td, .modal-tab-pane span,
#modal-tab-content-area div {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* AI特有の「丸っこい角（16px~24px）」をシャープに引き締める（4px〜6px） */
.rounded-2xl, .rounded-xl {
    border-radius: 6px !important;
}

.rounded-lg {
    border-radius: 4px !important;
}

/* カードのボテッとした影を抑え、繊細な境界線でかっちり見せる */
.shadow-sm, .shadow-md, .shadow-xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* =========================================================================
   テーマ連動ユーティリティクラス
========================================================================= */
.theme-bg-base { background-color: var(--bg-base); }
.theme-bg-surface { background-color: var(--bg-surface); }
.theme-bg-surface-alt { background-color: var(--bg-surface-alt); }
.theme-text-primary { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-muted { color: var(--text-muted); }
.theme-border { border-color: var(--border-color); }
.theme-border-light { border-color: var(--border-color-light); }
.theme-accent { color: var(--accent-primary); }
.theme-bg-accent { background-color: var(--accent-bg); }
.theme-header-bg { background-color: var(--header-bg); }
.theme-header-text { color: var(--header-text); }

/* ヘッダー下段のランキング・一覧ページへのリンク */
.top-nav-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface-alt);
    color: var(--accent-primary);
    text-decoration: none;
    white-space: nowrap;
}
.top-nav-link:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-surface);
}


/* =========================================================================
   レイアウト・余白・密度の微調整変数（ここを変更すると全体が連動します）
========================================================================= */
:root {
    /* --- 画面全体の幅と外枠余白 --- */
    --container-max-width: 96rem;   /* 画面の最大幅（広くするなら 96rem や 100%） */
    --container-padding-x: 0.5rem;    /* 画面端（左右）の余白 */

    /* --- パネル・カード間のすきま --- */
    --gap-section: 0.25rem;        /* 地図・カード・テーブル間の上下間隔 */
    --gap-panel: 0.25rem;          /* 4つのサマリーカード同士の隙間 */
    
    /* --- パネル内部の余白 --- */
    --pad-card: 0.875rem;          /* 地図や検索枠の枠内余白 */
    --pad-stat-card: 0.75rem 1rem; /* 4連カードの枠内余白（縦 横） */

    /* --- テーブルの行間・文字サイズ --- */
    --table-cell-padding-y: 4px;   /* 行の上下余白（狭くするなら 4px） */
    --table-font-size: 14.5px;     /* テーブル内の文字サイズ */
    --table-header-font-size: 12px;/* テーブル見出しの文字サイズ */

    /* --- 4連サマリー数値のサイズ --- */
    --stat-title-size: 11px;       /* 「登録事業者数」などのラベル文字サイズ */
    --stat-value-size: 26px;       /* 「224 社」などの大きな数値サイズ */
}

/* 画面全体のコンテナ幅をワイド化し、左右の巨大余白を縮小 */
.max-w-7xl {
    max-width: var(--container-max-width) !important;
    padding-left: var(--container-padding-x) !important;
    padding-right: var(--container-padding-x) !important;
}

/* メインコンテンツの上下余白を引き締め */
main.py-6 {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
}

/* セクション同士（地図、サマリー、コントロール等）の間隔（mb-6）を縮小 */
.mb-6 {
    margin-bottom: var(--gap-section) !important;
}

/* 4連サマリーカードの間隔（gap-4）と内部パディングをコンパクト化 */
.grid.gap-4 {
    gap: var(--gap-panel) !important;
}

/* 地図エリアの内側余白（p-4）をスリム化 */
#map-section {
    padding: var(--pad-card) !important;
}

/* サマリーカードの内側余白（p-5）を引き締め */
#stat-companies, #stat-km, #stat-revenue, #stat-staff {
    margin-top: 0.125rem !important;
}
.grid-cols-1.md\:grid-cols-4 > div {
    padding: var(--pad-stat-card) !important;
}

/* コントロールパネルの内側余白（p-4）をコンパクト化 */
.theme-bg-surface.p-4 {
    padding: var(--pad-card) !important;
}

/* 枠線の色味をより繊細（薄め）にして圧迫感を解消 */
.border, .theme-border {
    border-width: 1px !important;
}

/* =========================================================================
   上下余白・文字サイズ・密度コントロールパラメータ
========================================================================= */
:root {
    /* 1. テーブル行の調整パラメータ */
    --table-cell-padding-y: 4px;   /* 行の上下余白（元の約半分に凝縮） */
    --table-font-size: 14.5px;     /* テーブル文字サイズ（元の13〜14pxから拡大） */
    --table-header-font-size: 12px;/* テーブル見出しの文字サイズ */

    /* 2. サマリーカードの調整パラメータ */
    --stat-padding-y: 4px;         /* カードの上下余白（さらに薄型化） */
    --stat-title-size: 11px;       /* 「登録事業者数」等のラベル文字 */
    --stat-value-size: 26px;       /* 「252 社」等の主要数値（元の24pxから拡大） */

    /* 3. コントロールバー・検索欄の調整パラメータ */
    --control-padding-y: 4px;      /* 検索窓やボタンの上下厚み */
    --control-font-size: 13.5px;   /* 入力・ボタンの文字サイズ */
}

/* -------------------------------------------------------------
   テーブルの上下余白圧縮 & 文字サイズ拡大
------------------------------------------------------------- */
#data-table td, #ranking-table-body td {
    padding-top: var(--table-cell-padding-y) !important;
    padding-bottom: var(--table-cell-padding-y) !important;
    font-size: var(--table-font-size) !important;
    line-height: 1.35 !important;
}

#data-table th, #ranking-table-body th {
    padding-top: calc(var(--table-cell-padding-y) + 2px) !important;
    padding-bottom: calc(var(--table-cell-padding-y) + 2px) !important;
    font-size: var(--table-header-font-size) !important;
}

/* 操作ボタン（地図へ / カルテ）も行高に合わせてスリム化 */
#data-table .btn-map, #data-table .btn-detail,
#ranking-table-body .btn-map, #ranking-table-body .btn-detail {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 11.5px !important;
}

/* -------------------------------------------------------------
   4連サマリーカードの薄型化 & 数値強調
------------------------------------------------------------- */
.grid-cols-1.md\:grid-cols-4 > div {
    padding-top: var(--stat-padding-y) !important;
    padding-bottom: var(--stat-padding-y) !important;
}

/* 「登録事業者数」などの小見出し */
.grid-cols-1.md\:grid-cols-4 p.text-xs {
    font-size: var(--stat-title-size) !important;
    letter-spacing: 0.05em;
}

/* 「252 社」「27,694.4 km」などの大数字 */
#stat-companies, #stat-km, #stat-revenue, #stat-staff {
    font-size: var(--stat-value-size) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
}

/* -------------------------------------------------------------
   検索欄・プルダウン・ボタンの上下余白引き締め
------------------------------------------------------------- */
#search-input, #bureau-filter, #cat-filter, #screening-filter {
    padding-top: var(--control-padding-y) !important;
    padding-bottom: var(--control-padding-y) !important;
    font-size: var(--control-font-size) !important;
}

/* タブボタン（会社マスター / 線区詳細 / 散布図...）の引き締め */
#tab-company, #tab-line, #tab-matrix, #tab-ranking {
    padding-top: var(--control-padding-y) !important;
    padding-bottom: var(--control-padding-y) !important;
   font-size: var(--control-font-size) !important;
}
 	
	
/* =========================================================================
   標準カラー地図タイルのトーンダウン（背景だけを薄く・淡くする）
========================================================================= */

/* 背景地図のタイル画像が入っているコンテナだけを特定 */
#map .leaflet-pane.leaflet-tile-pane {
    /* 1. opacity を下げて背景色（白）を透かす（これだけで劇的に薄くなります） */
    opacity: 0.65 !important;

    /* 2. 彩度を抑え、少し明るく飛ばして路線を引き立たせる */
    filter: saturate(0.5) brightness(1.08) contrast(0.9) !important;
}

/* 念のため、前面の路線・SVGレイヤーは100%完全発色を担保 */
#map .leaflet-pane.leaflet-overlay-pane {
    opacity: 1 !important;
    filter: none !important;
}

/* 広い画面（1024px 以上）: 地図の高さを画面の高さに合わせる（地図より上の約 205px と下の余白約 20px を引く。最低 480px） */
@media (min-width: 1024px) {
    #map { height: max(480px, calc(100vh - 226px)); }
}
/* 地図の背景地図は半透明（55%）で、後ろの色と重ねて淡く見せている。地図の枠に背景色がないと、
   全画面表示のとき後ろがブラウザ既定の黒（::backdrop）になって暗く見えるので、パネルと同じ色を敷く */
#map { background-color: var(--bg-surface); }
#ranking-menu > summary::-webkit-details-marker { display: none; }
/* 全画面ボタンはパソコンの広い画面だけ（狭い画面の地図の操作ボタンは変えない） */
@media (max-width: 1023px) {
    .maplibregl-ctrl-fullscreen { display: none !important; }
}