/* product.css  - ตารางสินค้า (Product List) */
/* อิงตัวแปรจาก theme.css + โครงจาก global.css */
/* ===== Application column stripes (vertical) ===== */
:root {
    /* ค่ากลางๆ ที่ใช้ได้ทั้ง dark/light; ปรับได้ตามใจ */
    --stripe-odd: rgb(252, 240, 255);
    --stripe-even: rgb(255, 255, 255);
    --app-overlay: rgba(251, 171, 253, 0.25);
}

/* ===== layout ===== */
body {
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--card1);
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin: 12px 0;
    align-items: end;
}
.control input::placeholder {
    font-size: 0.85rem;
}
.export-btn {
    display: flex;
    margin-left: auto;
    gap: 1rem;
}
/* table */
.grid-wrap {
    /* background: var(--sheet); */
    border-radius: 6px;
    overflow: hidden;
}
.grid-scroll {
    overflow: auto;
    max-width: 100%;
}
.xl-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

/* group header */
#theadGroup th {
    padding: 1rem 0;
    white-space: nowrap;
    z-index: -1;
}

/* ให้ thead เป็นกรอบอ้างอิงสำหรับ pseudo-element */
/* ถ้าคุณใช้ sticky header อยู่แล้วจะยังทำงาน */
#productTable thead {
    position: sticky;
    top: 0;
}
/* วาดแถบ gradient ครอบทั้งหัวตาราง 2 แถวให้เนียนต่อกัน */

#productTable thead::before {
    content: "";
    position: absolute;
    inset: 0; /*ครอบเต็ม thead*/
    background: var(--card1);
    pointer-events: none; /* ไม่บังคลิก sort */
    z-index: -1; /* อยู่ใต้ตัวอักษร/เส้นขอบของ th */
}

#productTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
/* fix column ซ้ายสุด 2 คอลัมน์ให้เลื่อนตาม */
#productTable th:nth-child(1),
#productTable th:nth-child(2) {
    left: 0;
    z-index: 4; /* อยู่บนสุด */
    background: var(--card1);
    background-clip: padding-box;
}

/* sub header */
#theadMain th {
    position: sticky;
    top: 32px;
    z-index: 0;
    /* vertical-align: text-top; */
    padding-inline: 0.8rem;
}
#theadMain th:nth-child(2) {
    left: 0;
    z-index: 4; /* อยู่บนสุด */
    background: var(--card1);
    background-clip: padding-box;
}
#theadMain th.sortable {
    cursor: pointer;
}
#theadMain th.sortable::after {
    content: " ↕";
    font-weight: 400;
}
#theadMain th.sortable.asc::after {
    content: " ↑";
}
#theadMain th.sortable.desc::after {
    content: " ↓";
}

#productTable td:nth-child(2) {
    position: sticky;
    left: 0;
    background: var(--row-bg);
    background-clip: padding-box;
    z-index: 4;
}

/* body */
tbody td {
    padding: 1rem;
    color: var(--td-text);
}

tbody tr {
    height: 65px;
    --row-bg: var(--stripe-even);
    background: var(--row-bg);
}
tbody tr:nth-child(odd) {
    --row-bg: var(--stripe-odd);
}
/* tbody tr:nth-child(even) {
    --row-bg: var(--stripe-even);
} */

td:nth-child(6),
td:nth-child(13),
td:nth-child(19) {
    border-right: var(--card1) 5px double;
}

.td-left {
    text-align: left;
}
.td-center {
    text-align: center;
}
.td-right {
    text-align: right;
}
.icon-circle {
    font-size: 0.8rem;
}
.w-70 {
    width: 70px;
}
.w-200 {
    width: 200px;
}
.w-300 {
    width: 300px;
}
.table-overlay {
    background-color: var(--app-overlay);
    color: var(--dot, var(--accent));
}
/* pager */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 0;
    background-color: var(--card1);
}

.no-data {
    font-size: 2rem;
    padding: 2rem !important;
    font-weight: 600;
    opacity: 0.85;
}
.hint {
    font-size: 0.9rem;
    margin-top: 12px;
    max-width: 600px;
    line-height: 1.4;
}

.hint p {
    margin-left: 1.2rem;
}
/* ===== Mobile View: ซ่อนตาราง ===== */
.card-list {
    display: none;
}

/* Fix: ปิด overlay ที่บังตารางบนจอเล็ก */
@media (max-width: 768px) {
    #productTable thead::before {
        display: none;
    }

    #productTable thead,
    #productTable thead th,
    #theadMain th {
        background: var(--card1);
    }
}
/* ===== Dark Mode Overrides ===== */
@media (prefers-color-scheme: dark) {
    html[data-theme="dark"] {
        --stripe-odd: var(--brand);
        --stripe-even: var(--brand1);
        --app-overlay: rgba(85, 115, 221, 0.3);
    }
}
/* =========== Mobile Card View ================ */
/* 767px for mobile screen  */
/* สไตล์การ์ด ยกมาจาก card.css แล้วปรับเล็กน้อยให้เข้ากับ theme */
/* @media (max-width: 768px) {
    .grid-wrap,
    .pager,
    #perPage,
    label[for="perPage"],
    .rows-per-page,
    .rows-per-page * {
        display: none !important;
    }

    .card-list {
        display: grid;
        gap: 2rem;
        padding: 0.85rem 0;
    }

    .product-card {
        background: var(--card);
        color: #ddd;
        border-radius: var(--radius);
        padding: 2rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }

    .product-card .card-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .product-card .card-header .sub {
        font-size: 0.85rem;
        opacity: 0.85;
        font-style: italic;
    }

    .product-card .card-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .product-card .card-body p {
        margin: 0.35rem 0;
    }

    .product-card .checklist {
        margin: 0.5rem 0 0;
        padding: 0;
    }
    .product-card .checklist li {
        list-style: none;
        margin: 0.2rem 0;
        display: flex;
        align-items: center;
    }

    .product-card .card-footer {
        margin-top: 8px;
    }
    .product-card .checklist,
    .product-card .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
    }
    .product-card .tag,
    .product-card .badge {
        border: 1px solid var(--muted);
        padding: 0.125rem 0.5rem;
        border-radius: calc(var(--radius) / 2);
        font-size: 0.7rem;
        color: var(--muted);
    }
} */