/**
 * gazlog Design System - Shared Component Styles
 *
 * 全プラグインのセレクタに対するブランド統一 + インタラクション強化。
 * 読み込み順: design-tokens.css → (inline CSS) → components.css → 各プラグインCSS
 *
 * components.css は各プラグインCSS より前に読み込まれるため、
 * プラグイン側で上書き可能。ただし !important は使わない。
 */

/* ================================================================
   1. FONT FAMILY - 全プラグインコンテナに統一フォント適用
   ================================================================ */

.pcparts-index-container,
.pcparts-chart-container,
.pcparts-group-chart-container,
.gazlog-hub-ranking,
.bto-compare-container,
.pcparts-list-container,
.pcparts-ranking-container,
.gzl-minipc-list-wrap,
.gzl-minipc-spec {
    font-family: var(--gazlog-font-family);
}


/* ================================================================
   2. ACTIVE BUTTON STATES - 全プラグイン統一プライマリ色
   ================================================================ */

/* --- Plugin 1: Price Tracker --- */
.pcparts-period-btn.active,
.pcparts-chart-type-btn.active,
.pcparts-filter-btn.active,
.pcparts-percentile-btn.active {
    background: var(--gazlog-primary);
    border-color: var(--gazlog-primary);
    color: #fff;
}

/* --- Plugin 2: BTO Cost Compare --- */
.bto-price-btn.active {
    background: var(--gazlog-primary);
    border-color: var(--gazlog-primary);
    color: #fff;
}
.bto-filter-pill.active {
    background: var(--gazlog-primary);
    border-color: var(--gazlog-primary);
    color: #fff;
}
.bto-compare-btn {
    background: var(--gazlog-primary);
    border-color: var(--gazlog-primary);
}
.bto-compare-btn:hover:not(:disabled) {
    background: var(--gazlog-primary-hover);
}

/* --- Plugin 3: Spec Database --- */
.pcparts-filter-btn.active,
.pcparts-benchmark-btn.active,
.pcparts-page-btn.active {
    background: var(--gazlog-primary);
    border-color: var(--gazlog-primary);
    color: #fff;
}
.pcparts-compare-btn {
    background: var(--gazlog-primary);
    border-color: var(--gazlog-primary);
    color: #fff;
}
.pcparts-compare-btn:hover:not(:disabled) {
    background: var(--gazlog-primary-hover);
}

/* --- Plugin 4: MiniPC (CSS変数ブリッジで自動対応、追加セレクタ) --- */
.gzl-minipc-price-chart-toggle--active {
    background: var(--gazlog-primary-light);
    border-color: var(--gazlog-primary);
    color: var(--gazlog-primary);
}


/* ================================================================
   3. BUTTON HOVER STATES
   ================================================================ */

/* 全プラグインの inactive ボタン hover */
.pcparts-period-btn:not(.active):hover,
.pcparts-filter-btn:not(.active):hover,
.pcparts-percentile-btn:not(.active):hover,
.bto-price-btn:not(.active):hover,
.bto-filter-pill:not(.active):hover,
.pcparts-benchmark-btn:not(.active):hover,
.pcparts-page-btn:not(.active):hover {
    border-color: var(--gazlog-primary);
    color: var(--gazlog-primary);
    background: var(--gazlog-primary-light);
}


/* ================================================================
   4. TABLE HEADERS - 統一ブランドカラーヘッダ
   ================================================================ */

/* Plugin 3: Spec Database (Bootstrap dark → brand blue) */
.pcparts-table th,
.pcparts-compare-table thead th {
    background: var(--gazlog-primary);
    color: #fff;
    border-bottom-color: var(--gazlog-primary-hover);
}
/* Sticky columns in header need same background */
.pcparts-table thead .pcparts-sticky-col,
.pcparts-table thead .pcparts-sticky-name {
    background: var(--gazlog-primary);
}

/* Plugin 2: BTO Compare table - ライトヘッダのまま統一色調整 */
.bto-compare-table thead th {
    background: var(--gazlog-bg-light);
    color: var(--gazlog-text-secondary);
    border-bottom: 2px solid var(--gazlog-border);
}


/* ================================================================
   5. CTA / AFFILIATE BUTTONS - 統一アクセントカラー
   ================================================================ */

/* Plugin 2: BTO (赤 → オレンジ) */
.bto-affiliate-btn {
    background: var(--gazlog-accent);
    border-color: var(--gazlog-accent);
    color: #fff;
}
.bto-affiliate-btn:hover {
    background: var(--gazlog-accent-hover);
}

/* Plugin 3: Spec Database ランキングリンク */
.pcparts-ranking-link-primary {
    background: var(--gazlog-accent);
    border-color: var(--gazlog-accent);
    color: #fff;
}
.pcparts-ranking-link-primary:hover {
    background: var(--gazlog-accent-hover);
}

/* Plugin 4: MiniPC アフィリエイト */
.gzl-minipc-btn--affiliate {
    background: var(--gazlog-accent);
    border-color: var(--gazlog-accent);
    color: #fff;
}
.gzl-minipc-btn--affiliate:hover {
    background: var(--gazlog-accent-hover);
}

