/**
 * css/tb1-club-analytics.css — ส่วนเฉพาะของหน้ารายงานและวิเคราะห์กิจกรรมชุมนุม (ClubAnalytics.php) · class ขึ้นต้น clb-
 * ★ 12 พ.ย. 2569 · โหลดต่อจาก css/tb1-analytics-pages.css (ชุดหน้าวิเคราะห์สาธารณะ) ใช้โทเคน --ax-* ของชุดนั้น
 *
 * สี (ตรวจด้วย dataviz validate_palette.js)
 *   ชาย–หญิง = --tb1-male/--tb1-female ชุดเดียวกับหน้าข้อมูลบุคลากรและนักเรียน #3b82f6 #ec4899 ผ่านทุกข้อทั้งสองโหมด
 *   ประเภทกิจกรรม = ชุดสีหมวดหมู่อ้างอิง 8 สี ลำดับคงที่ · ใช้เป็นจุดหน้าชื่อประเภทเท่านั้น (มีชื่อกำกับเสมอ ตามกติกา relief ของสีที่ตัดกับพื้นต่ำกว่า 3:1)
 *   แท่งขนาดทุกแท่ง = สีแบรนด์สีเดียว (ปริมาณ ไม่ใช่หมวดหมู่)
 */

.clb-page {
    --clb-male: var(--tb1-male, #3b82f6);
    --clb-female: var(--tb1-female, #ec4899);
    --clb-unknown: var(--ax-neutral, #94a3b8);
    --clb-t1: #2a78d6;
    --clb-t2: #eb6834;
    --clb-t3: #1baf7a;
    --clb-t4: #eda100;
    --clb-t5: #e87ba4;
    --clb-t6: #008300;
    --clb-t7: #6250d6;
    --clb-t8: #e34948;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .clb-page {
    --clb-t1: #3987e5;
    --clb-t2: #d95926;
    --clb-t3: #199e70;
    --clb-t4: #c98500;
    --clb-t5: #d55181;
    --clb-t6: #008300;
    --clb-t7: #9085e9;
    --clb-t8: #e66767;
}

/* ── เพศ ── */
.clb-page .ax-seg.is-male,
.clb-page .ax-sw.is-male { background: var(--clb-male); }
.clb-page .ax-seg.is-female,
.clb-page .ax-sw.is-female { background: var(--clb-female); }
.clb-page .ax-seg.is-unknown,
.clb-page .ax-sw.is-unknown { background: var(--clb-unknown); }

/* แถวที่มีแท่งซ้อน: แท่งซ้อนอยู่ช่องกลางแทนราง */
.clb-g-rows .ax-hrow .ax-stack {
    margin-top: 0;
}

/* ── ประเภทกิจกรรม ── */
.clb-cat-dot {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: 0;
    background: var(--clb-dot, var(--clb-t8));
}

.clb-cat-dot.is-t1 { --clb-dot: var(--clb-t1); }
.clb-cat-dot.is-t2 { --clb-dot: var(--clb-t2); }
.clb-cat-dot.is-t3 { --clb-dot: var(--clb-t3); }
.clb-cat-dot.is-t4 { --clb-dot: var(--clb-t4); }
.clb-cat-dot.is-t5 { --clb-dot: var(--clb-t5); }
.clb-cat-dot.is-t6 { --clb-dot: var(--clb-t6); }
.clb-cat-dot.is-t7 { --clb-dot: var(--clb-t7); }
.clb-cat-dot.is-t8 { --clb-dot: var(--clb-t8); }

/* แท่งประเภท: สีแบรนด์สีเดียว (ปริมาณ) */
.clb-page .ax-bar[class*="clb-bar-"] {
    background: var(--ax-brand);
}

.clb-page .ax-hrow-k small,
.clb-page .ax-hrow-v small {
    margin-left: 4px;
    color: var(--ax-ink-3, #64748b);
    font-size: .78em;
    font-weight: 500;
}

/* ผังประเภท × ชั้น */
.clb-hm td {
    min-width: 4.4rem;
    text-align: center;
}

.clb-hm td small {
    display: block;
    font-size: .72rem;
    color: var(--ax-ink-2);
}

.clb-zero {
    color: var(--ax-ink-3, #64748b);
    font-size: .82rem;
}

/* ── ตารางรายชุมนุม ── */
.clb-clubs th[scope="row"] {
    min-width: 13rem;
}

.clb-club-t {
    display: block;
    font-weight: 600;
    color: var(--ax-ink);
    line-height: 1.4;
}

.clb-club-s {
    display: flex;
    align-items: center;
    margin-top: 2px;
    font-size: .76rem;
    font-weight: 500;
    color: var(--ax-ink-2);
}

.clb-td-adv {
    min-width: 11rem;
    font-size: .84rem;
    line-height: 1.5;
}

.clb-td-n,
.clb-td-g,
.clb-td-cov {
    min-width: 8.5rem;
}

.clb-td-n b,
.clb-td-cov b {
    display: block;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.clb-g-t {
    display: block;
    margin-bottom: 4px;
    font-size: .8rem;
    color: var(--ax-ink-2);
    white-space: nowrap;
}

.clb-td-lv {
    min-width: 7.5rem;
}

.clb-lv-t {
    display: block;
    font-size: .84rem;
    font-weight: 600;
}

/* ระดับชั้น ม.1–ม.6 แท่งเล็กใต้ตัวเลข */
.clb-minis {
    display: grid;
    grid-template-columns: repeat(6, 14px);
    gap: 3px;
    align-items: end;
    height: 34px;
    margin-top: 4px;
}

.clb-mini {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
}

.clb-mini-bar {
    align-self: end;
    height: max(2px, calc(var(--h) * .78));
    border-radius: 3px 3px 1px 1px;
    background: var(--ax-brand);
}

.clb-mini.is-zero .clb-mini-bar {
    height: 2px;
    background: var(--ax-paper-alt, #e2e8f0);
}

.clb-mini-x {
    font-size: .62rem;
    line-height: 1.2;
    text-align: center;
    color: var(--ax-ink-3, #64748b);
}

.clb-td-meet {
    min-width: 9rem;
    font-size: .82rem;
    line-height: 1.5;
}

.clb-td-top {
    min-width: 14rem;
    font-size: .82rem;
    line-height: 1.5;
}

/* ผังห้อง: ห้องที่เข้าร่วมต่ำกว่า 90% มีเส้นขอบเตือน (ไอคอนสีไม่พอ จึงมีตัวเลขร้อยละกำกับเสมอ) */
.clb-page .ax-rg-c.clb-low {
    box-shadow: inset 0 0 0 2px var(--ax-warn, #f59e0b);
}

/* รอบที่กำลังดู */
.clb-cur .ax-hrow-k {
    font-weight: 700;
    color: var(--ax-ink);
}

/* ── ข้อมูลที่ควรตรวจ ── */
.clb-dq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 16px;
    align-items: start;
}

.clb-dq-room {
    padding: 8px 0;
    border-top: 1px solid var(--ax-line, #e2e8f0);
}

.clb-dq-room:first-child {
    border-top: 0;
}

.clb-dq-room summary {
    cursor: pointer;
    font-size: .9rem;
    color: var(--ax-ink);
}

.clb-dq-room p {
    margin: 6px 0 0;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--ax-ink-2);
}

.clb-dq-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .86rem;
    line-height: 1.7;
    color: var(--ax-ink-2);
}

/* ── จอแคบ ── */
@media (max-width: 640px) {
    .clb-clubs th[scope="row"] {
        min-width: 10rem;
    }

    .clb-td-adv,
    .clb-td-top {
        min-width: 9rem;
    }
}

/* ── คอนทราสต์สูง ── */
html.tb1-contrast-high .clb-page .ax-seg.is-male,
html.tb1-contrast-high .clb-page .ax-sw.is-male { background: #ffffff; }
html.tb1-contrast-high .clb-page .ax-seg.is-female,
html.tb1-contrast-high .clb-page .ax-sw.is-female { background: #facc15; }
html.tb1-contrast-high .clb-page .ax-seg.is-unknown,
html.tb1-contrast-high .clb-page .ax-sw.is-unknown { background: #9ca3af; }
html.tb1-contrast-high .clb-cat-dot { outline: 1px solid #ffffff; }
html.tb1-contrast-high .clb-mini-bar { background: #facc15; }

@media print {
    .clb-dq-room[open] p,
    .clb-dq-room p {
        display: block;
    }

    .clb-minis {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}