/*
 * ส่วนเสริมของ Profit Command Center — ต่อยอดจาก `app.min.css` ของเทมเพลต Rizz
 *
 * 🔴 ห้ามแก้ไฟล์ของเทมเพลต (`app.min.css`, `bootstrap.min.css`, `icons.min.css`)
 *    การอัปเดตเทมเพลตครั้งหน้าจะทับทิ้งทั้งหมดโดยไม่มีอะไรฟ้อง
 *    ทุกการปรับแต่งของโปรเจกต์นี้อยู่ในไฟล์นี้ไฟล์เดียว
 *    (กติกาเต็ม: .claude/UX_TEMPLATE.md §3)
 *
 * ⚠️ ใช้ตัวแปรของ Bootstrap (`--bs-*`) เท่านั้น อย่าฝังค่าสีดิบ
 *    มิฉะนั้นโหมดมืด (`html[data-bs-theme=dark]`) จะอ่านไม่ออกในบางการ์ด
 */

/* การ์ด KPI: เส้นบางด้านซ้ายบอกว่าเป็นตัวชี้วัด ไม่ใช่การ์ดเนื้อหาทั่วไป */
.kpi-card {
    border-inline-start: 3px solid var(--bs-primary);
}

.kpi-card [data-kpi-value] {
    font-variant-numeric: tabular-nums;
    /* ตัวเลขต้องไม่ขยับซ้ายขวาตอนอัปเดตสด — ความกว้างของหลักต้องเท่ากัน */
}

/* จังหวะกะพริบสั้น ๆ ตอนตัวเลขเปลี่ยนจากสตรีม เพื่อให้ตาจับได้ว่าอะไรขยับ */
.kpi-card.is-updated {
    animation: kpi-flash 600ms ease-out;
}

@keyframes kpi-flash {
    0%   { background-color: rgba(var(--bs-primary-rgb), 0.12); }
    100% { background-color: transparent; }
}

/*
 * 🔴 เคารพผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว — ข้อกำหนดการเข้าถึง
 *    การกะพริบเป็นสิ่งกระตุ้นอาการของผู้ใช้บางกลุ่ม และที่นี่มันเป็นแค่การตกแต่ง
 */
@media (prefers-reduced-motion: reduce) {
    .kpi-card.is-updated {
        animation: none;
        outline: 2px solid rgba(var(--bs-primary-rgb), 0.5);
    }
}

.insight-card {
    border-left-width: 4px !important;
    background-color: var(--bs-body-bg);
}

.insight-card dt {
    white-space: nowrap;
}

/* ป้ายสถานะสตรีมบนแถบบน — สีสื่อความหมาย ไม่ใช่การตกแต่ง */
#stream-status[data-state="live"]         { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
#stream-status[data-state="connecting"]   { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
#stream-status[data-state="disconnected"] { background-color: var(--bs-danger-bg-subtle)  !important; color: var(--bs-danger-text-emphasis)  !important; }

/* ตารางหนาแน่นแต่ยังอ่านออก — ความสูงแถวขั้นต่ำเพื่อให้แตะบนมือถือได้ */
.table td,
.table th {
    min-height: 2.75rem;
    vertical-align: middle;
}

/* ตัวเลขในตารางเรียงหลักตรงกันเสมอ */
.table .text-end {
    font-variant-numeric: tabular-nums;
}

/*
 * เป้าหมายการแตะขั้นต่ำ 44px
 *
 * ⚠️ **เดิมผูกกับความกว้างจอ (`max-width: 575.98px`) ซึ่งผิด**
 *    แท็บเล็ตกว้าง 768–1024px ก็เป็นอุปกรณ์สัมผัส แต่ไม่เข้าเงื่อนไขนั้น
 *    → ปุ่มในตารางบนแท็บเล็ตเล็กกว่า 44px ทั้งที่ใช้นิ้วกดเหมือนกัน
 *
 * 🔴 `pointer: coarse` ถามสิ่งที่ตรงประเด็นกว่า: **อุปกรณ์ชี้ตำแหน่งหยาบไหม**
 *    (นิ้ว = coarse · เมาส์ = fine) ซึ่งไม่เกี่ยวกับความกว้างจอเลย
 *    คงเงื่อนไขความกว้างไว้ด้วย เผื่อเบราว์เซอร์เก่าที่ไม่รู้จัก `pointer`
 */
