/**
 * USトレンドページ専用スタイル
 * 日本ページ(index.html)と完全に同じタブ・表示・レイアウトにする
 */

/* === USページでトレンド本体を確実に表示（main.css の .tab-content 等と競合しないよう body#trends-us で上書き） === */
body#trends-us main,
body#trends-us #mainContent,
body#trends-us section#trends {
    display: block !important;
    visibility: visible !important;
}
body#trends-us #trendCategoryTabContent {
    display: block !important;
    visibility: visible !important;
}
/* アクティブなタブのペインのみ表示（日本ページと同じ挙動・そのタブのデータだけ表示） */
body#trends-us #trendCategoryTabContent > .tab-pane.show.active,
body#trends-us #trendCategoryTabContent > .tab-pane.active.show {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
}
body#trends-us #trendCategoryTabContent > .tab-pane.active.show #all-trends-container {
    display: flex !important;
    visibility: visible !important;
}

/* 非アクティブなペイン: 完全に非表示・レイアウトから除外（日本ページと同様にそのタブにはそのデータのみ） */
/* ID 指定で詳細度を最大にし、Bootstrap JS のインラインスタイル等に確実に勝つ */
body#trends-us #trends #pane-all:not(.active):not(.show),
body#trends-us #trends #pane-news:not(.active):not(.show),
body#trends-us #trends #pane-search:not(.active):not(.show),
body#trends-us #trends #pane-tech:not(.active):not(.show),
body#trends-us #trends #pane-market:not(.active):not(.show),
body#trends-us #trends #pane-entertainment:not(.active):not(.show),
body#trends-us #trends #pane-govdata:not(.active):not(.show) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
/* 子要素すべてに display:none !important を当てない（タブ表示後も子の表示が復帰しないケースがあり、
   レイアウト編集ツールバー .all-layout-toolbar が効かない原因になる）。非表示は上記ペイン自体で足りる。 */
body#trends-us #trends #trendCategoryTabContent > .tab-pane.show.active,
body#trends-us #trends #trendCategoryTabContent > .tab-pane.active.show {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
}

/* === 日本ページと同一レイアウト（広大な余白を解消） === */
/* main.css の #trends .row と同じく align-items: stretch を使用（flex-start は余白の原因） */
body#trends-us #trends .row {
    align-items: stretch !important;
}
/* コンテナ・余白を日本ページと揃える */
body#trends-us main,
body#trends-us #mainContent {
    min-height: 0 !important;
}
body#trends-us #trends {
    min-height: 0 !important;
}
body#trends-us #trendCategoryTabContent,
body#trends-us #trendCategoryTabContent > .tab-pane {
    min-height: 0 !important;
}
/* Allタブのrow・カードは日本ページと同じコンパクト表示 */
body#trends-us #all-trends-container.row {
    align-items: stretch !important;
}

/* === 全タブ: テーブルにmax-heightを設定してデータを確実に表示（広大な余白・20kpx超の高さを防止） === */
/* main.css の #hackernewsResults 等の max-height: none を USページで上書き（詳細度を高めて確実に適用） */
body#trends-us #trends #pane-all .table-responsive,
body#trends-us #trends #pane-tech .trend-table-container,
body#trends-us #trends #pane-news .trend-table-container,
body#trends-us #trends #pane-search .trend-table-container,
body#trends-us #trends #pane-market .trend-table-container,
body#trends-us #trends #pane-entertainment .trend-table-container,
body#trends-us #trends #pane-govdata .trend-table-container,
/* Gov: .trend-table-container を使わず card-body 直下だけの表（ネストした BLS 内は除外） */
body#trends-us #trends #pane-govdata #us-gov-body .card-body > .table-responsive {
    max-height: 400px !important;
    overflow-y: auto !important;
    padding-bottom: 0.5rem !important; /* 最下部のタイトルが切れない最小余白（スクロールバー下端と行を揃える） */
}

/* === USヘッダー: Gov Data 最新表示 === */
/* === USヘッダー: 日本ページと同じレイアウト === */
body#trends-us .header-row { margin-bottom: 0 !important; }
body#trends-us .dashboard-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 992px) {
    body#trends-us .dashboard-summary-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body#trends-us .dashboard-summary-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body#trends-us .dashboard-summary-panel#header-admin-unified {
    display: flex;
    flex-direction: column;
}
body#trends-us #header-admin-unified .header-admin-cols { padding-top: 0.1rem; padding-right: 3rem; }
body#trends-us #header-admin-unified .header-admin-section-title {
    font-size: 0.7rem;
    line-height: 1.25;
    margin-bottom: 0.2rem;
    font-weight: 700;
    color: #6c757d !important;
}
/* USAspendingセクションはカード下端に寄せる（余った高さは2セクションの間に入る） */
body#trends-us #header-admin-unified .header-admin-section-title--bottom { margin-top: auto; }
body#trends-us #header-estat-compact-body,
body#trends-us #header-kkj-compact-body {
    font-size: 0.7rem;
    line-height: 1.25;
    padding: 0.1rem 0;
    color: #212529 !important;
    min-height: 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
}
body#trends-us #header-kkj-compact-body .text-muted,
body#trends-us #header-estat-compact-body .text-muted { color: #6c757d !important; }
body#trends-us .header-admin-latest-title,
body#trends-us .header-admin-latest-value {
    overflow: hidden;
    text-overflow: ellipsis;
}
body#trends-us .header-admin-latest-line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
    body#trends-us #header-admin-unified {
        padding-right: 4.25rem;
        max-width: 100%;
        overflow: hidden;
    }
    body#trends-us .header-admin-latest-title,
    body#trends-us .header-admin-latest-value {
        overflow: visible;
        text-overflow: clip;
    }
    body#trends-us .header-admin-latest-line {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
}