/* =========================================================
   BLOOMSERVE EMPLOYEE PORTAL
   PREMIUM DASHBOARD — PART 1
========================================================= */

/* ---------- RESET ---------- */

.bs-portal,
.bs-portal * {
    box-sizing: border-box;
}

.bs-portal {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 32px 40px 50px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    color: #1f2937;
}

/* ---------- HEADER ---------- */

.bs-header {
    width: 100%;
    min-height: 200px;

    display: grid;
    grid-template-columns: 1fr 1.8fr auto;
    align-items: center;
    gap: 40px;

    padding: 34px 38px;

    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 28px;

    box-shadow: 0 12px 35px rgba(20, 35, 60, 0.07);
}

/* ---------- LOGO ---------- */

.bs-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-width: 0;
}

.bs-logo img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---------- USER AREA ---------- */

.bs-user {
    min-width: 0;
}

.bs-user h2 {
    margin: 0 0 10px;

    font-size: 38px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -1.2px;

    color: #202b42;
}

.bs-user p {
    margin: 0;

    font-size: 17px;
    line-height: 1.5;
    font-weight: 400;

    color: #73839e;
}

/* ---------- HEADER ACTIONS ---------- */

.bs-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.bs-actions a {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e3e8ef;
    border-radius: 18px;

    background: #ffffff;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.bs-actions a:hover {
    transform: translateY(-2px);
    border-color: #d6dfe9;
    box-shadow: 0 8px 20px rgba(20, 35, 60, 0.08);
}

.bs-actions img {
    width: 25px;
    height: 25px;

    display: block;
    object-fit: contain;
}

/* ---------- DASHBOARD GRID ---------- */

.bs-dashboard-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-top: 28px;
}

/* Attendance must occupy full row */

.bs-dashboard-grid .bs-attendance-widget {
    grid-column: 1 / -1;
    width: 100%;
}

/* =========================================================
   LIGHT PREMIUM DASHBOARD CARDS
========================================================= */

.bs-dashboard-card {
    position: relative;

    min-height: 175px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e8edf3;
    border-radius: 16px;

    text-decoration: none;

    box-shadow: none;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bs-dashboard-card:hover {
    transform: translateY(-2px);

    border-color: #d7e2ec;

    box-shadow: 0 8px 22px rgba(20, 35, 60, 0.06);
}


/* ---------- CARD ICON ---------- */

.bs-card-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #f4f8fb;
}

.bs-card-icon img {
    width: 24px;
    height: 24px;

    display: block;
    object-fit: contain;
}


/* ---------- CARD CONTENT ---------- */

.bs-card-content {
    margin-top: 20px;
}

.bs-card-content h3 {
    margin: 0;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;

    color: #202b42;
}

.bs-card-content p {
    margin: 6px 0 0;

    font-size: 14px;
    line-height: 1.4;

    color: #7b8aa3;
}


/* ---------- CARD ARROW ---------- */

