/* ======================================================
   BloomServe HRMS Portal
   Dashboard UI
   Part 1
====================================================== */

:root{

    --bs-primary:#0b86d5;
    --bs-secondary:#9ac03c;

    --bs-bg:#f5f8fc;
    --bs-white:#ffffff;

    --bs-text:#1e293b;
    --bs-muted:#64748b;

    --bs-border:#e5e7eb;

    --bs-radius:18px;

    --bs-shadow:
        0 8px 25px rgba(15,23,42,.06);

    --bs-transition:.30s ease;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:var(--bs-bg);
    color:var(--bs-text);

    font-family:
    "Inter",
    "Segoe UI",
    sans-serif;

}

.bs-portal{

    max-width:1400px;

    margin:auto;

    padding:24px;

}

/*=========================
 HEADER
=========================*/

.bs-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    background:var(--bs-white);

    border:1px solid var(--bs-border);

    border-radius:var(--bs-radius);

    padding:18px 28px;

    box-shadow:var(--bs-shadow);

    margin-bottom:30px;

}

.bs-logo{

    display:flex;

    align-items:center;

}

.bs-logo img{

    height:48px;

    width:auto;

}

.bs-user{

    flex:1;

    padding-left:25px;

}

.bs-user h2{

    font-size:28px;

    font-weight:700;

    color:var(--bs-text);

    margin-bottom:8px;

}

.bs-user p{

    font-size:15px;

    color:var(--bs-muted);

    line-height:1.6;

}

/*=========================
 HEADER ACTIONS
=========================*/

.bs-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

.bs-actions a{

    width:48px;

    height:48px;

    border-radius:14px;

    background:#f8fafc;

    border:1px solid var(--bs-border);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--bs-transition);

    text-decoration:none;

}

.bs-actions a:hover{

    background:var(--bs-primary);

    border-color:var(--bs-primary);

    transform:translateY(-3px);

}

.bs-actions img{

    width:22px;

    height:22px;

    transition:var(--bs-transition);

}

.bs-actions a:hover img{

    filter:brightness(0) invert(1);

}

/*=========================
 DASHBOARD GRID
=========================*/

.bs-grid{

    display:grid;

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

    gap:22px;

    align-items:stretch;

}

/*=========================
 CARD
=========================*/

.bs-card{

    position:relative;

    background:var(--bs-white);

    border:1px solid var(--bs-border);

    border-radius:22px;

    min-height:170px;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-decoration:none;

    color:var(--bs-text);

    box-shadow:var(--bs-shadow);

    transition:all .30s ease;

    overflow:hidden;

}

.bs-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--bs-primary),
        var(--bs-secondary)
    );

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.bs-card:hover::before{

    transform:scaleX(1);

}

.bs-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.12);

}

/*=========================
 ICON
=========================*/

.bs-card img{

    width:58px;

    height:58px;

    margin-bottom:18px;

    transition:.30s;

}

.bs-card:hover img{

    transform:scale(1.08);

}

/*=========================
 TITLE
=========================*/

.bs-card span{

    font-size:17px;

    font-weight:600;

    color:var(--bs-text);

    letter-spacing:.2px;

}

/*=========================
 PREMIUM BACKGROUND
=========================*/

.bs-card::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    right:-70px;

    top:-70px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(11,134,213,.06),

        transparent 70%

    );

    pointer-events:none;

}

/*=========================
 ACTIVE CARD
=========================*/

.bs-card.active{

    border-color:var(--bs-primary);

    background:#f7fbff;

}

.bs-card.active::before{

    transform:scaleX(1);

}

/*=========================
 CLICK EFFECT
=========================*/

.bs-card:active{

    transform:scale(.98);

}

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

/* Laptop */

@media (max-width:1200px){

    .bs-portal{

        padding:20px;

    }

    .bs-grid{

        grid-template-columns:repeat(3,1fr);

        gap:20px;

    }

}

/* Tablet */