@media (pointer: coarse), (max-width: 575.98px) {
    .btn-sm,
    .form-check-input,
    .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ⚠️ checkbox/radio ต้องกว้างด้วย ไม่ใช่แค่สูง — พื้นที่แตะเป็นสี่เหลี่ยม */
    .form-check-input {
        min-width: 1.25rem;
    }

    /* ระยะห่างระหว่างเป้าหมายอย่างน้อย 8px กันกดผิดปุ่ม (กฎ `touch-spacing`) */
    .table td .btn + .btn {
        margin-inline-start: .5rem;
    }
}

/*
 * ลดหน่วงการแตะ ~300ms ที่เบราว์เซอร์มือถือใส่ไว้เพื่อรอ double-tap zoom
 *
 * ⚠️ **ห้ามใช้ `touch-action: none`** — จะปิด pinch-zoom ทั้งหน้า
 *    ซึ่งเป็นเครื่องมือหลักของผู้ใช้สายตาเลือนราง · `manipulation` ปิดเฉพาะ
 *    double-tap zoom แต่ยัง pinch-zoom และเลื่อนได้ตามปกติ (กฎ `tap-delay`)
 */
.btn,
.nav-link,
.form-check-input,
summary {
    touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase A — สินค้า/ต้นทุน · การเชื่อมร้าน · ค่าธรรมเนียม · ผู้ช่วยตั้งราคา
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * ตัวเลขเงินและเปอร์เซ็นต์ทุกที่ต้องเรียงหลักตรงกัน
 * ⚠️ ไม่ได้เจาะจงแค่ `.table .text-end` เพราะการ์ดผลลัพธ์ของผู้ช่วยตั้งราคา
 *    ก็มีตัวเลขที่ต้องเทียบกันด้วยสายตาเหมือนกัน
 */
.fs-4,
[data-kpi-value],
.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
}

/*
 * 🔴 ลิงก์ข้ามไปเนื้อหาต้องมองเห็นได้จริงตอนโฟกัส
 *    `.visually-hidden-focusable` ของ Bootstrap ทำให้มันโผล่มาก็จริง
 *    แต่ถ้าไม่มีพื้นหลังทึบ มันจะทับข้อความข้างหลังจนอ่านไม่ออก
 */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    padding: .5rem .75rem;
}

/*
 * 🔴 ห้ามลบเส้นโฟกัส — ผู้ใช้คีย์บอร์ดต้องเห็นว่าตัวเองอยู่ตรงไหน
 *    เทมเพลตบางการ์ดตั้ง `outline: none` ไว้ · ทวงคืนตรงนี้
 */
.form-check-input:focus-visible,
.btn:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/*
 * ตัวหมุนบอกขั้นของวิซาร์ด — แท็บที่กดไม่ได้ต้องดูต่างจากแท็บที่กดได้
 * ⚠️ ใช้ตัวแปรของธีมเท่านั้น มิฉะนั้นโหมดมืดจะอ่านไม่ออก
 *    (.claude/UX_TEMPLATE.md §4)
 */
#pricing-tabs .nav-link {
    min-height: 44px;
}

/*
 * รายการที่พับไว้ (`<details>`) — ตัวชี้ต้องบอกว่ากดได้
 * ⚠️ `cursor` ถูกตั้ง inline ใน view ด้วยเพราะบางเบราว์เซอร์ยังไม่ให้ค่าเริ่มต้น
 */
details > summary {
    user-select: none;
}

/*
 * การ์ดช่องทางในวิซาร์ด — ช่องที่เลือกไม่ได้ต้องดูจางแต่ยังอ่านออก
 * 🔴 ห้ามใช้ `opacity` ต่ำกว่านี้ · ข้อความที่จางเกินไปไม่ผ่านเกณฑ์คอนทราสต์ 4.5:1
 *    แล้วผู้ใช้จะอ่านไม่ออกว่าทำไมช่องทางนั้นเลือกไม่ได้
 */
.opacity-75 .form-check-label {
    color: var(--bs-body-color);
}