.bs-card-arrow {
    position: absolute;

    right: 20px;
    bottom: 20px;

    font-size: 18px;

    color: #0b86d5;

    opacity: 0;

    transform: translateX(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.bs-dashboard-card:hover .bs-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- CARD ARROW ---------- */

.bs-card-arrow {
    position: absolute;

    right: 24px;
    bottom: 22px;

    font-size: 20px;
    line-height: 1;

    color: #0b86d5;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.bs-dashboard-card:hover .bs-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   PREMIUM DASHBOARD — PART 2
   RESPONSIVE + MOBILE
========================================================= */

/* ---------- LARGE SCREENS ---------- */

@media (min-width: 1600px) {

    .bs-portal {
        max-width: 1580px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .bs-dashboard-card {
        min-height: 205px;
    }

}


/* ---------- TABLET ---------- */

@media (max-width: 1100px) {

    .bs-portal {
        padding: 25px 25px 40px;
    }

    .bs-header {
        grid-template-columns: 1fr 1.5fr auto;
        gap: 25px;
        padding: 28px;
        min-height: 175px;
    }

    .bs-logo img {
        width: 180px;
    }

    .bs-user h2 {
        font-size: 31px;
    }

    .bs-user p {
        font-size: 15px;
    }

    .bs-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

}


/* ---------- SMALL TABLET ---------- */

@media (max-width: 768px) {

    .bs-portal {
        padding: 18px 16px 30px;
    }

    .bs-header {
        min-height: auto;

        grid-template-columns: 1fr auto;
        gap: 20px;

        padding: 25px 22px;

        border-radius: 22px;
    }

    .bs-logo {
        grid-column: 1 / -1;
    }

    .bs-logo img {
        width: 185px;
    }

    .bs-user {
        grid-column: 1;
    }

    .bs-user h2 {
        font-size: 27px;
        letter-spacing: -0.7px;
    }

    .bs-user p {
        font-size: 14px;
    }

    .bs-actions {
        grid-column: 2;
        grid-row: 2;

        align-self: center;
    }

    .bs-actions a {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .bs-actions img {
        width: 21px;
        height: 21px;
    }

    .bs-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 20px;
    }

    .bs-dashboard-card {
        min-height: 165px;
        padding: 22px;
        border-radius: 20px;
    }

    .bs-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .bs-card-icon img {
        width: 25px;
        height: 25px;
    }

    .bs-card-content {
        margin-top: 18px;
    }

    .bs-card-content h3 {
        font-size: 18px;
    }

    .bs-card-content p {
        font-size: 13px;
    }

}


/* ---------- MOBILE ---------- */

@media (max-width: 520px) {

    .bs-portal {
        padding: 12px 12px 25px;
    }

    .bs-header {
        display: grid;

        grid-template-columns: 1fr auto;

        padding: 20px 18px;

        border-radius: 19px;

        gap: 16px;
    }

    .bs-logo {
        grid-column: 1 / -1;
    }

    .bs-logo img {
        width: 155px;
    }

    .bs-user h2 {
        font-size: 23px;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .bs-user p {
        font-size: 13px;
        line-height: 1.4;
    }

    .bs-actions {
        gap: 8px;
    }

    .bs-actions a {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .bs-actions img {
        width: 19px;
        height: 19px;
    }

    .bs-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        margin-top: 14px;
    }

    .bs-dashboard-card {
        min-height: 145px;

        padding: 17px;

        border-radius: 17px;
    }

    .bs-card-icon {
        width: 43px;
        height: 43px;
        border-radius: 12px;
    }

    .bs-card-icon img {
        width: 22px;
        height: 22px;
    }

    .bs-card-content {
        margin-top: 13px;
    }

    .bs-card-content h3 {
        font-size: 16px;
        line-height: 1.2;
    }

    .bs-card-content p {
        font-size: 12px;
        margin-top: 5px;
    }

    .bs-card-arrow {
        display: none;
    }

}


/* ---------- VERY SMALL MOBILE ---------- */

@media (max-width: 360px) {

    .bs-portal {
        padding-left: 9px;
        padding-right: 9px;
    }

    .bs-header {
        padding: 17px 14px;
    }

    .bs-logo img {
        width: 140px;
    }

    .bs-user h2 {
        font-size: 20px;
    }

    .bs-user p {
        font-size: 12px;
    }

    .bs-actions a {
        width: 38px;
        height: 38px;
    }

    .bs-dashboard-grid {
        gap: 8px;
    }

    .bs-dashboard-card {
        min-height: 135px;
        padding: 14px;
    }

    .bs-card-content h3 {
        font-size: 15px;
    }

}

/* =========================================================
   BLOOMSERVE COLOR ACCENTS
   DESIGN / LAYOUT UNCHANGED
========================================================= */

/* Card icon colors */

.bs-dashboard-card:nth-child(1) .bs-card-icon {
    background: #eaf6fd;
}

.bs-dashboard-card:nth-child(1) .bs-card-icon img {
    filter: none;
}


.bs-dashboard-card:nth-child(2) .bs-card-icon {
    background: #f2f8e8;
}


.bs-dashboard-card:nth-child(3) .bs-card-icon {
    background: #eaf6fd;
}


.bs-dashboard-card:nth-child(4) .bs-card-icon {
    background: #f2f8e8;
}


.bs-dashboard-card:nth-child(5) .bs-card-icon {
    background: #eef7fc;
}


.bs-dashboard-card:nth-child(6) .bs-card-icon {
    background: #f4f9ea;
}


.bs-dashboard-card:nth-child(7) .bs-card-icon {
    background: #eaf6fd;
}


.bs-dashboard-card:nth-child(8) .bs-card-icon {
    background: #f2f8e8;
}


/* ---------- TOP COLOR ACCENT ---------- */

.bs-dashboard-card:nth-child(1) {
    border-top: 3px solid #0b86d5;
}

.bs-dashboard-card:nth-child(2) {
    border-top: 3px solid #9ac03c;
}

.bs-dashboard-card:nth-child(3) {
    border-top: 3px solid #0b86d5;
}

.bs-dashboard-card:nth-child(4) {
    border-top: 3px solid #9ac03c;
}

.bs-dashboard-card:nth-child(5) {
    border-top: 3px solid #0b86d5;
}

.bs-dashboard-card:nth-child(6) {
    border-top: 3px solid #9ac03c;
}

.bs-dashboard-card:nth-child(7) {
    border-top: 3px solid #0b86d5;
}

.bs-dashboard-card:nth-child(8) {
    border-top: 3px solid #9ac03c;
}


/* ---------- CARD TITLE ACCENTS ---------- */

.bs-dashboard-card:nth-child(1) .bs-card-content h3,
.bs-dashboard-card:nth-child(3) .bs-card-content h3,
.bs-dashboard-card:nth-child(5) .bs-card-content h3,
.bs-dashboard-card:nth-child(7) .bs-card-content h3 {
    color: #0b86d5;
}

.bs-dashboard-card:nth-child(2) .bs-card-content h3,
.bs-dashboard-card:nth-child(4) .bs-card-content h3,
.bs-dashboard-card:nth-child(6) .bs-card-content h3,
.bs-dashboard-card:nth-child(8) .bs-card-content h3 {
    color: #78a51f;
}


/* ---------- HOVER ---------- */

.bs-dashboard-card:nth-child(odd):hover {
    border-color: #0b86d5;
}

.bs-dashboard-card:nth-child(even):hover {
    border-color: #9ac03c;
}


/* ---------- HEADER SUBTLE BRAND LINE ---------- */

.bs-header {
    position: relative;
    overflow: hidden;
}

.bs-header::after {
    content: "";
    position: absolute;

    left: 38px;
    right: 38px;
    bottom: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #0b86d5 0%,
        #0b86d5 55%,
        #9ac03c 55%,
        #9ac03c 100%
    );

    border-radius: 10px;
}

/* =====================================================
   ATTENDANCE WIDGET
===================================================== */

.bs-attendance-widget {
    width: 100%;
    margin: 28px 0 32px;
    padding: 22px 26px;
    background: #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 8px 25px rgba(20, 40, 80, 0.06);
    
    grid-column: 1 / -1;
}

.bs-attendance-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bs-attendance-label {
    font-size: 13px;
    font-weight: 700;
    color: #718096;
    letter-spacing: .5px;
}

#bs-attendance-status {
    font-size: 18px;
    font-weight: 800;
    color: #1d2942;
}

#bs-attendance-time {
    font-size: 14px;
    color: #718096;
}

.bs-attendance-button {
    border: 0;
    min-width: 180px;
    height: 58px;
    padding: 0 24px;
    border-radius: 14px;
    background: #0b86d5;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    box-shadow:
        0 5px 0 #0869a8,
        0 9px 18px rgba(11, 134, 213, 0.22);

    transition: all .12s ease;
    transform: translateY(0);
}

.bs-attendance-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 0 #0869a8,
        0 12px 22px rgba(11, 134, 213, 0.25);
}

.bs-attendance-button:active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 #0869a8,
        0 3px 8px rgba(11, 134, 213, 0.18);
}

