/* ==========================================================
   components/table.css
   ----------------------------------------------------------
   一覧の表（table.data）と、行の強調（row-*）。
   ========================================================== */

table.data {
    border: 1px solid var(--im-line);
    border-collapse: collapse;
    background: var(--im-bg-panel);
}

table.data > * > tr > th,
table.data > * > tr > td,
table.data > tr > th,
table.data > tr > td {
    padding: 6px 10px;
    border: 1px solid var(--im-line-faint);
}

/* 見出しの行 */
table.data > * > tr > th,
table.data > tr > th {
    font-family: var(--im-font-hud);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--im-cyan-bright);
    background: rgba(102, 217, 255, 0.08);
    border-bottom: 1px solid var(--im-line-strong);
}

/* マウスを乗せた行 */
table.data > tbody > tr:hover > td,
table.data > tr:hover > td {
    background: rgba(102, 217, 255, 0.05);
}

table.data.data-compact > * > tr > th,
table.data.data-compact > * > tr > td {
    padding: 3px 6px;
}


/* ==========================================================
   行の強調
   ========================================================== */

.row-current { background: rgba(102, 217, 255, 0.13); }
.row-attention { background: rgba(242, 194, 91, 0.12); }
.row-danger { background: rgba(255, 90, 82, 0.18); }
.row-error { background: rgba(255, 90, 82, 0.10); }
.row-group { background: rgba(255, 255, 255, 0.04); }


/* ==========================================================
   狭い画面（T5）：列が細くなりすぎないよう、文字と余白を小さくする
   ========================================================== */

@media (max-width: 640px) {

    table.data {
        font-size: 13px;
    }

    table.data > * > tr > th,
    table.data > * > tr > td,
    table.data > tr > th,
    table.data > tr > td {
        padding: 4px 6px;
    }

}


/* ==========================================================
   カードの形（D-50。public/js/blogos.js が、収まらない表を table.data.stacked にする）
   ----------------------------------------------------------
   1行を1枚の HUD の板にし、各値の前に列の見出しを青白い小さな文字で出す。
   ========================================================== */

table.data.stacked {
    background: transparent;
    border: 0;
}

table.data.stacked > * > tr {
    margin-bottom: 10px;
    background: var(--im-bg-panel);
    border: 1px solid var(--im-line);
    border-left: 3px solid var(--im-line-strong);
}

table.data.stacked > * > tr > th,
table.data.stacked > * > tr > td {
    padding: 5px 12px;
    border: 0;
    border-bottom: 1px solid var(--im-line-faint);
}

table.data.stacked > * > tr:hover > td {
    background: transparent;
}

table.data.stacked td[data-label]::before {
    display: block;
    content: attr(data-label);
    font-family: var(--im-font-hud);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--im-cyan);
}

table.data.stacked td[data-label=""]::before {
    content: none;
}

/* 行の強調は、カードの左の線の色で出す */
table.data.stacked > * > tr.row-attention { border-left-color: var(--im-gold); }
table.data.stacked > * > tr.row-danger,
table.data.stacked > * > tr.row-error { border-left-color: var(--im-red); }
table.data.stacked > * > tr.row-current { border-left-color: var(--im-cyan); }