/*
 * ตารางที่มีคอลัมน์เยอะบนจอแคบ — บังคับให้เลื่อนในกล่องของตัวเอง
 * 🔴 หน้าเว็บทั้งหน้าต้องไม่เลื่อนแนวนอน (.claude/UX_TEMPLATE.md §6)
 */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ช่อง "ถามเกี่ยวกับข้อเสนอนี้" — หน้า /insights
 *
 * 🔴 ทุกสีมาจากตัวแปรของธีม ห้าม hex ดิบ (design-system MASTER.md §1)
 *    สีที่ฝังตายจะอ่านไม่ออกทันทีที่สลับเป็นโหมดมืด
 * ═══════════════════════════════════════════════════════════════════════ */

/*
 * หัวข้อที่พับได้ — ต้องอ่านออกว่ากดได้โดยไม่ต้องเอาเมาส์ไปชี้
 * ⚠️ พื้นที่กดต้องสูงพอสำหรับนิ้ว (44px) ไม่ใช่แค่ความสูงของตัวอักษร
 */
.insight-ask-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    color: var(--bs-primary);
    transition: color 0.15s ease-in-out;
}

.insight-ask-summary:hover {
    color: var(--bs-link-hover-color);
}

/*
 * บทสนทนา — จำกัดความสูงแล้วให้เลื่อนในตัวเอง
 * 🔴 ถ้าไม่จำกัด การ์ดที่ถามไปสิบคำถามจะสูงจนกลบข้อเสนอข้ออื่นทั้งหน้า
 *    ซึ่งทำให้ฟีเจอร์ที่ตั้งใจช่วย กลายเป็นตัวบังสิ่งที่ผู้ใช้มาดู
 */
.insight-ask-thread {
    max-height: 26rem;
    overflow-y: auto;
}

.insight-ask-thread:not(:empty) {
    margin-bottom: 0.5rem;
}

.insight-turn + .insight-turn {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color);
}

/*
 * คำถามของผู้ใช้ — ต้องแยกออกจากคำตอบด้วยสายตา
 * 🔴 แยกด้วย "สีอย่างเดียว" ไม่ได้ (MASTER.md §1) จึงใช้ตัวหนา + แถบซ้ายคู่กัน
 */
.insight-turn-question {
    font-weight: 600;
    padding-left: 0.5rem;
    border-left: 3px solid var(--bs-primary);
    color: var(--bs-body-color);
}

.insight-turn-answer {
    padding-left: 0.5rem;
    font-size: 0.8125rem;
}

/*
 * ตัวเลขที่กฎใช้ — ต้องเรียงตรงกันเพื่อให้กวาดตาเทียบได้
 * ⚠️ `tabular-nums` จำเป็นทุกที่ที่มีตัวเลขเงิน (MASTER.md §2)
 */
.insight-turn-facts {
    border-left: 2px solid var(--bs-border-color);
    padding-left: 0.5rem;
}

.insight-fact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.125rem 0;
}

.insight-fact-label::after {
    content: ":";
}

.insight-fact-value {
    font-variant-numeric: tabular-nums;
}

/*
 * คำอธิบายว่าทำไมคำตอบนี้ไม่ได้เขียนโดย AI
 * 🔴 เหลือง = "ข้อมูลไม่ครบ / ต้องอ่านก่อนเชื่อ" ตามความหมายของสีในระบบ (MASTER.md §1)
 *    และมีไอคอนกำกับในข้อความอยู่แล้ว จึงไม่ได้สื่อด้วยสีอย่างเดียว
 */
.insight-turn-notice {
    border-left: 3px solid var(--bs-warning);
    padding: 0.25rem 0.5rem;
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-body-color);
    border-radius: 0.25rem;
}

/*
 * ปุ่มคำถามสำเร็จรูป — ตัดข้อความไม่ได้ ต้องอ่านครบทั้งประโยค
 * ⚠️ ผู้ใช้เลือกจากข้อความบนปุ่ม ปุ่มที่ถูกตัดกลางประโยคเลือกไม่ถูก
 */
.insight-ask-chip {
    white-space: normal;
    text-align: left;
}

.insight-turn-feedback button {
    text-decoration: underline;
}