.bs-attendance-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(11, 134, 213, .22);
}

.bs-attendance-icon {
    font-size: 17px;
}

.bs-attendance-button-text {
    white-space: nowrap;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .bs-attendance-widget {
        margin: 18px 0 22px;
        padding: 18px;
        border-radius: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .bs-attendance-info {
        gap: 7px;
        flex-direction: column;
        align-items: flex-start;
    }

    .bs-attendance-label {
        font-size: 11px;
    }

    #bs-attendance-status {
        font-size: 17px;
    }

    #bs-attendance-time {
        font-size: 13px;
    }

    .bs-attendance-button {
        width: 100%;
        height: 50px;
    }
}

/* =====================================================
   MOBILE DASHBOARD HEADER
===================================================== */

@media (max-width: 600px) {

    .bs-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .bs-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 28px 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #edf0f4;
    }

    .bs-logo img {
        width: 230px;
        max-width: 75%;
        height: auto;
    }

    .bs-user {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 28px 20px 22px;
        box-sizing: border-box;
    }

    .bs-welcome {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .bs-dashboard-photo {
        flex: 0 0 76px;
        width: 76px;
        height: 76px;
    }

    .bs-welcome-text {
        min-width: 0;
        flex: 1;
    }

    .bs-welcome-text h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.2;
        white-space: normal;
        word-break: normal;
    }

    .bs-welcome-text p {
        margin: 7px 0 0;
        font-size: 13px;
        line-height: 1.35;
        white-space: normal;
    }

    .bs-actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .bs-notification,
    .bs-logout {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bs-notification img,
    .bs-logout img {
        width: 24px;
        height: 24px;
    }

}


/* =====================================================
   ATTENDANCE WIDGET
===================================================== */

.bs-attendance-widget {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}


/* =====================================================
   MOBILE ATTENDANCE
===================================================== */

@media (max-width: 600px) {

    .bs-attendance-widget {
        margin: 18px 0 24px !important;
        padding: 22px 18px !important;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        box-sizing: border-box;
    }

    .bs-attendance-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    #bs-attendance-status {
        font-size: 20px;
        line-height: 1.25;
    }

    .bs-attendance-button {
        width: 100%;
        min-width: 0;
        height: 54px;
        border-radius: 14px;
    }

}

