/*
 * fd-kpi-manager / frontend.css
 *
 * Lightning テーマ + VK Blocks の CSS 変数・クラスに乗っかる設計。
 * 色・フォントサイズ等は --vk-color-* 変数で Lightning 側のテーマカラーに追従。
 * 独自の色指定は原則持たない。
 */

/* ============================================================
   冒頭文
   ============================================================ */
.fd-kpi-intro {
    margin-bottom: 1.4em;
    line-height: 1.8;
}

/* ============================================================
   固定案内文（左ボーダーは Lightning プライマリカラーに追従）
   ============================================================ */
.fd-kpi-notice {
    /* Lightning/VK Blocks が定義する CSS 変数で色を決定 */
    border-left: 4px solid var(--vk-color-primary, #337ab7);
    background-color: var(--vk-color-primary-light, #f0f4f8);
    padding: 12px 16px;
    margin-bottom: 2em;
    line-height: 1.8;
    font-size: .95em;
}

/* ============================================================
   見出し余白の微調整
   （スタイル自体は is-style-vk-heading-* が担当）
   ============================================================ */
.fd-kpi-policy-heading,
.fd-kpi-disclosure-heading {
    margin-top: 2em;
    margin-bottom: .6em;
}

.fd-kpi-approach-heading,
.fd-kpi-kpi-heading {
    margin-top: 1.4em;
    margin-bottom: .5em;
}

/* ============================================================
   取り組みリスト
   （Lightningテーマの ul スタイルを引き継ぎ、「・」を前置するだけ）
   ============================================================ */
.fd-kpi-approach-list {
    list-style: none;
    padding-left: .5em;
    margin: 0 0 1.2em;
}

.fd-kpi-approach-list li {
    padding: .3em 0;
    line-height: 1.8;
}

.fd-kpi-approach-list li::before {
    content: "・";
}

/* ============================================================
   KPI テーブル
   ・figure.wp-block-table でラップすることで
     Lightning の .wp-block-table スタイルをそのまま適用
   ・thead の背景色のみ --vk-color-primary に追従
   ============================================================ */

/* figure ラッパー（wp-block-table と同じ扱いにする） */
.fd-kpi-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1em 0 1.8em;
}

/* table 本体 — Lightning の .table（Bootstrap）スタイルを継承 */
.fd-kpi-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
}

/* セル — wp-block-table と同じボーダー指定 */
.fd-kpi-table-wrap table th,
.fd-kpi-table-wrap table td {
    border: 1px solid var(--vk-color-border-on-bg, #ccc);
    padding: .5em .75em;
    text-align: left;
    vertical-align: middle;
    word-break: normal;
}

/* thead — プライマリカラーで着色（テーマカラーに自動追従） */
.fd-kpi-table-wrap table thead th {
    background-color: var(--vk-color-primary, #337ab7);
    color: var(--vk-color-primary-text, #fff);
    font-weight: 600;
    border-color: var(--vk-color-primary, #337ab7);
}

/* tbody 偶数行（ゼブラ） */
.fd-kpi-table-wrap table tbody tr:nth-child(even) {
    background-color: var(--vk-color-primary-vivid-thin, #f0f5fa);
}

/* ============================================================
   KPIの公表セクション
   ============================================================ */
.fd-kpi-disclosure-lead {
    margin-bottom: 1em;
    line-height: 1.8;
}

/* ============================================================
   レスポンシブ：スマホでは横スクロール
   ============================================================ */
@media screen and (max-width: 767px) {
    .fd-kpi-table-wrap {
        display: block;
    }
}