/* Amazon ボタンは固有ブランドカラーを維持 */
.gzl-minipc-btn--amazon,
.bto-amazon-btn {
    background: var(--gazlog-amazon);
    border-color: var(--gazlog-amazon);
    color: #fff;
}
.gzl-minipc-btn--amazon:hover,
.bto-amazon-btn:hover {
    background: var(--gazlog-amazon-hover);
}


/* ================================================================
   6. RANK / TIER BADGES - 統一カラースキーム
   ================================================================ */

/* Plugin 2: BTO rank badges */
.bto-rank-s {
    background: var(--gazlog-rank-s-bg);
    color: var(--gazlog-rank-s-color);
    border-color: var(--gazlog-rank-s-border);
}
.bto-rank-a {
    background: var(--gazlog-rank-a-bg);
    color: var(--gazlog-rank-a-color);
    border-color: var(--gazlog-rank-a-border);
}
.bto-rank-b {
    background: var(--gazlog-rank-b-bg);
    color: var(--gazlog-rank-b-color);
    border-color: var(--gazlog-rank-b-border);
}
.bto-rank-c {
    background: var(--gazlog-rank-c-bg);
    color: var(--gazlog-rank-c-color);
    border-color: var(--gazlog-rank-c-border);
}
.bto-rank-d {
    background: var(--gazlog-rank-d-bg);
    color: var(--gazlog-rank-d-color);
    border-color: var(--gazlog-rank-d-border);
}


/* ================================================================
   7. CLICKABLE ROW / NAME LINKS - 統一インタラクション
   ================================================================ */

/* クリッカブル行のホバー */
.pcparts-index-table tbody tr:hover,
.bto-compare-table tbody tr:hover,
.pcparts-table tbody tr:hover td,
.gzl-minipc-trow:hover {
    background: var(--gazlog-primary-light);
}

/* テーブル内リンク名 */
.bto-clickable-cell,
.pcparts-sticky-name,
.gzl-minipc-trow__name {
    color: var(--gazlog-text);
    transition: color 0.15s;
}
.bto-clickable-cell:hover,
.pcparts-sticky-name:hover,
.gzl-minipc-trow__name:hover {
    color: var(--gazlog-primary);
}


/* ================================================================
   8. CARD HOVER EFFECTS - 浮き上がりエフェクト
   ================================================================ */

.pcparts-group-card,
.bto-detail-stat,
.gzl-minipc-gallery__main {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pcparts-group-card:hover,
.bto-detail-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--gazlog-shadow-hover);
}


/* ================================================================
   9. BUTTON PRESS FEEDBACK - 押し込み感
   ================================================================ */

.pcparts-period-btn:active,
.pcparts-filter-btn:active,
.pcparts-percentile-btn:active,
.bto-price-btn:active,
.bto-filter-pill:active,
.bto-compare-btn:active,
.bto-affiliate-btn:active,
.pcparts-filter-btn:active,
.pcparts-benchmark-btn:active,
.pcparts-compare-btn:active,
.pcparts-page-btn:active,
.pcparts-ranking-link-primary:active,
.gzl-minipc-filter-btn:active,
.gzl-minipc-btn:active,
.gzl-minipc-page-btn:active {
    transform: scale(0.97);
}


/* ================================================================
   10. FOCUS-VISIBLE - アクセシビリティ
   ================================================================ */

.pcparts-period-btn:focus-visible,
.pcparts-filter-btn:focus-visible,
.bto-price-btn:focus-visible,
.bto-filter-pill:focus-visible,
.bto-compare-btn:focus-visible,
.pcparts-benchmark-btn:focus-visible,
.pcparts-compare-btn:focus-visible,
.pcparts-page-btn:focus-visible,
.gzl-minipc-filter-btn:focus-visible,
.gzl-minipc-btn:focus-visible,
.gzl-minipc-page-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 47, 153, 0.3);
}


/* ================================================================
   11. MOBILE TOUCH TARGETS - 44px最小タッチ領域
   ================================================================ */

@media (max-width: 768px) {
    .pcparts-period-btn,
    .pcparts-filter-btn,
    .pcparts-percentile-btn,
    .bto-price-btn,
    .bto-filter-pill,
    .pcparts-benchmark-btn,
    .pcparts-page-btn,
    .gzl-minipc-filter-btn,
    .gzl-minipc-page-btn {
        min-height: 36px;
        min-width: 36px;
    }
}


/* ================================================================
   12. COMPARE BAR - 統一ブランドカラー
   ================================================================ */

.bto-compare-bar {
    background: var(--gazlog-primary);
}


/* ================================================================
   13. SCROLL HINT - テーブル横スクロールのヒントグラデーション
   ================================================================ */

.pcparts-table-wrapper,
.bto-table-wrapper,
.gzl-minipc-table-scroll {
    position: relative;
}
.pcparts-table-wrapper::after,
.bto-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.pcparts-table-wrapper.is-scrollable::after,
.bto-table-wrapper.is-scrollable::after {
    opacity: 1;
}