/*
 * dashboard-fix.css
 * Add to shop-dashboard.html: <link rel="stylesheet" href="dashboard-fix.css">
 * Place the <link> AFTER the existing <style> block.
 */

/* ── DESKTOP: give Actions column more room ── */
.trow-head,
.trow {
    grid-template-columns: 48px 2fr 1fr 1fr 1.1fr 150px !important;
}

/* ── TABLET (max 760px): hide stock col, keep others ── */
@media (max-width: 760px) {
    .trow-head,
    .trow {
        /* thumb | name+price | status+actions stacked */
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        padding: 12px 14px !important;
        border-bottom: 1px solid #f5f7fb;
    }
    .trow-head { display: none !important; } /* hide header on mobile — not needed */

    /* Thumbnail — fixed width left */
    .trow > .pthumb {
        flex: 0 0 40px;
        margin-right: 10px;
    }

    /* Product name — takes remaining width in row 1 */
    .trow > .pname {
        flex: 1;
        min-width: 0;
    }

    /* Price — right side of row 1 */
    .trow > .pprice {
        flex: 0 0 auto;
        font-size: .88rem;
        margin-left: 8px;
    }

    /* Stock col — hidden */
    .trow > .col-stock { display: none !important; }

    /* Status (avail-tag) — row 2, left */
    .trow > div:nth-child(5) {
        flex: 0 0 auto;
        margin-top: 8px;
        margin-left: 50px; /* align under name */
    }

    /* Actions (Edit/Del) — row 2, right */
    .trow > .row-acts {
        flex: 1;
        justify-content: flex-end;
        margin-top: 8px;
        gap: 6px;
    }

    .row-acts .btn-sm {
        padding: 6px 12px;
        font-size: .78rem;
    }
}

/* ── SMALL PHONES (max 400px) ── */
@media (max-width: 400px) {
    .trow > div:nth-child(5) {
        margin-left: 46px;
    }
    .row-acts .btn-sm {
        padding: 5px 10px;
        font-size: .74rem;
    }
}