/* Attendance full-width section */
.bs-attendance-widget {
    grid-column: 1 / -1;
    width: 100%;
}

/* Attendance full row */
.bs-attendance-widget {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.bs-attendance-in {
    color: #6fae22;
    font-weight: 800;
}

.bs-attendance-out {
    color: #e53935;
    font-weight: 800;
}

.bs-attendance-working {
    color: #7651b8;
    font-weight: 800;
}

.bs-attendance-separator {
    color: #0b86d5;
    font-weight: 700;
    margin: 0 12px;
}

/* ==========================================
   DASHBOARD HEADER — PREMIUM COMPACT
========================================== */

.bs-dashboard-header{
    width:100%;
    margin-bottom:28px;
}

.bs-dashboard-header .bs-user{
    width:100%;
    min-height:150px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:28px 30px;

    background:#ffffff;

    border:1px solid #e8edf3;
    border-radius:24px;

    box-shadow:0 8px 30px rgba(15,23,42,.05);

    box-sizing:border-box;
}


/* Welcome area */

.bs-dashboard-header .bs-welcome{
    display:flex;
    align-items:center;
    gap:20px;
    min-width:0;
}


.bs-dashboard-header .bs-dashboard-photo{
    width:78px;
    height:78px;

    border-radius:50%;

    overflow:hidden;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef6ff;
    text-decoration:none;
}


.bs-dashboard-header .bs-dashboard-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.bs-dashboard-header .bs-dashboard-photo-placeholder{
    color:#0b86d5;
    font-size:28px;
    font-weight:700;
}


/* Greeting */

.bs-dashboard-header .bs-welcome-text h2{
    margin:0;

    font-size:32px;
    line-height:1.15;

    font-weight:800;

    color:#1f2937;
}


.bs-dashboard-header .bs-desktop-name{
    color:#1f2937;
}


.bs-dashboard-header .bs-welcome-text p{
    margin:8px 0 0;

    font-size:16px;
    line-height:1.5;

    color:#64748b;
}


/* Actions */

.bs-dashboard-header .bs-actions{
    display:flex;
    align-items:center;
    gap:14px;

    flex-shrink:0;
}


.bs-dashboard-header .bs-actions a{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:#ffffff;

    border:1px solid #e5eaf0;

    transition:all .2s ease;
}


.bs-dashboard-header .bs-actions a:hover{
    background:#f4f9ff;
    border-color:#cfe8fa;
    transform:translateY(-2px);
}


.bs-dashboard-header .bs-actions img{
    width:23px;
    height:23px;
    display:block;
}


/* ==========================================
   DESKTOP CONTENT ALIGNMENT
========================================== */

.bs-content{
    padding:28px 32px;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:991px){

    .bs-dashboard-header .bs-user{
        padding:22px;
        min-height:auto;
    }

    .bs-dashboard-header .bs-welcome-text h2{
        font-size:26px;
    }

}


@media(max-width:600px){

    .bs-dashboard-header .bs-user{
        padding:20px;
        border-radius:20px;
    }

    .bs-dashboard-header .bs-dashboard-photo{
        width:60px;
        height:60px;
    }

    .bs-dashboard-header .bs-welcome{
        gap:14px;
    }

    .bs-dashboard-header .bs-welcome-text h2{
        font-size:21px;
    }

    .bs-dashboard-header .bs-welcome-text p{
        font-size:13px;
    }

    .bs-dashboard-header .bs-actions{
        gap:8px;
    }

    .bs-dashboard-header .bs-actions a{
        width:44px;
        height:44px;
        border-radius:13px;
    }

}

/* =====================================================
   BLOOMSERVE DASHBOARD — LIGHT & CLEAN (DESKTOP)
===================================================== */

/* 1. FOUR DASHBOARD CARDS */
.bs-dashboard-grid.bs-daily-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 24px 0 0;
    box-sizing: border-box;
}

.bs-dashboard-grid.bs-daily-actions .bs-dashboard-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 190px;
    height: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #edf2f7 !important;
    border-radius: 20px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bs-dashboard-grid.bs-daily-actions .bs-dashboard-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: none;
    box-shadow: none;
}

/* Card Icons */
.bs-dashboard-grid.bs-daily-actions .bs-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f5f9 !important;
    flex-shrink: 0;
}

.bs-dashboard-grid.bs-daily-actions .bs-card-icon img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    display: block;
}

/* Card Content & Typography */
.bs-dashboard-grid.bs-daily-actions .bs-card-content {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 20px !important;
    box-sizing: border-box !important;
}

.bs-dashboard-grid.bs-daily-actions .bs-card-content h3 {
    margin: 0 0 6px !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.bs-dashboard-grid.bs-daily-actions .bs-card-content p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: #64748b;
}