@media (max-width:992px){

    .bs-header{

        flex-wrap:wrap;

        justify-content:center;

        text-align:center;

        padding:22px;

    }

    .bs-logo{

        width:100%;

        justify-content:center;

    }

    .bs-user{

        width:100%;

        padding-left:0;

    }

    .bs-user h2{

        font-size:24px;

    }

    .bs-actions{

        width:100%;

        justify-content:center;

        margin-top:8px;

    }

    .bs-grid{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

}

/* Mobile */

@media (max-width:768px){

    .bs-portal{

        padding:16px;

    }

    .bs-header{

        border-radius:16px;

        padding:18px;

    }

    .bs-logo img{

        height:42px;

    }

    .bs-user h2{

        font-size:22px;

        margin-bottom:6px;

    }

    .bs-user p{

        font-size:14px;

    }

    .bs-grid{

        grid-template-columns:repeat(2,1fr);

        gap:14px;

    }

    .bs-card{

        min-height:145px;

        padding:20px;

        border-radius:18px;

    }

    .bs-card img{

        width:48px;

        height:48px;

        margin-bottom:14px;

    }

    .bs-card span{

        font-size:15px;

    }

}

/* Small Mobile */

@media (max-width:480px){

    .bs-grid{

        grid-template-columns:1fr;

    }

    .bs-header{

        padding:16px;

    }

    .bs-actions{

        gap:10px;

    }

    .bs-actions a{

        width:44px;

        height:44px;

    }

    .bs-user h2{

        font-size:20px;

    }

    .bs-user p{

        font-size:13px;

    }

    .bs-card{

        min-height:130px;

        padding:18px;

    }

    .bs-card img{

        width:44px;

        height:44px;

    }

}

/*======================================================
  FINAL PREMIUM POLISH
======================================================*/

html{

    scroll-behavior:smooth;

}

.bs-header,
.bs-card{

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}

/* Premium hover */

.bs-card:hover{

    border-color:rgba(11,134,213,.18);

}

/* Icon Animation */

.bs-card img{

    transition:

        transform .35s ease,

        filter .35s ease;

}

.bs-card:hover img{

    transform:translateY(-4px) scale(1.08);

}

/* Title Animation */

.bs-card span{

    transition:.30s;

}

.bs-card:hover span{

    color:var(--bs-primary);

}

/* Header shadow */

.bs-header:hover{

    box-shadow:

        0 18px 40px rgba(15,23,42,.08);

}

/* Focus */

.bs-card:focus,

.bs-actions a:focus{

    outline:none;

    box-shadow:

    0 0 0 3px rgba(11,134,213,.18);

}

/* Smooth */

.bs-card,

.bs-actions a,

.bs-header{

    transition:all .30s ease;

}

/* Image */

img{

    max-width:100%;

    display:block;

}

/* Selection */

::selection{

    background:var(--bs-primary);

    color:#fff;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:rgba(11,134,213,.35);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--bs-primary);

}

/* Prevent overflow */

.bs-portal{

    overflow-x:hidden;

}

/* SVG */

.bs-card img,

.bs-actions img{

    user-select:none;

    pointer-events:none;

}

/* Card spacing */

.bs-card>*{

    position:relative;

    z-index:2;

}

/* Better rendering */

.bs-card,

.bs-header{

    will-change:transform;

}

/* Desktop height */

@media(min-width:1200px){

    .bs-portal{

        min-height:calc(100vh - 40px);

    }

}

/* Mobile spacing */

@media(max-width:768px){

    .bs-header{

        margin-bottom:20px;

    }

}

/* End */

/* =================================================
   DASHBOARD PROFILE PHOTO
================================================= */

.bs-dashboard-photo {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    flex-shrink: 0;
}

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

.bs-dashboard-photo-placeholder {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

/* Hover */

.bs-dashboard-photo .bs-photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 134, 213, 0.82);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bs-dashboard-photo:hover .bs-photo-overlay {
    opacity: 1;
}

/* =================================================
   BLOOMSERVE DASHBOARD HEADER - FINAL
================================================= */

.bs-header{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:28px !important;
}

/* LOGO */
.bs-header .bs-logo{
    flex:0 0 330px !important;
    width:330px !important;
}

/* USER AREA */
.bs-header .bs-user{
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
}

/* PHOTO + TEXT */
.bs-header .bs-welcome{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:18px !important;
    min-width:0 !important;
}

/* PROFILE PHOTO */
.bs-header .bs-dashboard-photo{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    border-radius:50% !important;
    flex-shrink:0 !important;
}

/* GREETING AREA */
.bs-header .bs-welcome-text{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    min-width:0 !important;
}

/* GREETING + NAME */
.bs-header .bs-welcome-text h2{
    margin:0 !important;
    white-space:nowrap !important;
    line-height:1.15 !important;
}

/* MOTIVATIONAL LINE */
.bs-header .bs-welcome-text p{
    margin:7px 0 0 !important;
    color:#f97316 !important;
    font-weight:600 !important;
    white-space:nowrap !important;
}

/* RIGHT ACTION BUTTONS */
.bs-header .bs-actions{
    margin-left:auto !important;
    flex-shrink:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
}

/* =================================================
   MOBILE HEADER - FINAL FIX
================================================= */

@media (max-width: 768px){

    .bs-header{
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:16px !important;
        padding:20px 16px !important;
        overflow:hidden !important;
    }

    .bs-header .bs-logo{
        flex:0 0 auto !important;
        width:100% !important;
        justify-content:center !important;
    }

    .bs-header .bs-logo img{
        height:42px !important;
        width:auto !important;
    }

    .bs-header .bs-user{
        width:100% !important;
        padding:0 !important;
        display:flex !important;
        justify-content:center !important;
    }

    .bs-header .bs-welcome{
        width:100% !important;
        justify-content:center !important;
        gap:12px !important;
    }

    .bs-header .bs-dashboard-photo{
        width:64px !important;
        height:64px !important;
        min-width:64px !important;
        max-width:64px !important;
    }

    .bs-header .bs-welcome-text{
        min-width:0 !important;
        max-width:calc(100% - 76px) !important;
    }

    .bs-header .bs-welcome-text h2{
        font-size:20px !important;
        white-space:normal !important;
        line-height:1.2 !important;
        text-align:left !important;
    }

    .bs-header .bs-welcome-text p{
        font-size:13px !important;
        white-space:normal !important;
        line-height:1.4 !important;
        margin-top:5px !important;
    }

    .bs-header .bs-actions{
        width:100% !important;
        margin-left:0 !important;
        justify-content:center !important;
        gap:12px !important;
    }

    .bs-header .bs-actions a{
        width:46px !important;
        height:46px !important;
        border-radius:14px !important;
    }

}


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

@media (max-width:480px){

    .bs-header{
        padding:18px 12px !important;
        gap:14px !important;
    }

    .bs-header .bs-logo img{
        height:38px !important;
    }

    .bs-header .bs-dashboard-photo{
        width:58px !important;
        height:58px !important;
        min-width:58px !important;
        max-width:58px !important;
    }

    .bs-header .bs-welcome{
        gap:10px !important;
    }

    .bs-header .bs-welcome-text{
        max-width:calc(100% - 68px) !important;
    }

    .bs-header .bs-welcome-text h2{
        font-size:18px !important;
    }

    .bs-header .bs-welcome-text p{
        font-size:12px !important;
    }

}

/* =================================================
   MOBILE HEADER - CLEAN FINAL LAYOUT
================================================= */

@media (max-width: 768px){

    .bs-header{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:20px !important;
        padding:22px 18px !important;
        overflow:hidden !important;
    }

    /* LOGO */
    .bs-header .bs-logo{
        width:100% !important;
        flex:0 0 auto !important;
        justify-content:center !important;
    }

    .bs-header .bs-logo img{
        height:42px !important;
        width:auto !important;
    }

    /* USER AREA */
    .bs-header .bs-user{
        width:100% !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:18px !important;
    }

    /* PHOTO + GREETING */
    .bs-header .bs-welcome{
        width:100% !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:14px !important;
    }

    /* PHOTO */
    .bs-header .bs-dashboard-photo{
        width:64px !important;
        height:64px !important;
        min-width:64px !important;
        max-width:64px !important;
        flex-shrink:0 !important;
    }

    /* TEXT */
    .bs-header .bs-welcome-text{
        flex:1 !important;
        min-width:0 !important;
        max-width:none !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    .bs-header .bs-welcome-text h2{
        font-size:20px !important;
        line-height:1.25 !important;
        white-space:normal !important;
        margin:0 !important;
        text-align:left !important;
    }

    .bs-header .bs-welcome-text p{
        font-size:13px !important;
        line-height:1.4 !important;
        white-space:normal !important;
        margin:6px 0 0 !important;
        text-align:left !important;
    }

    /* ACTION BUTTONS */
    .bs-header .bs-actions{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        gap:14px !important;
    }

    .bs-header .bs-actions a{
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
        border-radius:14px !important;
    }

}


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

@media (max-width:480px){

    .bs-header{
        padding:20px 16px !important;
        gap:18px !important;
    }

    .bs-header .bs-logo img{
        height:38px !important;
    }

    .bs-header .bs-dashboard-photo{
        width:58px !important;
        height:58px !important;
        min-width:58px !important;
        max-width:58px !important;
    }

    .bs-header .bs-welcome{
        gap:12px !important;
    }

    .bs-header .bs-welcome-text h2{
        font-size:18px !important;
    }

    .bs-header .bs-welcome-text p{
        font-size:12px !important;
    }

    .bs-header .bs-actions a{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
    }

}

/* =================================================
   BLOOMSERVE MOBILE - COMPACT EMPLOYEE HEADER
   Final mobile override
================================================= */

@media (max-width: 768px){

    /* Compact header */
    .bs-header{
        display:grid !important;
        grid-template-columns:1fr auto !important;
        grid-template-areas:
            "logo actions"
            "user user" !important;

        align-items:center !important;
        gap:10px 12px !important;

        padding:12px 14px !important;
        margin-bottom:14px !important;

        border-radius:14px !important;
        min-height:auto !important;
    }

    /* Logo */
    .bs-header .bs-logo{
        grid-area:logo !important;

        width:auto !important;
        flex:none !important;

        justify-content:flex-start !important;
    }

    .bs-header .bs-logo img{
        height:28px !important;
        width:auto !important;
    }

    /* Top-right actions */
    .bs-header .bs-actions{
        grid-area:actions !important;

        width:auto !important;
        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        justify-content:flex-end !important;
        align-items:center !important;

        gap:7px !important;
    }

    .bs-header .bs-actions a{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;

        border-radius:10px !important;
        background:#f8fafc !important;
    }

    .bs-header .bs-actions img{
        width:18px !important;
        height:18px !important;
    }

    /* User information */
    .bs-header .bs-user{
        grid-area:user !important;

        width:100% !important;
        padding:0 !important;
        margin:0 !important;

        display:block !important;
    }

    .bs-header .bs-welcome{
        width:100% !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;

        gap:10px !important;
    }

    /* Small profile photo */
    .bs-header .bs-dashboard-photo{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        max-width:42px !important;
    }

    /* Greeting */
    .bs-header .bs-welcome-text{
        flex:1 !important;
        min-width:0 !important;
        max-width:none !important;

        display:block !important;
    }

    .bs-header .bs-welcome-text h2{
        font-size:16px !important;
        line-height:1.2 !important;

        margin:0 !important;

        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    /* Hide motivational quote on mobile */
    .bs-header .bs-welcome-text p{
        display:none !important;
    }

    /* Keep header divider very small */
    .bs-header::after{
        display:none !important;
    }

}


/* =================================================
   VERY SMALL MOBILE - 4 inch class screens
================================================= */

@media (max-width:480px){

    .bs-portal{
        padding:8px !important;
    }

    .bs-header{
        padding:10px 12px !important;
        gap:8px 10px !important;
        margin-bottom:10px !important;
        border-radius:12px !important;
    }

    .bs-header .bs-logo img{
        height:25px !important;
    }

    .bs-header .bs-actions{
        gap:6px !important;
    }

    .bs-header .bs-actions a{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        border-radius:9px !important;
    }

    .bs-header .bs-actions img{
        width:17px !important;
        height:17px !important;
    }

    .bs-header .bs-dashboard-photo{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        max-width:38px !important;
    }

    .bs-header .bs-welcome{
        gap:9px !important;
    }

    .bs-header .bs-welcome-text h2{
        font-size:15px !important;
    }

}

/* =================================================
   FINAL MOBILE HEADER - ULTRA COMPACT
================================================= */

@media (max-width: 768px){

    .bs-header{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;

        gap:8px !important;
        padding:10px 12px !important;
        margin-bottom:10px !important;

        min-height:64px !important;
        height:auto !important;

        border-radius:14px !important;
    }

    /* LOGO */
    .bs-header .bs-logo{
        flex:0 0 auto !important;
        width:auto !important;
        margin:0 !important;
    }

    .bs-header .bs-logo img{
        width:92px !important;
        height:auto !important;
    }

    /* USER AREA */
    .bs-header .bs-user{
        flex:1 1 auto !important;
        min-width:0 !important;
        width:auto !important;
        margin:0 !important;
    }

    .bs-header .bs-welcome{
        display:flex !important;
        align-items:center !important;
        gap:7px !important;
        width:100% !important;
    }

    .bs-header .bs-dashboard-photo{
        flex:0 0 34px !important;
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
    }

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

    .bs-header .bs-welcome-text h2{
        font-size:13px !important;
        line-height:1.2 !important;
        margin:0 !important;

        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .bs-header .bs-welcome-text p{
        display:none !important;
    }

    /* ACTIONS */
    .bs-header .bs-actions{
        flex:0 0 auto !important;

        display:flex !important;
        align-items:center !important;

        gap:5px !important;
        margin:0 !important;
    }

    .bs-header .bs-actions a{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;

        border-radius:9px !important;
    }

    .bs-header .bs-actions img{
        width:16px !important;
        height:16px !important;
    }

}


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

@media (max-width:380px){

    .bs-header{
        padding:8px 9px !important;
        gap:5px !important;
        min-height:56px !important;
    }

    .bs-header .bs-logo img{
        width:78px !important;
    }

    .bs-header .bs-dashboard-photo{
        flex-basis:30px !important;
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
    }

    .bs-header .bs-welcome{
        gap:5px !important;
    }

    .bs-header .bs-welcome-text h2{
        font-size:11px !important;
    }

    .bs-header .bs-actions{
        gap:3px !important;
    }

    .bs-header .bs-actions a{
        width:29px !important;
        height:29px !important;
        min-width:29px !important;
    }

    .bs-header .bs-actions img{
        width:14px !important;
        height:14px !important;
    }
}

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

.bs-mobile-greeting {
    display: none;
}

@media (max-width: 768px) {

    .bs-desktop-greeting {
        display: none !important;
    }

    .bs-mobile-greeting {
        display: inline !important;
    }

}

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

.bs-logo-mobile {
    display: none;
}

.bs-mobile-greeting,
.bs-mobile-name {
    display: none;
}


@media (max-width: 600px) {

    /* HEADER */
    .bs-header {
        width: 100%;
        min-height: 110px;
        padding: 16px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        box-sizing: border-box;
    }


    /* SHORT LOGO */
    .bs-logo-desktop {
        display: none !important;
    }

    .bs-logo-mobile {
        display: block !important;
        width: 58px;
        height: auto;
        max-width: 58px;
    }

    .bs-logo {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }


    /* USER AREA */
    .bs-user {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }


    /* PHOTO + NAME */
    .bs-welcome {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1;
    }


    .bs-dashboard-photo {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 50%;
        overflow: hidden;
    }


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


    /* NAME */
    .bs-welcome-text {
        margin-left: 10px;
        min-width: 0;
    }


    .bs-welcome-text h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .bs-desktop-greeting,
    .bs-desktop-name {
        display: none !important;
    }


    .bs-mobile-greeting,
    .bs-mobile-name {
        display: inline !important;
    }


    /* HIDE QUOTE ON MOBILE */
    .bs-welcome-text p {
        display: none;
    }


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


    .bs-notification,
    .bs-logout {
        width: 48px;
        height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        box-sizing: border-box;
    }


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

}

/* =====================================================
   FINAL MOBILE HEADER - COMPACT
   ===================================================== */

@media (max-width: 600px) {

    .bs-header {
        min-height: 92px !important;
        height: 92px !important;
        padding: 12px 14px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    /* SHORT LOGO */
    .bs-logo-mobile {
        width: 52px !important;
        max-width: 52px !important;
        height: auto !important;
    }

    .bs-logo {
        flex: 0 0 52px !important;
        width: 52px !important;
    }

    /* USER AREA */
    .bs-user {
        gap: 7px !important;
        min-width: 0 !important;
    }

    .bs-welcome {
        min-width: 0 !important;
    }

    /* PROFILE PHOTO */
    .bs-dashboard-photo {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    /* NAME */
    .bs-welcome-text {
        margin-left: 8px !important;
        min-width: 0 !important;
    }

    .bs-welcome-text h2 {
        font-size: 18px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* HIDE QUOTE */
    .bs-welcome-text p {
        display: none !important;
    }

    /* NOTIFICATION + LOGOUT */
    .bs-actions {
        gap: 6px !important;
    }

    .bs-notification,
    .bs-logout {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 12px !important;
    }

    .bs-notification img,
    .bs-logout img {
        width: 23px !important;
        height: 23px !important;
    }

    /* REDUCE SPACE AFTER HEADER */
    .bs-header + * {
        margin-top: 0 !important;
    }

}

/* =====================================================
   MOBILE LOGO FIX - PORTRAIT + LANDSCAPE
   ===================================================== */

/* =====================================================
   MOBILE PORTAL HEADER
   FINAL TWO-LEVEL DESIGN
===================================================== */

.bs-mobile-header {
    display: none;
}


@media (max-width: 900px) {

    /* Desktop header completely hidden */
    .bs-header {
        display: none !important;
    }


    /* ================================================
       MOBILE HEADER WRAPPER
       Transparent - NOT a white card
    ================================================ */

    .bs-mobile-header {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent !important;
        border: 0;
        box-shadow: none !important;
        border-radius: 0;
    }


    /* ================================================
       TOP WHITE BAR
    ================================================ */

    .bs-mobile-topbar {
        width: 100%;
        min-height: 72px;

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

        padding: 10px 14px;
        box-sizing: border-box;

        background: #ffffff;

        border-radius: 18px;

        box-shadow:
            0 6px 20px rgba(20, 40, 80, 0.05);

        gap: 10px;
    }


    /* ================================================
       SHORT LOGO
    ================================================ */

    .bs-mobile-logo {
        flex: 0 0 auto;

        display: flex;
        align-items: center;
    }

    .bs-mobile-logo img {
        width: 52px;
        height: auto;
        display: block;
    }


    /* ================================================
       RIGHT SIDE ACTIONS
    ================================================ */

    .bs-mobile-actions {
        margin-left: auto;

        display: flex;
        align-items: center;

        gap: 8px;
    }


    /* Bell + Logout */

    .bs-mobile-icon {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;

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

        border-radius: 12px;

        background: #ffffff;

        border: 1px solid #e4e7ec;

        box-sizing: border-box;

        text-decoration: none;
    }


    .bs-mobile-icon img {
        width: 20px;
        height: 20px;

        display: block;
    }


    /* ================================================
       PROFILE PHOTO
    ================================================ */

    .bs-mobile-avatar {
        width: 42px;
        height: 42px;

        min-width: 42px;

        border-radius: 50%;

        overflow: hidden;

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

        background: #eef7fb;

        text-decoration: none;

        color: #0b86d5;

        font-size: 18px;
        font-weight: 700;
    }


    .bs-mobile-avatar img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;
    }


    /* ================================================
       GREETING
       This is OUTSIDE the white header look
    ================================================ */

    .bs-mobile-greeting-bar {
        width: 100%;

        margin: 26px 0 28px;

        padding: 0 14px;

        box-sizing: border-box;

        background: transparent;
    }


    .bs-mobile-greeting-bar h2 {
        margin: 0;

        padding: 0;

        font-size: 38px;

        line-height: 1.15;

        font-weight: 800;

        color: #17243d;

        letter-spacing: -1px;
    }


    /* ================================================
       ATTENDANCE CARD SPACE
    ================================================ */

    .bs-attendance-info {
        width: 100%;
        box-sizing: border-box;
    }

}


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

@media (max-width: 480px) {

    .bs-mobile-topbar {
        min-height: 68px;
        padding: 9px 12px;
        border-radius: 16px;
    }


    .bs-mobile-logo img {
        width: 50px;
    }


    .bs-mobile-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    .bs-mobile-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }


    .bs-mobile-greeting-bar {
        margin-top: 24px;
        margin-bottom: 26px;
        padding-left: 14px;
        padding-right: 14px;
    }


    .bs-mobile-greeting-bar h2 {
        font-size: 32px;
        line-height: 1.15;
    }

}


/* =====================================================
   VERY SMALL PHONE - 4 INCH CLASS
===================================================== */

@media (max-width: 380px) {

    .bs-mobile-topbar {
        min-height: 64px;
        padding: 8px 10px;
        gap: 6px;
    }


    .bs-mobile-logo img {
        width: 46px;
    }


    .bs-mobile-actions {
        gap: 5px;
    }


    .bs-mobile-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
        border-radius: 10px;
    }


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


    .bs-mobile-avatar {
        width: 37px;
        height: 37px;
        min-width: 37px;
    }


    .bs-mobile-greeting-bar {
        margin-top: 20px;
        margin-bottom: 22px;
    }


    .bs-mobile-greeting-bar h2 {
        font-size: 29px;
        letter-spacing: -0.7px;
    }

}

/* =====================================================
   MOBILE HEADER - FINAL ORDER
   Logo → Profile → Notification → Logout
===================================================== */

@media (max-width: 900px) {

    .bs-mobile-logo img {
        content: url("../images/BS Logo.png") !important;
        width: 125px !important;
        height: auto !important;
        display: block !important;
        object-fit: contain;
    }

}


/* Small phones */
@media (max-width: 480px) {

    .bs-mobile-logo img {
        width: 105px !important;
    }

}


/* Very small phones */
@media (max-width: 380px) {

    .bs-mobile-logo img {
        width: 95px !important;
    }

}

/* =====================================================
   MOBILE HEADER - FINAL ELEMENT ORDER
   LOGO → PHOTO → BELL → LOGOUT
===================================================== */

@media (max-width: 900px) {

    .bs-mobile-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
    }

    /* 1st element = Bell → move to 2nd */
    .bs-mobile-actions > :nth-child(1) {
        order: 2 !important;
    }

    /* 2nd element = Profile Photo → move to 1st */
    .bs-mobile-actions > :nth-child(2) {
        order: 1 !important;
    }

    /* 3rd element = Logout → stay 3rd */
    .bs-mobile-actions > :nth-child(3) {
        order: 3 !important;
    }

}

/* =====================================================
   BLOOMSERVE DESKTOP HEADER - FINAL CLEAN
   Mobile CSS untouched
===================================================== */

@media (min-width: 901px) {

    .bs-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-height: 150px !important;

        padding: 26px 32px !important;
        gap: 30px !important;

        margin-bottom: 30px !important;
        border-radius: 22px !important;

        overflow: hidden !important;
    }


    /* =========================
       FULL BLOOMSERVE LOGO
    ========================= */

    .bs-header .bs-logo {
        flex: 0 0 330px !important;
        width: 330px !important;
        min-width: 330px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .bs-header .bs-logo img {
        display: block !important;

        width: auto !important;
        max-width: 300px !important;
        height: auto !important;
        max-height: 58px !important;

        object-fit: contain !important;
    }


    /* =========================
       USER AREA
    ========================= */

    .bs-header .bs-user {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 !important;
        margin: 0 !important;
    }


    /* PHOTO + GREETING */

    .bs-header .bs-welcome {
        display: flex !important;
        align-items: center !important;

        gap: 20px !important;

        min-width: 0 !important;
    }


    /* PROFILE PHOTO */

    .bs-header .bs-dashboard-photo {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;

        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }


    /* GREETING TEXT */

    .bs-header .bs-welcome-text {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;

        padding: 0 !important;
        margin: 0 !important;
    }


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

        font-size: 30px !important;
        line-height: 1.2 !important;

        font-weight: 800 !important;

        white-space: nowrap !important;

        color: #1e293b !important;
    }


    /* TAGLINE */

    .bs-header .bs-welcome-text p {
        margin: 7px 0 0 !important;

        font-size: 15px !important;
        line-height: 1.4 !important;

        color: #f97316 !important;
        font-weight: 600 !important;

        white-space: nowrap !important;
    }


    /* =========================
       ACTION BUTTONS
    ========================= */

    .bs-header .bs-actions {
        flex: 0 0 auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .bs-header .bs-actions a {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;

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

        border-radius: 14px !important;
    }


    .bs-header .bs-actions img {
        width: 23px !important;
        height: 23px !important;
    }


    /* =========================
       REMOVE MOBILE-ONLY ITEMS
    ========================= */

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

}


/* =====================================================
   DESKTOP LAPTOP
===================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .bs-header {
        padding: 22px 24px !important;
        gap: 20px !important;
    }

    .bs-header .bs-logo {
        flex-basis: 260px !important;
        width: 260px !important;
        min-width: 260px !important;
    }

    .bs-header .bs-logo img {
        max-width: 240px !important;
        max-height: 52px !important;
    }

    .bs-header .bs-dashboard-photo {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
    }

    .bs-header .bs-welcome {
        gap: 15px !important;
    }

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

}

/* =====================================================
   DESKTOP HEADER - FINAL BALANCED LAYOUT
   DO NOT AFFECT MOBILE
===================================================== */

@media (min-width: 901px) {

    .bs-header {
        display: grid !important;

        grid-template-columns: 360px minmax(0, 1fr) auto !important;
        grid-template-areas: "logo user actions" !important;

        align-items: center !important;

        column-gap: 28px !important;

        width: 100% !important;
        min-height: 150px !important;

        padding: 24px 34px !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* =========================
       LOGO
    ========================= */

    .bs-header .bs-logo {
        grid-area: logo !important;

        width: 360px !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .bs-header .bs-logo img {
        display: block !important;

        width: 330px !important;
        max-width: 330px !important;

        height: auto !important;
        max-height: 58px !important;

        object-fit: contain !important;
    }


    /* =========================
       USER
    ========================= */

    .bs-header .bs-user {
        grid-area: user !important;

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 !important;
        margin: 0 !important;
    }


    /* PHOTO + TEXT */

    .bs-header .bs-welcome {
        display: flex !important;
        align-items: center !important;

        gap: 18px !important;

        width: 100% !important;
        min-width: 0 !important;
    }


    /* PROFILE PHOTO */

    .bs-header .bs-dashboard-photo {
        width: 76px !important;
        height: 76px !important;

        min-width: 76px !important;
        max-width: 76px !important;

        flex: 0 0 76px !important;

        border-radius: 50% !important;
    }


    /* TEXT */

    .bs-header .bs-welcome-text {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* GREETING */

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

        font-size: 28px !important;
        line-height: 1.2 !important;

        font-weight: 800 !important;

        white-space: nowrap !important;

        color: #1e293b !important;
    }


    /* TAGLINE */

    .bs-header .bs-welcome-text p {
        margin: 6px 0 0 !important;

        font-size: 15px !important;
        line-height: 1.4 !important;

        font-weight: 600 !important;

        color: #f97316 !important;

        white-space: nowrap !important;
    }


    /* =========================
       ACTIONS
    ========================= */

    .bs-header .bs-actions {
        grid-area: actions !important;

        width: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .bs-header .bs-actions a {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;

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

        border-radius: 14px !important;
    }


    .bs-header .bs-actions img {
        width: 23px !important;
        height: 23px !important;
    }

}


/* =====================================================
   DESKTOP - MEDIUM WIDTH
===================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .bs-header {
        grid-template-columns: 270px minmax(0, 1fr) auto !important;
        column-gap: 18px !important;

        padding: 22px 24px !important;
    }

    .bs-header .bs-logo {
        width: 270px !important;
    }

    .bs-header .bs-logo img {
        width: 245px !important;
        max-width: 245px !important;
    }

    .bs-header .bs-welcome {
        gap: 12px !important;
    }

    .bs-header .bs-dashboard-photo {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        flex-basis: 64px !important;
    }

    .bs-header .bs-welcome-text h2 {
        font-size: 23px !important;
    }

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

}

/* Punch In Time Display */
.bs-punch-in-display {
    color: #64748b;
    font-weight: 600;
    margin-left: 10px;
}

.bs-punch-in-display {
    color: #64748b;
    font-weight: 600;
    margin-left: 12px;
}

.bs-attendance-punched {
    color: #172633;
    font-weight: 800;
}