/*========================================
=            GLOBAL STYLE                =
========================================*/

body {

    background: #f4f7fb;

    font-family: Arial, sans-serif;
}

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

.ambicq-header {

    background: linear-gradient(135deg,#1e3c72,#2a5298);

    color: white;

    padding: 25px;

    border-radius: 12px;

    margin-bottom: 25px;
}

.ambicq-header h1 {

    margin: 0;

    font-size: 28px;
}

.ambicq-header p {

    margin-top: 10px;

    opacity: 0.9;
}

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

.ambicq-card {

    background: white;

    padding: 20px;

    border-radius: 12px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

    margin-bottom: 20px;
}

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

.ambicq-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

    gap: 20px;
}

/*========================================
=            STAT BOX                    =
========================================*/

.ambicq-stat {

    padding: 20px;

    border-radius: 12px;

    color: white;

    font-size: 18px;

    font-weight: bold;
}

.present-box {

    background: #28a745;
}

.absent-box {

    background: #dc3545;
}

.leave-box {

    background: #ff9800;
}

.production-box {

    background: #007bff;
}

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

.ambicq-btn {

    background: #2a5298;

    color: white;

    border: none;

    padding: 10px 18px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 15px;

    margin-right: 10px;

    margin-top: 5px;
}

.ambicq-btn:hover {

    background: #1e3c72;
}

/*========================================
=            PROFILE SECTION             =
========================================*/

.ambicq-profile {

    display: flex;

    align-items: center;

    gap: 15px;
}

.ambicq-profile img {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #2a5298;
}

/*========================================
=            TABLE STYLE                 =
========================================*/

table.widefat {

    border-radius: 10px;

    overflow: hidden;
}

table.widefat th {

    background: #2a5298;

    color: white;
}

/*========================================
=            PERFORMANCE COLORS          =
========================================*/

.low-performance {

    color: red;

    font-weight: bold;
}

.medium-performance {

    color: orange;

    font-weight: bold;
}

.good-performance {

    color: #007bff;

    font-weight: bold;
}

.excellent-performance {

    color: green;

    font-weight: bold;
}

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

@media(max-width:768px){

    .ambicq-profile {

        flex-direction: column;

        text-align: center;
    }
}