/* 2. RESPONSIVE TABLET */
@media(max-width: 1200px) {
    .bs-dashboard-grid.bs-daily-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* =====================================================
   BLOOMSERVE HRMS — MOBILE APP EXPERIENCE
   MOBILE ONLY — DESKTOP UNCHANGED
===================================================== */

@media (max-width: 767px){

    /* =================================================
       1. PREVENT HORIZONTAL SCROLL
    ================================================= */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        -webkit-tap-highlight-color:transparent;
    }


    /* =================================================
       2. HIDE DESKTOP SIDEBAR
    ================================================= */

    .bs-sidebar{
        display:none !important;
    }


    /* =================================================
       3. HIDE DESKTOP DASHBOARD HEADER
    ================================================= */

    .bs-dashboard-header{
        display:none !important;
    }


    /* =================================================
       4. MOBILE HEADER
    ================================================= */

    .bs-mobile-header{
        display:block !important;

        width:100%;

        margin:0;
        padding:0;

        background:#ffffff;

        border-bottom:1px solid #edf1f5;

        box-sizing:border-box;

        position:relative;
        z-index:100;
    }


    /* TOP BAR */

    .bs-mobile-topbar{

        min-height:68px;

        padding:
            10px 16px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        box-sizing:border-box;
    }


    /* MOBILE LOGO */

    .bs-mobile-logo{

        display:flex;

        align-items:center;

        min-width:0;
    }

    .bs-mobile-logo img{

        display:block;

        width:auto;

        max-width:145px;

        max-height:38px;

        object-fit:contain;
    }


    /* ACTIONS */

    .bs-mobile-actions{

        display:flex;

        align-items:center;

        gap:8px;

        flex-shrink:0;
    }


    .bs-mobile-icon,
    .bs-mobile-avatar{

        width:44px;
        height:44px;

        display:flex;

        align-items:center;
        justify-content:center;

        border-radius:14px;

        background:#ffffff;

        border:1px solid #e5eaf0;

        box-sizing:border-box;

        text-decoration:none;

        flex-shrink:0;
    }


    .bs-mobile-icon img{

        width:22px;
        height:22px;

        display:block;

        object-fit:contain;

        filter:none !important;

        opacity:1 !important;
    }


    .bs-mobile-avatar{

        overflow:hidden;

        border-radius:50%;
    }


    .bs-mobile-avatar img{

        width:100%;
        height:100%;

        object-fit:cover;

        display:block;
    }


    /* NO HOVER COLOUR CHANGE */

    .bs-mobile-icon:hover,
    .bs-mobile-icon:focus,
    .bs-mobile-icon:active,
    .bs-mobile-avatar:hover,
    .bs-mobile-avatar:focus,
    .bs-mobile-avatar:active{

        background:#ffffff !important;

        border-color:#e5eaf0 !important;

        transform:none !important;

        box-shadow:none !important;
    }


    /* =================================================
       5. MOBILE GREETING
    ================================================= */

    .bs-mobile-greeting-bar{

        display:block;

        padding:

            8px 20px 20px;

        background:#ffffff;

        box-sizing:border-box;
    }


    .bs-mobile-greeting-bar h2{

        margin:0;

        font-size:28px;

        line-height:1.15;

        font-weight:800;

        color:#17233a;

    }


    .bs-mobile-greeting-bar h2::first-line{

        color:#0b86d5;
    }


    /* =================================================
       6. MAIN DASHBOARD AREA
    ================================================= */

    .bs-layout{

        display:block !important;

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        box-sizing:border-box;
    }


    .bs-content{

        width:100% !important;

        max-width:100% !important;

        margin:0 !important;

        padding:16px !important;

        box-sizing:border-box;
    }


    /* =================================================
       7. DASHBOARD CONTENT
    ================================================= */

    .bs-dashboard{

        width:100%;

        max-width:100%;

        margin:0;

        padding:0;

        box-sizing:border-box;
    }


    /* =================================================
       8. ATTENDANCE WIDGET
    ================================================= */

    .bs-attendance-widget,
    .bs-attendance-card{

        width:100% !important;

        max-width:100% !important;

        margin:0 0 18px !important;

        padding:22px 18px !important;

        border-radius:22px !important;

        box-sizing:border-box;

        overflow:hidden;
    }


    /* Attendance content */

    .bs-attendance-widget > *,
    .bs-attendance-card > *{

        max-width:100%;

        box-sizing:border-box;
    }


    /* =================================================
       9. ATTENDANCE ROW
    ================================================= */

    .bs-attendance-header,
    .bs-attendance-top{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        width:100%;
    }


    /* Attendance title */

    .bs-attendance-title{

        font-size:15px;

        line-height:1.3;

        letter-spacing:.3px;
    }


    /* Attendance status */

    .bs-attendance-status{

        font-size:25px;

        line-height:1.2;

        font-weight:800;
    }


    /* Punch button */

    .bs-punch-button,
    .bs-punch-btn{

        width:100% !important;

        min-height:58px;

        margin-top:14px;

        border-radius:17px !important;

        box-sizing:border-box;
    }


    /* =================================================
       10. FOUR DASHBOARD CARDS
    ================================================= */

    .bs-dashboard-grid.bs-daily-actions{

        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;

        max-width:100% !important;

        gap:16px !important;

        margin:0 !important;

        padding:0 !important;

        box-sizing:border-box;
    }


    /* =================================================
       11. CARD
    ================================================= */

    .bs-dashboard-card{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        min-height:190px !important;

        height:auto !important;

        padding:24px 22px !important;

        margin:0 !important;

        border-radius:22px !important;

        box-sizing:border-box;

        overflow:hidden;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;
    }


    /* =================================================
       12. CARD ICON
    ================================================= */

    .bs-card-icon{

        width:58px !important;

        height:58px !important;

        min-width:58px;

        border-radius:16px;

        flex-shrink:0;
    }


    .bs-card-icon img{

        width:29px;

        height:29px;

        max-width:29px;

        object-fit:contain;
    }


    /* =================================================
       13. CARD CONTENT
    ================================================= */

    .bs-card-content{

        width:100%;

        max-width:100%;

        min-width:0;

        margin-top:22px !important;

        box-sizing:border-box;
    }


    .bs-card-content h3{

        margin:0 0 7px !important;

        max-width:100%;

        font-size:27px !important;

        line-height:1.2 !important;

        font-weight:800;

        white-space:normal;

        overflow-wrap:anywhere;

        word-break:normal;
    }


    .bs-card-content p{

        margin:0 !important;

        max-width:100%;

        font-size:16px !important;

        line-height:1.5 !important;

        color:#7183a0;

        white-space:normal;

        overflow-wrap:anywhere;
    }


    /* =================================================
       14. CARD HOVER DISABLED
       Better for mobile/app behaviour
    ================================================= */

    .bs-dashboard-card:hover{

        transform:none !important;

        box-shadow:none !important;
    }


    .bs-dashboard-card:active{

        transform:scale(.985);

        transition:transform .1s ease;
    }


    /* =================================================
       15. LOGOUT
       Desktop sidebar logout should not appear
    ================================================= */

    .bs-sidebar-footer{

        display:none !important;
    }


    /* =================================================
       16. REMOVE EXCESSIVE DASHBOARD SPACING
    ================================================= */

    .bs-dashboard-grid{

        margin-top:16px !important;
    }


    /* =================================================
       17. MOBILE SAFE AREA
    ================================================= */

    .bs-mobile-header{

        padding-top:env(safe-area-inset-top);
    }


    .bs-content{

        padding-bottom:
            calc(24px + env(safe-area-inset-bottom)) !important;
    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width:380px){

    .bs-mobile-topbar{

        padding-left:12px;
        padding-right:12px;
    }


    .bs-mobile-icon,
    .bs-mobile-avatar{

        width:40px;
        height:40px;

        border-radius:12px;
    }


    .bs-mobile-actions{

        gap:6px;
    }


    .bs-mobile-greeting-bar{

        padding:
            6px 16px 16px;
    }


    .bs-mobile-greeting-bar h2{

        font-size:25px;
    }


    .bs-content{

        padding-left:12px !important;
        padding-right:12px !important;
    }


    .bs-dashboard-card{

        min-height:180px !important;

        padding:22px 20px !important;
    }


    .bs-card-content h3{

        font-size:24px !important;
    }
}

/* =====================================================
   MOBILE — 2 x 2 DASHBOARD CARDS
===================================================== */

@media (max-width: 767px){

    .bs-dashboard-grid.bs-daily-actions{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:14px !important;
        width:100% !important;
        margin:0 !important;
    }

    .bs-dashboard-card{
        min-width:0 !important;
        width:100% !important;
        min-height:175px !important;
        padding:20px 16px !important;
        border-radius:20px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .bs-card-icon{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
        border-radius:15px !important;
    }

    .bs-card-icon img{
        width:26px !important;
        height:26px !important;
    }

    .bs-card-content{
        width:100% !important;
        min-width:0 !important;
        margin-top:18px !important;
    }

    .bs-card-content h3{
        font-size:21px !important;
        line-height:1.2 !important;
        margin:0 0 6px !important;
        white-space:normal !important;
        overflow-wrap:break-word !important;
    }

    .bs-card-content p{
        font-size:14px !important;
        line-height:1.4 !important;
        margin:0 !important;
        white-space:normal !important;
        overflow-wrap:break-word !important;
    }

}


/* Small phones */

@media (max-width:380px){

    .bs-dashboard-grid.bs-daily-actions{
        gap:12px !important;
    }

    .bs-dashboard-card{
        min-height:165px !important;
        padding:18px 14px !important;
    }

    .bs-card-icon{
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
    }

    .bs-card-content h3{
        font-size:19px !important;
    }

    .bs-card-content p{
        font-size:13px !important;
    }
}

/* =====================================================
   HEADER POLISH — SEAMLESS & BORDERLESS (GEMINI STYLE)
===================================================== */

/* 1. Header ko card dabbe se seamless strip mein convert karein */
.bs-dashboard-header {
    margin-bottom: 28px !important;
}

.bs-dashboard-header .bs-user {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 20px 0 !important;
    min-height: auto !important;
    border-bottom: 1px solid #f1f5f9 !important; /* Single subtle clean separator */
    border-radius: 0 !important;
}

/* 2. Profile Photo Size & Modern Rounded Look */
.bs-dashboard-header .bs-dashboard-photo {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* 3. Greeting Typography */
.bs-dashboard-header .bs-welcome-text h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.6px !important;
    margin: 0 !important;
}

.bs-dashboard-header .bs-welcome-text h2 span[style*="#0b86d5"] {
    color: #0284c7 !important;
}

.bs-dashboard-header .bs-welcome-text p {
    font-size: 14px !important;
    color: #64748b !important;
    margin-top: 4px !important;
}

/* 4. Notification & Logout Circular Pill Buttons */
.bs-dashboard-header .bs-actions {
    gap: 10px !important;
}

.bs-dashboard-header .bs-actions a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.bs-dashboard-header .bs-actions a:hover {
    background: #eef2f6 !important;
    border-color: #cbd5e1 !important;
}

.bs-dashboard-header .bs-actions a img {
    width: 19px !important;
    height: 19px !important;
    opacity: 0.75 !important;
}

/* =====================================================
   ATTENDANCE WIDGET — SLEEK & AIRY STRIP (GEMINI STYLE)
===================================================== */

.bs-attendance-widget {
    background: #f8fafc !important; /* Soft ultra-light surface */
    border: 1px solid #edf2f7 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    padding: 16px 24px !important;
    margin: 0 0 28px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Label & Status Clean Typography */
.bs-attendance-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
}

#bs-attendance-status {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-left: 6px !important;
}

/* Timings Badges (In / Out / Working) */
.bs-attendance-in, 
.bs-attendance-out, 
.bs-attendance-working {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Sleek Pill Action Button */
.bs-attendance-button {
    height: 44px !important;
    min-width: 140px !important;
    border-radius: 9999px !important; /* Pure pill shape */
    background: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 22px !important;
    transition: all 0.15s ease !important;
    border: none !important;
}

.bs-attendance-button:hover {
    background: #0369a1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28) !important;
}

/* Completed Status Button */
.bs-attendance-button:disabled,
.bs-attendance-button[disabled] {
    background: #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* =====================================================
   ATTENDANCE PUNCH BUTTON — SQUARISH MODERN FEEL
===================================================== */

/* Base Punch Button (Modern Squarish with rounded corners) */
.bs-attendance-button {
    min-width: 155px !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: 12px !important; /* Professional squarish curve */
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    border: 1px solid rgba(2, 132, 199, 0.2) !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
}

.bs-attendance-button:hover {
    background: #0369a1 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-1px) !important;
}

.bs-attendance-button:active {
    transform: translateY(1px) !important;
}

/* Punch Icon Styling */
.bs-attendance-button .bs-attendance-icon {
    font-size: 16px !important;
}

/* COMPLETED STATE — Soft Emerald / Mint Badge Look */
.bs-attendance-button:disabled,
.bs-attendance-button[disabled],
.bs-attendance-button.completed {
    background: #ecfdf5 !important; /* Soft light mint */
    color: #059669 !important; /* Emerald text */
    border: 1px solid #a7f3d0 !important;
    box-shadow: none !important;
    cursor: default !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    transform: none !important;
}

/* =====================================================
   FORCE MOBILE DRAWER DISPLAY OVERRIDE
===================================================== */
@media (max-width: 991px) {
    /* Dashboard.css ke display:none ko cancel karein */
    .bs-sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 99999 !important; /* Overlay se oopar */
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Menu open hone par drawer show karein */
    body.bs-mobile-menu-open .bs-sidebar {
        left: 0 !important;
        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.2) !important;
    }

    .bs-mobile-menu-overlay {
        z-index: 99998 !important;
    }
}

/* =====================================================
   MOBILE ZERO-SCROLL APP EXPERIENCE
===================================================== */
@media (max-width: 767px) {
    /* Row 1: Logo & Menu */
    .bs-mobile-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .bs-mobile-logo img {
        height: 24px !important;
        width: auto !important;
    }

    .bs-mobile-menu-toggle {
        width: 36px !important;
        height: 36px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }

    /* Row 2: User Bar */
    .bs-mobile-userbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 16px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #edf2f7 !important;
    }

    .bs-mobile-user-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .bs-mobile-avatar {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #e0f2fe !important;
        color: #0284c7 !important;
        font-weight: 700 !important;
        font-size: 13px !important;
    }

    .bs-mobile-welcome-text {
        font-size: 14px !important;
        color: #1e293b !important;
    }

    .bs-small-hello {
        color: #0284c7 !important;
        font-weight: 600 !important;
        margin-right: 3px !important;
    }

    .bs-mobile-logout-link {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #ef4444 !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
        background: #fef2f2 !important;
    }

    /* Attendance Widget Compact */
    .bs-attendance-widget {
        margin: 12px 0 14px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }

    .bs-attendance-label {
        font-size: 10px !important;
    }

    #bs-attendance-status {
        font-size: 14px !important;
    }

    .bs-attendance-button {
        height: 38px !important;
        min-width: 120px !important;
        font-size: 12.5px !important;
        border-radius: 10px !important;
    }

    /* 4 App Grid Cards (iOS/Android Style Compact 2x2) */
    .bs-dashboard-grid.bs-daily-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .bs-dashboard-grid.bs-daily-actions .bs-dashboard-card {
        min-height: 95px !important;
        height: auto !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        background: #ffffff !important;
        border: 1px solid #edf2f7 !important;
    }

    .bs-dashboard-grid.bs-daily-actions .bs-card-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 8px !important;
    }

    .bs-dashboard-grid.bs-daily-actions .bs-card-icon img {
        width: 18px !important;
        height: 18px !important;
    }

    .bs-dashboard-grid.bs-daily-actions .bs-card-content {
        margin-top: 8px !important;
    }

    .bs-dashboard-grid.bs-daily-actions .bs-card-content h3 {
        font-size: 14px !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }

    .bs-dashboard-grid.bs-daily-actions .bs-card-content p {
        display: none !important; /* Subtitle hide karne se app icon look milega aur height choti ho jayegi */
    }
}

