/* MAIN GRID */
.staff-grid {
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

/* HEADER */
.staff-header th {
    background: #1a2b6d;
    color: #fff;
    padding: 12px;
    text-align: left;
    font-weight: 600;
}

/* ROWS */
.staff-row td,
.staff-alt td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
}

/* ALTERNATE ROW */
.staff-alt {
    background: #f7f7f7;
}

/* HOVER EFFECT */
.staff-grid tr:hover td {
    background: #eef2ff;
}

/* PHOTO FIXED SIZE */
.staff-photo {
    width: 70px;
    height: 80px;
    object-fit: cover; /* IMPORTANT */
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* PROFILE LINK */
.profile-link {
    color: #1a2b6d;
    text-decoration: none;
    font-weight: 500;
}

    .profile-link:hover {
        text-decoration: underline;
    }

/* PAGER */
.staff-pager {
    text-align: center;
    padding: 10px;
}
/* ================================
   MOBILE RESPONSIVE STAFF TABLE
================================ */
/* ==========================================
   STAFF GRID – MOBILE RESPONSIVE CARD VIEW
========================================== */
@media (max-width: 768px) {

    /* FORCE HIDE HEADER */
    .staff-grid thead,
    .staff-grid th,
    .staff-header {
        display: none !important;
    }

    /* Card layout */
    .staff-grid tr {
        display: block;
        background: #ffffff;
        margin-bottom: 20px;
        padding: 14px;
        border-radius: 12px;
        border: 1px solid #dfe3f1;
        box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }

    /* Each row */
    .staff-grid td {
        display: grid;
        grid-template-columns: 38% 62%;
        align-items: center;
        padding: 10px 8px;
        border-radius: 6px;
        margin-bottom: 8px;
        background: #f5f7ff; /* ROW BACKGROUND */
        font-size: 15px; /* BIGGER TEXT */
    }

        /* Label */
        .staff-grid td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #1a2b6d;
            font-size: 14px;
        }

    /* Labels mapping */
    .col-serial::before {
        content: "S.No";
    }

    .col-name::before {
        content: "Name";
    }

    .col-designation::before {
        content: "Designation";
    }

    .col-email::before {
        content: "Email";
    }

    .col-mobile::before {
        content: "Mobile";
    }

    .col-profile::before {
        content: "Profile";
    }

    .col-photo::before {
        content: "Photo";
    }

    /* Photo row */
    .col-photo {
        grid-template-columns: 100%;
        text-align: center;
        background: #fff;
        margin-top: 12px;
        padding: 12px 0;
    }

        .col-photo::before {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
        }

    .staff-photo {
        width: 80px;
        height: 90px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #ccc;
        background: #fff;
    }

    /* Profile link */
    .profile-link {
        display: inline-block;
        background: #1a2b6d;
        color: #fff;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 14px;
        text-decoration: none;
    }

        .profile-link:hover {
            background: #0d1a3c;
        }

    /* Email wrap */
    .staff-grid a {
        word-break: break-all;
        color: #1a2b6d;
        font-size: 14px;
    }
}
.profile-link {
    display: inline-block;
    padding: 8px 14px;
    background: #1a2b6d;
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

    .profile-link:hover {
        background: #0f1e52;
        color: #fff;
    }
.staff-grid a {
    color: #0a58ff;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .staff-grid a {
        text-decoration: none;
        font-size: 15px;
    }
}
.staff-grid-wrapper {
    width: 80%;
    max-width: 1200px;
    margin: 30px auto;
}

/* Tablet */
@media (max-width: 992px) {
    .staff-grid-wrapper {
        width: 90%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .staff-grid-wrapper {
        width: 95%;
    }
}