/* ===== ACTIVITY GRID ===== */
.activityGrid {
    border-collapse: collapse;
    font-size: 13px;
    width: 70%;
    margin: 0 auto;
}

    /* Header */
    .activityGrid th {
        background: #046a8c;
        color: #fff;
        padding: 8px;
        text-align: left;
    }

    /* Cells */
    .activityGrid td {
        padding: 7px;
        border-bottom: 1px solid #ddd;
    }

    /* Zebra rows */
    .activityGrid tr:nth-child(even) {
        background: #f5fbfd;
    }

/* View Button */
.viewBtn {
    background: #046a8c;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
}

    .viewBtn:hover {
        background: #023140;
    }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {

    .activityGrid {
        width: 100%;
        font-size: 12px;
    }

        .activityGrid,
        .activityGrid tbody,
        .activityGrid tr,
        .activityGrid td {
            display: block;
            width: 100%;
        }

            /* Hide header row (title row) */
            .activityGrid thead,
            .activityGrid th {
                display: none !important;
            }

            .activityGrid tr {
                margin-bottom: 12px;
                border: 1px solid #ddd;
                border-radius: 6px;
                background: #fff;
                padding: 8px;
            }

            .activityGrid td {
                position: relative;
                padding-left: 50%;
                border: none;
                border-bottom: 1px solid #eee;
            }

                .activityGrid td:last-child {
                    border-bottom: none;
                }

                .activityGrid td::before {
                    content: attr(data-label);
                    position: absolute;
                    left: 10px;
                    top: 7px;
                    font-weight: bold;
                    color: #046a8c;
                    font-size: 12px;
                }
}