/* =====================================================
   ZOHO / MICROSOFT STYLE COMPACT ATTENDANCE REPORT
===================================================== */

/* Page Heading */
.bs-content h2,
.bs-portal h2,
.bs-portal-header h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 20px !important;
}

/* 1. Sleek Filter Toolbar (Single Row) */
form[action*="attendance"],
.bs-attendance-filter,
.bs-content form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    padding: 14px 20px !important;
    border-radius: 16px !important;
    border: 1px solid #edf2f7 !important;
    margin-bottom: 22px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

form[action*="attendance"] label,
.bs-content form label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

form[action*="attendance"] input[type="date"],
.bs-content form input[type="date"],
form[action*="attendance"] input[type="text"] {
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    font-size: 13px !important;
    color: #1e293b !important;
    outline: none !important;
    transition: all 0.15s ease !important;
}

form[action*="attendance"] input[type="date"]:focus,
.bs-content form input[type="date"]:focus {
    border-color: #0284c7 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* Filter Submit Button */
form[action*="attendance"] button[type="submit"],
form[action*="attendance"] input[type="submit"],
.bs-content form button,
.bs-view-btn {
    height: 38px !important;
    padding: 0 18px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2) !important;
}

form[action*="attendance"] button[type="submit"]:hover,
.bs-view-btn:hover {
    background: #0369a1 !important;
}

/* 2. Enterprise Table Container */
.bs-table,
.bs-content table,
.table-responsive {
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    margin-top: 10px !important;
}

.bs-table table,
.bs-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

/* Table Header (Zoho Muted Tone) */
.bs-table th,
.bs-content table th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 1px solid #edf2f7 !important;
    text-align: left !important;
}

/* Table Body Rows */
.bs-table td,
.bs-content table td {
    padding: 12px 16px !important;
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    vertical-align: middle !important;
}

.bs-table tr:last-child td,
.bs-content table tr:last-child td {
    border-bottom: none !important;
}

.bs-table tbody tr:hover,
.bs-content table tbody tr:hover {
    background: #f8fafc !important;
}

/* 3. Compact Date & Time Columns */
.bs-table td:first-child,
.bs-content table td:first-child {
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
}

/* Status Pill Badge (Zoho Pill Format) */
.bs-table td:nth-child(5),
.bs-content table td:nth-child(5) {
    font-weight: 600 !important;
}

/* Present status pill */
.bs-table td:contains("Present"),
.bs-status-present {
    color: #059669 !important;
    background: #ecfdf5 !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    display: inline-block !important;
}

/* 4. Compact Location Detail */
.bs-table td:last-child,
.bs-content table td:last-child {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    max-width: 320px !important;
}