/* FullCalendar container */

#calendar {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    /*background-color: #f9f9f9;*/
    /* Light background for the calendar */
    border-radius: 8px;
    /*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    border: 1px solid #dedede;
}

/* Header styling */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    font-family: "Inter", sans-serif;
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background: #ffffff !important;
    /*    transition: 0.5s all ease;*/
}

body {
    overflow-x: hidden;
}

h1 {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #222 !important;
}

h2 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #222 !important;
}

h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #222 !important;
}

th {
    font-size: 14px;
    font-weight: 500;
    text-align: left !important;
}

td {
    vertical-align: middle !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: left;
}

p,
li,
label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #646464;
    /* margin-bottom: 0 !important; */
}

a {
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    color: #222 !important;
}

ul {
    list-style: none;
}

/* Gradient Colors */
.green-dark {
    background: linear-gradient(135deg, #23bdb8 0, #65a986) !important;
}

.cyan-dark {
    background: linear-gradient(135deg, #289cf5, #4f8bb7) !important;
}

.purple-dark {
    background: linear-gradient(135deg, #8e4cf1 0, #c554bc) !important;
}

.orange-dark {
    background: linear-gradient(135deg, #f48665 0, #d68e41) !important;
}

:root {
    --header-height: 3rem;
    --nav-width: 80px;
    --first-color-light: #afa5d9;
    --white-color: #f7f6fb;
    --normal-font-size: 1rem;
    --z-fixed: 99;
    --bs-breadcrumb-divider: ">";
}

*,
::before,
::after {
    box-sizing: border-box;
}

/* Header Section */

.header {
    width: 100%;
    /*    height: var(--header-height);*/
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    z-index: var(--z-fixed);
    transition: 0.5s all ease;
    background: #f2f2f2 !important;
    border-bottom: 1px solid #e7e7e7;
}

.scrolled-header {
    background-color: #ffffff;
    /*    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    position: absolute;
    cursor: pointer;
    z-index: 100;
    left: 50px;
    top: 35px;
    background: #fff;
    width: 35px;
    height: 35px;
    display: inline-flex;
    border: 1px solid #dbdbdb;
    align-items: center;
    border-radius: 4px;
    justify-content: center;
    transform: translateY(-50%);
    transition: 0.5s all ease;
}

    .header_toggle .bx {
        font-size: 30px;
        transition: all 0.3s ease;
    }

    /* Hamburger icon */
    .header_toggle .bx-menu {
        transform-origin: center;
        color: #4f4f4f;
    }

/* Animated Hamburger to Close transition */
.l-navbar.show-nav .header_toggle.toggle .bx-menu {
    transform: rotate(45deg);
}

    .l-navbar.show-nav .header_toggle.toggle .bx-menu:before {
        content: "";
        position: absolute;
        background-color: #4f4f4f;
        border-radius: 3px;
        width: 16px;
        height: 2px;
        top: -1px;
        left: -7px;
        transform: rotate(90deg);
    }

    .l-navbar.show-nav .header_toggle.toggle .bx-menu:after {
        content: "";
        position: absolute;
        background-color: #4f4f4f;
        border-radius: 3px;
        width: 16px;
        height: 2px;
        top: -1px;
        left: -7px;
        transform: rotate(180deg);
    }

.l-navbar.show-nav .header_toggle {
    left: 207px;
    top: 30px;
}

.nav-profile img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

.nav-dropdown a,
td.dropdown a {
    position: relative;
    padding-left: 2.1rem;
}

.nav-dropdown i,
td.dropdown i {
    font-size: 0.8rem;
    position: absolute;
    left: 10px;
    top: 8px;
}

/* Left Navbar */
.left-nav__img {
    max-width: 75px;
    width: 75px;
    height: 75px;
    object-fit: cover;
    margin: auto;
    /* display: none; */
}

.l-sub-bar {
    width: calc(100% - var(--nav-width));
    height: auto;
    background-color: #fbfbfb;
    position: fixed;
    left: var(--nav-width);
    top: 67px;
    z-index: 9999;
    padding: 0;
    display: none;
    border-bottom: 1px solid #f5f5f5;
    box-shadow: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.l-sub-bar::-webkit-scrollbar {
    height: 4px;
}

.l-sub-bar::-webkit-scrollbar-track {
    background: transparent;
}

.l-sub-bar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.back-common-btn {
    background: #f2f2f2;
    padding: 9px 11px;
    border-radius: 6px;
    border: 1px solid #ededed;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.date-filter .btn.btn-primary {
    border-radius: 0 5px 5px 0 !important;
}

.bottom-sub-bar-2 {
    bottom: 149px !important;
}

.body-pd.bd-sub-pd {
    padding-top: 130px !important;
    /* Header (59px) + submenu bar (~60px) + spacing */
    padding-left: 0;
}

.body-padding {
    padding-top: 120px !important;
    /* For when submenu is shown */
}

.sub_link .nav_name {
    font-size: 14px;
}

.l-sub-bar a.nav_link {
    padding: 15px 20px !important;
    border-bottom: none;
    border-right: none;
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

    .l-sub-bar a.nav_link:last-child {
        border-right: none;
    }

/*        .l-sub-bar a.nav_link i {
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }*/

a.nav_link.sub_link {
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 20px !important;
    display: inline-flex !important;
}

.close-sub-bar {
    display: none !important;
}

.hide {
    display: none;
}

.left-nav__img img {
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100%;
    background-color: #f2f2f2 !important;
    /*    padding: 0.5rem 1rem 0 0;*/
    transition: 0.5s;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.043) 1.95px 1.95px 2.6px;
    border-right: 1px solid #dedede;
}

    .l-navbar .nav_list {
        margin-top: 67px;
    }

.nav-wrapper {
    overflow-y: scroll;
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    overflow-y: auto;
    flex-wrap: nowrap !important;
}

    .nav::-webkit-scrollbar {
        display: none;
    }

.nav_logo,
.nav_link {
    display: flex;
    /* column-gap: 1.1rem; */
    padding: 1rem 0;
    font-size: 11px !important;
    /*    border-bottom: 1px solid #dedede;*/
    margin-bottom: 0 !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 6px;
}

header ul.dropdown-menu.nav-dropdown.show {
    top: 15px !important;
    /*    left: 0 !important;*/
    border-radius: 4px !important;
}

header .dropdown-menu .dropdown-item {
    padding: 10px;
}

.status-card {
    background: #ffffff;
    border: 1px solid rgba(162, 161, 168, 0.2);
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .status-card .status-card-head {
        display: flex;
        color: #121212 !important;
        align-items: center;
        column-gap: 10px;
        margin-bottom: 20px;
        padding: 1rem 1rem 0;
    }

    .status-card h2 {
        color: #121212 !important;
        font-weight: 500 !important;
        margin-bottom: 0 !important;
    }

.status-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgb(240 14 75 / 8%);
    border-radius: 5px;
}

.status-card-footer {
    padding: 10px 1rem;
}

    .status-card-footer p {
        margin-bottom: 0;
    }

.status-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(113, 82, 243, 0.05);
    border-radius: 5px;
}

.status-card .status-card-content .count {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #16151C;
}

label.count.active-pro {
    color: #3FC28A !important;
}

label.count.inactive-pro {
    color: #F45B69 !important;
}

.status-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*    border-bottom: 1px solid rgba(162, 161, 168, 0.2);*/
    padding: 0 1rem 1rem;
}

table#mytable tbody tr:last-child td {
    border-bottom-width: 0 !important;
}

.status-card-content p {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    color: #30BE82;
    font-weight: 500;
    padding: 4px 5px;
    background: rgba(48, 190, 130, 0.1);
    border-radius: 5px;
}

    .status-card-content p span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.nav_name {
    text-align: center;
    display: block;
}

.nav_link i {
    font-size: 20px;
}

.sign-out-icon {
    border-top: 1px solid #dedede;
}

a.nav_link.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 80%;
    background: rgb(237, 29, 86) !important;
    border-radius: 0 7px 7px 0;
    transform: translateY(-50%);
}

a.nav_link.sub_link {
    border-bottom: 0;
}

    a.nav_link.sub_link.active {
        background: #ffffff !important;
    }

        a.nav_link.sub_link.active::before {
            content: none;
        }

.title-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    /*    border-bottom: 1px solid #dedede;*/
    padding-top: 20px;
    /*    padding-bottom: 20px;*/
    background: #ffffff;
}

.body-pd.admin-pd {
    padding-top: 59px;
}

.admin-pd .l-navbar .nav_list {
    margin-top: 59px;
}

.admin-pd .l-sub-bar{
    top: 59px;
}

@media screen and (max-width: 767.98px) {
    .title-section {
        padding-left: 10px !important;
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

.title-section h1 {
    margin-bottom: 0px !important;
}

.employee-cards .table-responsive {
    border: 1px solid #a2a1a833;
}

/*.nav_icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
}
*/

.dashboard-main {
    padding: 20px;
    margin-bottom: -26px !important;
}

.nav_logo {
    margin-bottom: 2rem;
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color);
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700;
}

.nav_link {
    position: relative;
    color: var(--first-color-light);
    margin-bottom: 0.4rem;
    transition: 0.3s;
}

    .nav_link:hover {
        color: var(--white-color);
        background: #ffffff;
    }

.nav_icon {
    font-size: 1.25rem !important;
    color: #121212 !important;
}

.show-nav {
    left: 0;
}

.l-navbar .navbar-brand {
    margin-left: 1rem;
}

.l-navbar.show-nav .navbar-brand {
    margin: 0 1rem;
}

.body-pd {
    /*    padding-left: var(--nav-width);*/
}

.active {
    color: rgb(237, 29, 86) !important;
    background: #fff;
}

    .active::before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        height: 32px;
        background-color: var(--white-color);
    }

.l-navbar.show-nav .nav-logo {
    justify-content: center !important;
}

/* Common Lists */

.common-list {
    list-style: none;
    padding: 0;
}

    .common-list li {
        position: relative;
        padding-left: 24px;
        margin-bottom: 0.6rem;
    }

        .common-list li span {
            position: absolute;
            left: 0;
            color: #ffcf16;
        }
/* Table Styles */
.table-img {
    width: 32px;
    height: 32px;
}

    .table-img img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

.table-top {
    /*    background-color: #fafbff;
    padding: 16px;
    border-radius: 8px;*/
    margin-bottom: 20px;
    min-width: 0;
    max-width: 100%;
    /*    border: 1px solid rgba(162, 161, 168, 0.2);*/
}

.table-left {
    min-width: 0;
    max-width: 100%;
}

#mytable,
.mytable {
    margin-bottom: 0 !important;
}

    #mytable th,
    .mytable th {
        font-size: 1rem;
        font-weight: 600;
        padding: 12px 30px !important;
    }

.form-floating > label {
    padding: 11px .75rem !important;
    z-index: 1 !important;
}

table#mytable tbody tr td,
table.mytable tbody tr td {
    border-color: #a2a1a833;
    font-weight: 400;
    padding: 11px 30px !important;
    min-height: 0 !important;
    border-bottom: none;
}

.card-title-wrapper {
    padding: 20px 15px;
    font-size: 20px !important;
    border-bottom: 1px solid #ededed;
}

table#mytable tbody tr td:last-child,
table.mytable tbody tr td:last-child {
    border-right: 0 !important;
}


.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    border: none;
    font-size: 0 !important;
    background: url('/images/icons/direction-right 2.png');
    background-repeat: no-repeat;
    background-size: cover !important;
    width: 24px;
    height: 24px;
    display: block;
    padding: 0 !important;
    margin-right: 0 !important;
}

.dataTables_paginate .paginate_button.next {
    transform: rotate(180deg);
}

.dataTables_paginate .paginate_button {
    padding: 10px;
}

.dataTables_paginate .paginate_button {
    background-color: transparent;
    border: 1px solid #f00e4b;
    padding: 10px 15px !important;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 10px;
}

div.dtr-modal div.dtr-modal-content {
    padding: 20px;
}

    div.dtr-modal div.dtr-modal-content h2 {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }


.paginate_button.current {
    background: #f00e4b !important;
    color: #fff !important;
    border: 1px solid #f00e4b !important;
}

.dataTables_paginate .paginate_button:last-child {
    margin-right: 0;
}

.dataTables_paginate {
    border-radius: .25rem;
    display: flex;
    float: right;
    padding: 20px;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px;
    position: absolute;
    right: 14px;
}

    .dataTables_paginate .paginate_button:hover {
        border: 1px solid #f00e4b;
    }

#task-tracker-table_info {
    position: absolute;
}

.status-card-content {
    position: relative;
}

    .status-card-content.project::before {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
        transform: translateY(-75%);
        width: 3px;
        height: 50%;
        background: #ed1d56;
        border-radius: 20px;
    }

.search-bar {
    border-radius: 5px;
    width: 100%;
    max-width: 100%;
    /* Allow horizontal scroll on desktop when many filters (e.g. Invoice) instead of wrapping the search button */
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.search-bar-white {
    background: #fff !important;
}

.search-bar button.btn.btn-primary {
    padding: 13px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    flex-shrink: 0;
}

.search-input {
    border: none;
    background: #ffffff;
    outline: none;
    border-radius: 6px;
    border: 1px solid #dfdede;
    padding: 7px 0 7px 13px;
    min-width: 0;
    max-width: 100%;
}

.timeline-card-wrapper {
    background: #f2f2f2;
    padding: 15px;
    border-radius: 6px;
}

.search-input::placeholder {
    font-size: 14px;
}

.search-bar form {
    display: flex;
    align-items: center;
    column-gap: 6px;
    row-gap: 8px;
    /* Desktop: keep search + submit on one row; mobile overrides to wrap */
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Direct flex children: allow shrinking so search + button stay in viewport */
.search-bar form > .form-select {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 100%;
}

.search-bar form > .search-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Task Tracker reports etc.: plain .form-control search field (not .search-input) */
.search-bar form > input.form-control:not([type="hidden"]) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.search-bar form > .input-close {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 100%;
}

.search-bar .input-close .search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.search-bar form > button.btn-primary,
.search-bar form > button[type="submit"] {
    flex-shrink: 0;
}

.table-right__icons {
    width: 40px;
    height: 40px;
    background-color: #dae1f3;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    /* box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px; */
    cursor: pointer;
}

/*.modal-content {
    padding: 1.4rem;
}*/

.btns .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 1rem !important;
    font-size: 15px;
}

.modal__header figure {
    max-width: 48px;
    margin: 0;
}

    .modal__header figure img {
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.text-truncate {
    cursor: pointer;
}

.dashboard-table th:not(th:nth-child(2), th:nth-child(1)) {
    min-width: 115px;
}

.dashboard-table th,
.dashboard-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 12px 30px !important;
}

/* Main Style */
.main-section {
    /*    padding-top: 59px;*/
    /*    padding-right: 2rem;*/
    /*    overflow: hidden;*/
}

.profile-sec {
    /* padding: 20px; */
    margin: 20px;
    /*    border: 1px solid #a2a1a833;*/
    border-radius: 10px;
}

@media screen and (max-width: 767.98px) {
    .profile-sec {
        margin: 10px;
    }

    .main-section {
        padding-top: 65px;
    }
}


/* Form Styles */

.form-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
}

input.form-control,
.form-select {
    background-color: #f7f7f7 !important;
    height: 100% !important;
    min-height: unset !important;
    font-size: 14px !important;
}

input.form-control {
    padding: 12px .75rem !important;
}

.form-select {
    padding: 10px .75rem !important;
}

.custom-form-select.form-select {
    padding: 12px .75rem !important;
}

.form-floating label {
    color: #000000 !important;
}

.files input {
    outline: 2px dashed #d9ecee;
    outline-offset: -10px;
    -webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
    transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
    padding: 120px 0px 85px 41%;
    text-align: center !important;
    margin: 0;
    width: 100% !important;
}

    .files input:focus {
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        -webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
        transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
        border: 1px solid #92b0b3;
    }

.files {
    position: relative;
}

    .files:after {
        pointer-events: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 50px;
        right: 0;
        height: 56px;
        content: "";
        background-image: url(../images/icons/upload.png);
        display: block;
        margin: 0 auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }

.color input {
    background-color: #f1f1f1;
}

.files:before {
    position: absolute;
    bottom: 10px;
    left: 0;
    pointer-events: none;
    width: 100%;
    right: 0;
    height: 57px;
    content: " or drag it here. ";
    display: block;
    margin: 0 auto;
    color: #2ea591;
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
}

/* Profile Styles */
.about-row {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    padding: 25px;
}

.profile-card,
.about-card {
    border-radius: 10px;
    background: #ffffff;
    padding: 20px 0 !important;
}

.about-card {
    padding-top: 0 !important;
}

.profile-header {
    color: #ffffff;
    border-radius: 10px 10px 0 0;
    /* padding: 1rem 0; */
    display: flex;
    column-gap: 1rem;
    align-items: center;
}

.profile-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 117px;
    /* margin: 0 auto; */
}

.task-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    gap: 10px;
}

@media screen and (max-width: 1299.98px) {
    .task-grid, .task-grid.task-tracker-task-grid.employeeGrid {
        grid-template-columns: repeat(4, 1fr);
    }

    .invoice-summary-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media screen and (max-width: 767.98px) {
    .task-grid, .task-grid.task-tracker-task-grid.employeeGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    .invoice-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 575.98px) {
    .task-grid, .task-grid.task-tracker-task-grid.employeeGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.total-hour-card {
    border-radius: 0 !important;
    border: 1px solid #ededed !important;
    border-bottom: 0 !important;
}

    .total-hour-card #totalWorkingTime {
        font-weight: 600;
        font-style: italic;
    }

.profile-img img {
    width: 100%;
    border-radius: 10px;
    /* box-shadow: 0 10px 25px #0000004d; */
    padding: 3px;
    object-fit: cover;
}

table.dataTable thead th.sorting {
    position: relative;
}

    /* Base sortable column */
    table.dataTable thead th.sorting::after {
        content: "\f0dc";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 11px;
        margin-left: 6px;
        opacity: 0.4;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }

table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc {
    position: relative;
}
    /* Ascending */
    table.dataTable thead th.sorting_asc::after {
        content: "\f0de"; /* fa-sort-up */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 11px;
        opacity: 1;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }

    /* Descending */
    table.dataTable thead th.sorting_desc::after {
        content: "\f0dd"; /* fa-sort-down */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 11px;
        opacity: 1;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }

.profile-tabs {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

    .profile-tabs .nav-link.active {
        background: #f00e4b !important;
        color: #ffffff !important;
        border: 1px solid transparent !important;
    }

table tbody td a:hover {
    color: #f00e4b !important;
}

.dt-footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 12px; */
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 0 0 20px;
}

.invoice-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 576px) {
    .dt-footer-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}


.profile-tabs .nav-link {
    border: 1px solid #dedede !important;
    color: #222 !important;
}

/* Dropdown Styles */

.dropdown-toggle::after {
    display: none !important;
}

.attendance-dropdown.dropdown-toggle::after {
    display: block !important;
}

.dropdown-menu {
    padding: 0 !important;
    border: none !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

******************************************** ******************************************** .l-navbar .dropdown-menu {
    position: absolute !important;
    width: 200px !important;
    left: 77% !important;
    top: -31px !important;
    z-index: 2 !important;
    background: #e8e8e8 !important;
    border-radius: 0 6px 6px 6px !important;
    list-style: none !important;
}

.l-navbar .dropdown-menu::before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    top: 4px;
    left: -15px;
    /* margin-left: -15px; */
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #e8e8e8 transparent;
    transform: rotate(-90deg);
}

.l-navbar.show-nav .dropdown-menu::before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    top: 4px;
    left: 0%;
    margin-left: -15px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #e8e8e8 transparent;
}

.dropdown-menu .dropdown-item {
    font-size: 14px !important;
    margin-bottom: 0;
}

.l-navbar .dropdown-menu .dropdown-item {
    padding: 0.4rem !important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #d9d7d7 !important;
    color: #222 !important;
}

.nav-item .dropdown-header {
    background-color: rgb(157 150 150) !important;
    padding: 10px;
    width: 350px;
    border-radius: 0.375rem 0.375rem 0 0;
}

.dropdown-header h3 {
    color: #ffffff !important;
    font-size: 14px !important;
}

.dropdown-header a {
    color: #ffffff !important;
    font-size: 12px !important;
    position: relative;
    padding-left: 0;
}

    .dropdown-header a::after {
        content: "";
        position: absolute;
        width: 0;
        height: 1px;
        background: #ffffff;
        bottom: 1px;
        left: 0;
        transition: all 0.5s;
    }

    .dropdown-header a:hover::after {
        width: 100%;
    }

.notification-menu .dropdown-menu {
    padding: 0;
    position: relative;
}

.notification-menu .dropdown-list {
    max-height: 200px;
    overflow-y: auto;
}

    .notification-menu .dropdown-list::-webkit-scrollbar {
        width: 5px;
    }

    .notification-menu .dropdown-list::-webkit-scrollbar-thumb {
        background: #797777;
        border-radius: 20px;
        cursor: pointer;
    }

    .notification-menu .dropdown-list li a {
        padding: 10px;
    }

.notification-menu .dropdown-menu::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -10px;
    left: 90%;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent rgb(157 150 150) transparent;
}

.notification-menu .dropdown-list li a:nth-child(1) {
    padding-left: 2rem;
    position: relative;
}

.notification-menu .dropdown-list li {
    position: relative;
}

    .notification-menu .dropdown-list li a.close-btn {
        position: absolute;
        right: 19px;
        top: 2px;
        /* padding: 10px; */
    }

.dropdown-list li span {
    position: absolute;
    left: 0;
    top: 6px;
}

.fixed-height-1 {
    min-height: 500px;
}

.dropdown-list li a.close-btn i {
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

    .dropdown-list li a.close-btn i:hover {
        background-color: rgb(157 150 150);
        color: #ffffff;
    }

.dropdown-list li span i {
    font-size: 14px;
    color: #f00e4b;
}

/* Stat Cards */
.stat-card {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.stat-card__icon {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.1;
}

.status-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 10px;
}

@media screen and (max-width: 1399.98px) {
    .status-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767.98px) {
    .status-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}


.status-cards .status-card .status-card-head {
    margin-bottom: 10px;
}

.stat-card__icon i {
    font-size: 100px;
}

.stat-card__content span {
    font-size: 1.8rem;
    font-weight: 700;
}

.progress {
    height: 0.5rem !important;
    background: #ffffff !important;
}

.stat-card p span {
    font-size: 1rem;
}

/* Chart Cards */
.chart-card,
.leave-request__card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(162, 161, 168, 0.2);
}

.notice-wrapper {
    height: 440px;
    overflow-y: scroll;
}

    .notice-wrapper::-webkit-scrollbar {
        width: 5px;
    }

    .notice-wrapper::-webkit-scrollbar-thumb {
        background: #797777;
        border-radius: 20px;
        cursor: pointer;
    }

.notice-board {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px;
    height: 100%;
    border: 1px solid rgba(162, 161, 168, 0.2);
}

.table.dashboard-table th {
    padding: 12px 30px !important;
    font-size: 1rem !important;
    vertical-align: middle;
    background: #F5F6FA !important;
    border-bottom: 1px solid #EBECEF;
}

/* Hide DataTables internal sizing header row */
table.dataTable thead tr[style*="height: 0px"] {
    display: none !important;
}


.attendance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: #374151;
}

/* Common item */
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

/* Badge */
.legend-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    background: #f9fafb;
}

/* Status colors */
.legend-item.present .legend-badge {
    color: #16a34a;
    background: #ecfdf5;
}

.legend-item.absent .legend-badge {
    color: #dc2626;
    background: #fef2f2;
}

.badge.red {
    color: #dc2626;
    background: #fef2f2;
}

.legend-item.holiday .legend-badge {
    color: #2563eb;
    background: #eff6ff;
}

.legend-item.weekend .legend-badge {
    color: #6b7280;
    background: #f3f4f6;
}


.date-range-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

    /* Icon buttons */
    .date-range-pill .icon-btn {
        width: 28px;
        height: 28px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        background: #ffffff;
        color: #6b7280;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all 0.2s ease;
    }

        .date-range-pill .icon-btn:hover {
            background: #f3f4f6;
            color: #111827;
        }

        /* Calendar button highlight */
        .date-range-pill .icon-btn.calendar {
            background: #eff6ff;
            border-color: #dbeafe;
            color: #f00e4b;
        }

/* Date text */
.date-range-text {
    font-weight: 500;
    white-space: nowrap;
}


.notice-content span {
    font-size: 12px;
    color: #a4a4a4;
}

.dashboard-table .btn-danger,
.attendance-sheet .btn-primary {
    width: 7rem;
    color: #ffffff !important;
}

/* Payslip */
.payslip {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px !important;
}

/* Employee Attendance */
.employee-cards,
.attendance-sheet {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px !important;
}

/* Typeahead Container */
.twitter-typeahead {
    width: 100% !important;
    display: block !important;
}

    /* Typeahead Input Field */
    .twitter-typeahead .tt-input,
    .twitter-typeahead .tt-hint {
        width: 100%;
        height: calc(1.5em + 0.5rem + 2px);
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border-radius: 0.25rem;
    }

/* Typeahead Dropdown Menu */
.tt-menu {
    width: 100%;
    margin-top: 2px;
    padding: 8px 0;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

/* Typeahead Dataset */
.tt-dataset {
    width: 100%;
}

/* Typeahead Suggestions */
.tt-suggestion {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #212529;
    transition: background-color 0.15s ease-in-out;
}

    .tt-suggestion:hover,
    .tt-suggestion.tt-cursor {
        background-color: #f8f9fa;
        color: #16181b;
    }

    .tt-suggestion strong {
        font-weight: 600;
        color: #000;
    }

    .tt-suggestion small {
        display: block;
        color: #6c757d;
        font-size: 0.75rem;
        margin-top: 2px;
    }

/* Empty/Not Found State */
.tt-menu .tt-dataset-employees .empty-message {
    padding: 12px 16px;
    color: #6c757d;
    font-size: 0.875rem;
    text-align: center;
}

/* Scrollbar Styling for Dropdown */
.tt-menu::-webkit-scrollbar {
    width: 8px;
}

.tt-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.tt-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .tt-menu::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Input Group Integration */
.input-group .twitter-typeahead {
    flex: 1 1 auto;
    width: 1%;
}

/* Clear Button Styling */
#clearEmployee {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Loading State (optional) */
.tt-suggestion.loading {
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Highlight Matched Text */
.tt-suggestion .tt-highlight {
    font-weight: 700;
    background-color: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tt-menu {
        max-height: 200px;
    }

    .tt-suggestion {
        padding: 10px 12px;
        font-size: 0.8125rem;
    }
}

/* Focus State */
.twitter-typeahead .tt-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Disabled State */
.twitter-typeahead .tt-input:disabled {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* Error State (if needed) */
.twitter-typeahead .tt-input.is-invalid {
    border-color: #dc3545;
}

    .twitter-typeahead .tt-input.is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

@media screen and (max-width: 767.98px) {
    .employee-cards {
        padding: 10px !important;
    }
}

.employee-cards .profile-tabs .nav-link.active {
    color: #000000 !important;
    background-color: transparent !important;
    font-weight: 600;
    border-radius: 0;
    border-bottom: 3px solid #000000;
}

.details-card:nth-child(1) {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    padding: 25px;
}

.details-card #mytable td {
    background-color: #eeeeee;
}

.details-card #mytable th {
    min-width: 115px;
}

.attendance-table th,
.attendance-table td {
    height: 53px;
}

    .attendance-table th:nth-child(1) {
        min-width: 200px;
    }

.status__approved {
    font-size: 12px;
    background-color: #09c70e;
    padding: 2px 8px;
    border-radius: 15px;
    color: white;
    display: inline-block;
    min-width: 74px;
    text-align: center;
}

.status__rejected {
    font-size: 12px;
    background-color: #f12424;
    padding: 2px 8px;
    border-radius: 15px;
    color: white;
    display: inline-block;
    min-width: 74px;
    text-align: center;
}

.status__pending {
    font-size: 12px;
    background-color: #FFA500;
    padding: 2px 8px;
    border-radius: 15px;
    color: white;
    display: inline-block;
    min-width: 74px;
    text-align: center;
}

.status__unknown {
    font-size: 12px;
    background-color: #D32F2F;
    padding: 2px 8px;
    border-radius: 15px;
    color: white;
    display: inline-block;
    min-width: 74px;
    text-align: center;
}

.status__cancelled {
    font-size: 12px;
    background-color: #808080;
    padding: 2px 8px;
    border-radius: 15px;
    color: white;
    display: inline-block;
    min-width: 74px;
    text-align: center;
}

.bottom-fixed-nav {
    position: fixed;
    bottom: 0;
    background: #f2f2f2;
    width: 100%;
    left: 0;
    z-index: 9999;
    display: none;
}

ul.bottom-nav_list {
    margin-bottom: 0;
    display: flex;
    width: 100%;
    /*    column-gap: 20px;*/
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
}

.bottom-sub-bar.more-submenu.show {
    justify-content: flex-start;
    column-gap: 10px;
}

.bottom-fixed-nav a.nav_link.active::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 86%;
    height: 3px;
    background: rgb(237, 29, 86) !important;
    border-radius: 7px 7px 0 0;
    transform: translateX(-50%);
}

.bottom-sub-bar {
    position: fixed;
    bottom: 74px;
    background: #f2f2f2;
    left: 0;
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    width: 100%;
    padding: 0 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.bottom-sub-bar::-webkit-scrollbar {
    height: 4px;
}

.bottom-sub-bar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}


    .bottom-sub-bar.show {
        display: flex !important;
        justify-content: flex-start;
        column-gap: 10px;
    }

.bottom-fixed-nav .nav_link {
    border-bottom: 0;
    padding: 1rem 10px;
}

.bottom-nav_list .sub_link .nav_name {
    font-size: 11px !important;
    width: max-content;
}


.bottom-fixed-nav .sign-out-icon {
    border-top: none;
}

.bottom-sub-bar a.nav_link.sub_link {
    flex-direction: column;
    padding: 1rem 10px !important;
    gap: 6px;
}

@media screen and (max-width: 767.98px) {
    .bottom-fixed-nav {
        display: block;
    }

    .main-section {
        padding-bottom: 78px;
    }
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid;
    border-left: 0.3em solid transparent;
    transform: rotate(-90deg);
}

/* Button Styles */
.btn-primary {
    background-color: #f00e4b !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 30px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    transition: all 0.5s ease !important;
}

    .btn-primary:hover {
        background-color: #de043e !important;
    }

.btn-secondary {
    background-color: #f8f8f9 !important;
    border: 1px solid #dedede !important;
    color: #222 !important;
    padding: 9px 30px !important;
    border-radius: 5px !important;
    transition: all 0.5s ease !important;
    font-size: 14px !important;
}

    .btn-secondary:hover {
        background-color: #5b5b5b !important;
        color: #ffffff !important;
    }

.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid #dedede !important;
    padding: 8px 28px !important;
    border-radius: 30px !important;
}

    .btn-outline-primary:hover {
        background-color: #289cf5 !important;
        color: #ffffff !important;
    }

.fc-toolbar {
    background-color: #ffff;
    /* Bootstrap primary color */
    color: #ffffff;
    border-radius: 8px;
    padding: 10px;
}

.fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Day cell styles */
.fc-day {
    border: 1px solid #e0e0e0;
    /* Light border for day cells */
}

    .fc-day.fc-day-today {
        background-color: #e9f7fe;
        /* Highlight today's date */
    }

/* Event styling */
.fc-event {
    background-color: #28a745;
    /* Green color for approved leaves */
    color: white;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

    /* Adjust hover effects */
    .fc-event:hover {
        background-color: #218838;
        /* Darker green on hover */
        cursor: pointer;
    }

.tasktracker-list #mytable_info {
    display: inline-block;
    font-weight: 400;
    padding-top: 25px;
    font-size: 0.9375rem;
    color: #4B4E55 !important;
    position: absolute;
}

.tasktracker-list .dataTables_paginate {
    border-radius: .25rem;
    padding: 20px 0;
}

    .tasktracker-list .dataTables_paginate .paginate_button {
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
    }

        .tasktracker-list .dataTables_paginate .paginate_button:hover {
            background-color: #f00e4b;
            color: white !important;
        }

        .tasktracker-list .dataTables_paginate .paginate_button.active .page-link {
            background-color: #f00e4b;
            border-color: #f00e4b;
            color: white !important;
        }

.tasktracker-list .popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.tasktracker-list .popup-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 400px;
}

.tasktracker-list .popup-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

.tasktracker-list .popup-text {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
}

.tasktracker-list .btn-close {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

    .tasktracker-list .btn-close:hover {
        background-color: #0056b3;
    }

.tasktracker-list .dataTables_scrollBody::-webkit-scrollbar {
    display: none;
}

.tasktracker-list .filter-section {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    column-gap: 10px;
}

/* Media Query */
@media screen and (min-width: 767.98px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem);
    }

    .header {
        height: auto;
        padding: 12px;
    }

    .l-navbar {
        left: 0;
        /*        padding: 1rem 1rem 0 0;*/
    }

    .show-nav {
        width: calc(var(--nav-width) + 156px);
        padding-right: 0;
    }

    .l-navbar.show-nav .l-sub-bar {
        left: calc(var(--nav-width) + 156px);
        width: calc(100% - var(--nav-width) - 156px);
    }

    .l-sub-bar.show {
        display: flex !important;
        flex-wrap: nowrap;
        visibility: visible;
        pointer-events: auto;
    }

    .body-pd {
        padding-left: var(--nav-width);
        padding-top: 67px;
    }

    .body-padding {
        padding-left: calc(var(--nav-width) + 3px) !important;
    }
}

@media screen and (max-width: 767.98px) {
    .main-section {
        /*        padding: 4rem 1rem 0rem 1rem;*/
    }

    .left-nav__img {
        display: none;
    }

    .body-padding {
        padding-top: 0 !important;
    }

    .admin__name {
        display: none;
    }

    .l-navbar.show-nav .dropdown-menu::before {
        content: " ";
        position: absolute;
        width: 0;
        height: 0;
        top: 4px;
        left: 0%;
        margin-left: -15px;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #e8e8e8 transparent;
    }

    .l-navbar.show-nav .nav-logo {
        justify-content: flex-start !important;
    }

    .l-navbar.show-nav .header_toggle {
        left: 50px;
        top: 30px;
    }

    .l-sub-bar,
    .l-sub-bar.show {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        /* Mobile: bottom-sub-bar only; desktop top bar is hidden */
    }

    .header_toggle {
        position: fixed;
        left: 1rem;
        top: 25px;
    }

    .profile-header {
        justify-content: center;
    }

    .navbar-brand img {
        max-width: 110px !important;
    }
}

@media screen and (max-width: 575.98px) {
    /*    .table-right__icons,
    .table-right__xlsx {
        display: none;
    }*/

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    p,
    th,
    td,
    a,
    label,
    button,
    li,
    .form-select,
    .form-control {
        font-size: 0.8rem !important;
    }

    .payslip span,
    .payslip strong,
    .payslip li {
        font-size: 0.8rem !important;
    }

    /*    .search-bar {
        width: 210px;
    }*/

    .profile-tabs {
        justify-content: center;
    }
}


.leave-summary h4 {
    font-weight: 600;
    border-bottom: 1px solid #dedede;
    padding-bottom: 20px;
}

.leave-summarty-list h5 {
    display: inline-flex;
    align-items: center;
    column-gap: 7px;
    font-size: 18px !important;
    margin-bottom: 15px;
}

.leave-summarty-list ul {
    padding-left: 28px;
}

.leave-summarty-list li {
    font-size: 1rem !important;
    margin-bottom: 7px !important;
}

.leave-summary {
    padding: 20px;
    border: 1px solid #dedede;
    border-radius: 8px;
}

.leave-summarty-list:last-child {
    margin-bottom: 0 !important;
}

    .leave-summarty-list:last-child ul {
        margin-bottom: 0 !important;
    }

.fc-today-button.fc-button.fc-button-primary {
    text-transform: capitalize;
    background: #f00e4b !important;
    border: 1px solid #f00e4b !important;
}

.fc .fc-button:disabled {
    opacity: 40% !important;
}

button.fc-prev-button.fc-button.fc-button-primary {
    background: none;
    color: #000;
    border: 1px solid #dedede;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 50% !important;
}

    button.fc-prev-button.fc-button.fc-button-primary:hover {
        background: #f00e4b;
        border: 1px solid #f00e4b;
        color: #fff;
    }

.fc .fc-button-group {
    column-gap: 10px;
}

button.fc-next-button.fc-button.fc-button-primary {
    background: none;
    color: #000;
    border: 1px solid #dedede;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 50% !important;
}

    button.fc-next-button.fc-button.fc-button-primary:hover {
        background: #f00e4b;
        border: 1px solid #f00e4b;
        color: #fff;
    }

.fc .fc-toolbar.fc-header-toolbar {
    padding: 10px 0 !important;
}

.leave-applied {
    margin-top: 19px;
}

    .leave-applied p {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #121212;
    }

@media screen and (max-width: 767.98px) {
    .leave-applied p {
        font-size: 14px !important;
    }

    .table.dashboard-table th {
        font-size: 14px;
    }
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
    box-shadow: unset !important;
}

div#commonToast {
    border-radius: 8px !important;
    background: #ffffff;
    overflow: hidden;
    top: 60px !important;
    border: 1px solid #dedede;
}

.toast-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dedede;
}

.filterDropdown button {
    border: none !important;
}

.filterDropdown .nav-tabs {
    border-bottom: 0 !important;
}

.filterDropdown li.nav-item button {
    color: #222;
    text-align: left;
}

#commonToast button.ml-2.mb-1.close {
    margin-bottom: 0 !important;
    border: none;
    background: unset;
    font-size: 1.5rem !important;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 0;
}

@media screen and (max-width: 1299.98px) {
    .about-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 991.98px) {
    .about-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767.98px) {
    .about-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

.about-list li {
    margin-bottom: 12px;
    font-size: 15px !important;
    padding: 15px;
    background: #f2f2f2;
    border-radius: 6px;
    position: relative;
    padding-left: 2.2rem;
}

@media screen and (max-width: 767.98px) {
    .about-list li {
        font-size: 14px !important;
    }
}

.about-list li span img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 18px;
    left: 11px;
}

.about-list li strong {
    color: #121212;
}

strong#toastTitle {
    font-size: 1.2rem;
    color: #f00e4b;
}

@media screen and (max-width: 767.98px) {
    h1 {
        font-size: 1.5rem !important;
    }
}

/*.input-close {
    position: relative;
}

.input-close input {
    height: 100%;
}

span#clearBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    font-size: 20px;
}*/

/**********EMS STYLE FIXES**********/

/*.date-filter-form .btn-primary {
    height: 58px;
    padding: 1rem 55px !important;
}

.date-filter-form .row.mb-4 {
    margin-bottom: 16px !important;
}*/

/* Professional Attendance View Tabs - Rounded Design */
/* FORCE nav to stay in one row */
.attendance-view-tabs {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 12px;
    border-bottom: none;
}

    /* PREVENT Bootstrap from making items full width */
    .attendance-view-tabs .nav-item {
        float: none !important;
        width: auto !important;
    }

    /* Ensure links behave like buttons */
    .attendance-view-tabs .nav-link {
        display: inline-flex !important;
        align-items: center;
        white-space: nowrap;
    }

.performance-tabs {
    column-gap: 10px;
}

    .performance-tabs .btn.active::before {
        content: none;
    }

    .performance-tabs .btn.active {
        background: #f00e4b !important;
        color: #ffffff !important;
        padding: 10px 40px !important;
        border-radius: 10px !important;
    }

    .performance-tabs .btn {
        padding: 10px 40px !important;
        border-radius: 10px !important;
        border: 1px solid #f00e4b !important;
        color: #f00e4b !important;
    }

        .performance-tabs .btn:hover {
            background: #f00e4b !important;
            color: #ffffff !important;
        }

.project-work-table td {
    padding: 16px 30px !important;
    border-bottom: 0;
}

.project-work-table th {
    background: #f2f2f2 !important;
}

.project-work-table-resp::-webkit-scrollbar {
    display: none;
}

#mytable th {
    background: #F5F6FA !important;
    border-bottom: 1px solid #EBECEF;
}

    #mytable th:last-child {
        border-right: 0;
    }

.custom-table-top .btn-primary.btn-sm {
    border-radius: 0 6px 6px 0 !important;
}

.custom-table-top button#dateRangeDropdown {
    padding: 1rem .75rem;
    border: 1px solid #f00e4b;
    color: #f00e4b;
    background: #ffffff !important;
}

    .custom-table-top button#dateRangeDropdown.show {
        background: #ffffff !important;
    }

.custom-table-top div#customDateRange {
    border-radius: 7px !important;
    overflow: hidden;
}

.custom-table-top button#clearEmployee {
    background: #f00e4b;
    color: #ffffff;
    font-size: 17px;
    padding: 1rem 20px;
    border: 1px solid #f00e4b;
}

.custom-table-top .task-grid-item .input-group {
    flex-wrap: nowrap;
    border-radius: 6px;
    overflow: hidden;
    width: 270px !important;
}

    .custom-table-top .task-grid-item .input-group .tt-hint {
        border-radius: 6px 0 0 6px !important;
    }

#applyLeaveForm label {
    color: #000000;
    margin-bottom: 10px;
}

button#filterDropdown {
    border: 1px solid #000;
    padding: 1rem 10px;
}

/*
.task-grid.task-tracker-task-grid {
    grid-template-columns: repeat(6, 1fr);
}*/

#exportToExcel,
.exporttoexcelbtn,
#exportExcelBtn {
    background: #00a900 !important;
    border: 1px solid #00a900 !important;
    padding: 12px 16px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: 10px;
}

    .exporttoexcelbtn i {
        color: #ffffff !important;
    }

.action-btn {
    background-color: white !important;
    border: 1px solid #ccc !important;
    padding: 8px 12px !important;
}

.custom-project-repost-wrapper .btn-outline-secondary {
    border: 1px solid #000000;
    color: #000000;
}

.custom-project-repost-wrapper .table-top p {
    color: #f00e4b;
    font-weight: 600 !important;
    font-size: 15px !important;
    width: max-content;
}

#mytable.invoice-table-wrapper th,
#mytable.invoice-table-wrapper td {
    padding: 12px 10px !important;
}

    #mytable.invoice-table-wrapper th:first-child,
    #mytable.invoice-table-wrapper td:first-child {
        padding-left: 30px !important;
    }

.btn-outline--primary {
    border: 1px solid #f00e4b !important;
    color: #f00e4b !important;
}

    .btn-outline--primary:hover {
        color: #000000 !important;
        border: 1px solid #000000 !important;
    }

.modal-previous-notes {
    border-top: 1px solid #dee2e6;
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    top: -16px;
}

.employee-cards .dropdown-menu .nav-link.active {
    border: 1px solid #f00e4b;
    color: #f00e4b;
    border-radius: 5px;
}

.employee-cards .dropdown-menu .nav-tabs {
    border-bottom: 0;
}

/* Slide down animation */
.mobile-search-modal .modal-dialog {
    transform: translateY(-100%);
    transition: transform 0.35s ease-in-out;
}

.mobile-search-modal.show .modal-dialog {
    transform: translateY(0);
}

.mobile-search-modal .modal-header {
    background: #f7f7f7;
}

.mobile-search-modal .modal-body {
    display: flex;
}

    .mobile-search-modal .modal-body .btn-primary {
        width: 58px !important;
        padding: 0 !important;
        border-radius: 0 6px 6px 0 !important;
    }

    .mobile-search-modal .modal-body input {
        border-radius: 6px 0 0 6px;
    }

.mobile-search-icon .btn-primary {
    width: 38px !important;
    height: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
}

div#recurringProjectsTable_filter,
div#projectsTable_filter {
    display: flex;
    justify-content: end;
}

div#recurringProjectsTable_length label,
div#projectsTable_length label {
    display: inline-flex;
    align-items: center;
}

    div#recurringProjectsTable_length label select,
    div#projectsTable_length label select {
        border: none;
        background-color: unset !important;
        padding: 10px 18px 10px 10px !important;
        color: #f00e4b;
    }

        div#recurringProjectsTable_length label select:focus,
        div#projectsTable_length label select:focus {
            box-shadow: none;
        }

table#recurringProjectsTable thead th,
table#projectsTable thead th {
    background: #f2f2f2;
}

.custom-form-check {
    display: flex;
    column-gap: 10px;
}

    .custom-form-check label {
        width: max-content;
    }

.previous-notes-card-body p {
    font-size: 1rem !important;
    color: #f00e4b;
}

.previous-notes-card-body small {
    color: #000000 !important;
    font-size: 15px;
}

.previous-notes-card-body {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 10px;
}

#notesList .card .previous-notes-card-body:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.mobile-filter {
    background: #fff;
    border-radius: 10px;
    animation: slideDown 0.3s ease;
}

a.dropdown-item.active {
    background: #f00e4b;
    color: #ffffff !important;
}

    a.dropdown-item.active::before {
        content: none;
    }

.custom-search-input-group {
    display: flex;
    flex-wrap: nowrap !important;
    min-width: 0;
    max-width: 100%;
}

    .custom-search-input-group .btn {
        border-radius: 0 6px 6px 0 !important;
        font-size: 17px;
        width: 60px !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    .custom-search-input-group .form-control,
    .custom-search-input-group input {
        min-width: 0;
        flex: 1 1 auto;
    }

table.dataTable.dashboard-table thead th {
    padding: 12px 30px !important;
}

.no-data-message {
    padding: 2.5rem;
    margin: 3rem auto;
    max-width: 600px;
    border: 1px solid #f00e4b;
    border-radius: 1rem;
    background-color: #ffffff;
    text-align: center;
    font-size: 1.25rem;
    color: #495057;
}

    .no-data-message i {
        font-size: 3rem;
        color: #f00e4b;
        margin-bottom: 1rem;
        display: block;
    }

    .no-data-message p {
        font-size: 18px !important;
        color: #f00e4b;
    }

.dataTables_processing {
    position: absolute;
    top: 53%;
    transform: translate(50%);
    left: 55%;
    color: #f00e4b;
}

div#projectsTable_paginate,
div#recurringProjectsTable_paginate {
    position: unset !important;
    /*    padding-top: unset !important;*/
}

.navbar-brand img {
    max-width: 130px;
}

a.nav_link.sub_link.active::before {
    content: '';
    position: absolute;
    background: #ed1d56 !important;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    top: unset;
}

.custom-text-area.form-floating > .form-control:not(:placeholder-shown) ~ label {
    top: 0 !important;
}

.date-picker-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Calendar icon */
.calendar-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #f00e4b;
    border-radius: 6px;
    background: #f00e4b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Native date input hidden */
.native-date-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Arrows */
.nav-arrow {
    text-decoration: none;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1;
}

/* Date text */
.date-text {
    font-weight: 500;
    white-space: nowrap;
}


textarea {
    min-height: 150px !important;
    background-color: #F7F7F7 !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 1500px) {
    .status-card-content.project::before {
        content: none;
    }
}

@media screen and (max-width: 1449.98px) {


    .status-card .status-card-content .count {
        font-size: 22px !important;
    }

    .status-card h2 {
        color: #121212 !important;
        font-weight: 500 !important;
        margin-bottom: 0 !important;
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
}

@media screen and (max-width: 1399.98px) {
    .dashboard-table th:not(th:nth-child(2), th:nth-child(1)) {
        min-width: 195px;
    }

    .table.dashboard-table th:first-child {
        min-width: 200px;
    }
}

@media screen and (max-width: 1299.98px) {
    .custom-table-top {
        overflow-x: auto;
    }
}

@media screen and (max-width: 767.98px) {
    .profile-tabs {
        flex-wrap: wrap !important;
    }

    .table.dashboard-table th {
        min-width: 150px !important;
    }

    #mytable th,
    table#mytable tbody tr td {
        padding: 12px !important;
    }
}
.client-list {
    max-height: 352px;
    overflow-y: scroll;
}

.overdue-project-wrapper .table-responsive{
    max-height: 352px;
}

/* Webkit (Chrome, Edge, Safari) */
    .overdue-project-wrapper .table-responsive::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .overdue-project-wrapper .table-responsive::-webkit-scrollbar-track {
        background: #f8fafc;
        border-radius: 4px;
    }

    .overdue-project-wrapper .table-responsive::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 4px;
    }

        .overdue-project-wrapper .table-responsive::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }


/* Webkit (Chrome, Edge, Safari) */
.client-list::-webkit-scrollbar {
    width: 6px;
}

    .client-list::-webkit-scrollbar-track {
        background: #f8fafc;
        border-radius: 4px;
    }

    .client-list::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 4px;
    }

        .client-list::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }


.client-card {
    background: white;
    /* border-radius: 12px; */
    padding: 1.25rem;
    margin-bottom: 1rem;
    /* border: 1px solid #eef2f6; */
    transition: all 0.2s ease;
    position: relative;
    padding-bottom: 0;
}

/* Flex Layout for the card content */
.client-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Individual Sections within the card */
.col-client-main {
    display: flex;
    align-items: center;
    min-width: 250px;
    flex: 2;
}

.col-info {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
}

.col-status {
    flex: 0 0 100px;
    text-align: center;
}

.col-financial {
    flex: 0 0 120px;
    text-align: right;
}

.col-actions {
    flex: 0 0 80px;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Typography helpers for the card layout */
.label-text {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.25rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.value-text {
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
}

.email-text {
    color: #64748b;
    font-size: 0.9rem;
}

/* Client Avatar/Logo Styling */
.client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    /* Slightly squarer for card look */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
    margin-right: 1rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Avatar Color Variations */
.avatar-blue {
    background-color: #eff6ff;
    color: #3b82f6;
}

.avatar-green {
    background-color: #f0fdf4;
    color: #22c55e;
}

.avatar-orange {
    background-color: #fff7ed;
    color: #f97316;
}

.avatar-purple {
    background-color: #faf5ff;
    color: #a855f7;
}

.avatar-pink {
    background-color: #fdf2f8;
    color: #ec4899;
}

.avatar-teal {
    background-color: #f0fdfa;
    color: #14b8a6;
}

.client-name {
    font-weight: 600;
    color: #0f172a;
    font-size: 1rem;
    margin: 0;
}

.client-industry {
    color: #64748b;
    font-size: 0.85rem;
}

/* Badges */
.badge-soft {
    padding: 0.4em 0.8em;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 20px;
}

.badge-soft-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-soft-warning {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-soft-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-soft-secondary {
    background-color: #f1f5f9;
    color: #475569;
}

/* Action Buttons */
.btn-icon {
    color: #cbd5e1;
    background: white;
    border: 1px solid #e2e8f0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

    .btn-icon:hover {
        border-color: #4f46e5;
        color: #4f46e5;
        background-color: #e0e7ff;
    }

/* Search styling */
.search-box {
    position: relative;
    max-width: 400px;
    width: 100%;
}

    .search-box i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
    }

    .search-box input {
        padding-left: 40px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background-color: #f8fafc;
    }

        .search-box input:focus {
            background-color: white;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
            border-color: #4f46e5;
        }

/* Checkbox */
.custom-check {
    margin-right: 1rem;
    transform: scale(1.1);
    cursor: pointer;
}

.custom-action-button {
    border: 1px solid #e3e3e3 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px !important;
}

canvas#performanceChart {
    max-width: 370px !important;
    max-height: 370px !important;
    margin: 26px auto;
}

.btn-icon-dropdown {
    border: 1px solid #e3e3e3 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 12px !important;
    column-gap: 6px;
    font-size: 14px !important;
    background: #f7f7f7 !important;
}

input.form-control[type="date"] {
    padding: 10px 12px !important;
}

.badge.bg-warning {
    background-color: #ffefc0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #997200 !important;
}

.badge.yellow {
    background-color: #ffefc0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #997200 !important;
}

.badge.status-yellow {
    background-color: #ffefc0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #997200 !important;
}

.badge.bg-dark {
    background-color: #e9e9e9 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #000000 !important;
}

.badge.grey {
    background-color: #e9e9e9 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #000000 !important;
}

.badge.status-grey {
    background-color: #e9e9e9 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #000000 !important;
}

.badge.bg-danger {
    background-color: #ffe8e8 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #ff0000 !important;
}

.badge.status-red {
    background-color: #ffe8e8 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #ff0000 !important;
}

.badge.bg-success {
    background-color: #ecfdf5 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #059669 !important;
}

.badge.green {
    background-color: #ecfdf5 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #059669 !important;
}

.badge.status-green {
    background-color: #ecfdf5 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #059669 !important;
}

.custom-primary-btn {
    padding: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    font-size: 14px !important;
}

.custom-primary-add {
    display: inline-flex !important;
    align-items: center;
    column-gap: 10px;
    padding: 10px 20px !important;
    font-size: 14px !important;
}

.custom-action-button.view-details {
    border: 1px solid #000000 !important;
}

.total-summary-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #f00e4b;
    background: #ffd4e0;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #f00e4b;
}

.btn-completed {
    background: #ffffff !important;
    border: 1px solid #22C55E !important;
    color: #22C55E !important;
    font-size: 14px !important;
    min-width: 118px !important;
}

.btn-in-process {
    background: #ffffff !important;
    border: 1px solid #6da4ff !important;
    color: #6da4ff !important;
    font-size: 14px !important;
    min-width: 118px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 7px !important;
}

    .btn-in-process:hover {
        background: #6da4ff;
        color: #ffffff;
    }

.btn-completed:hover {
    color: #ffffff;
    background: #22C55E;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: unset !important;
    border: none !important;
}

.attendance-view-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.month-selector-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Month text */
.month-text {
    font-weight: 600;
    white-space: nowrap;
}

/* Arrows */
.month-selector-pill .nav-arrow {
    text-decoration: none;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

    .month-selector-pill .nav-arrow:hover {
        color: #2563eb;
    }


.attendance-view-tabs .nav-link {
    width: 34px !important;
    height: 34px;
    padding: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
}

    .attendance-view-tabs .nav-link i {
        font-size: 14px;
    }

    /* Hover */
    .attendance-view-tabs .nav-link:hover {
        background: #f3f4f6;
        color: #111827;
    }

    /* Active state (blue highlight like image) */
    .attendance-view-tabs .nav-link.active {
        background: #eaf2ff;
        color: #2563eb;
    }

/* Attendance Matrix (mobile usability) */
.attendance-matrix-page .table-top {
    row-gap: 10px;
}

.attendance-matrix-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.attendance-matrix-page .employee-col {
    min-width: 200px;
}

.attendance-matrix-page .date-col {
    min-width: 52px;
}

.attendance-matrix-page .sticky-col {
    position: sticky;
    left: 0;
    background: #ffffff;
    z-index: 3;
    box-shadow: 6px 0 10px -8px rgba(0, 0, 0, 0.35);
}

.attendance-matrix-page thead .sticky-col {
    z-index: 6;
}

@media (max-width: 575.98px) {
    .attendance-matrix-page .table-top {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .attendance-matrix-page .attendance-view-tabs {
        margin-bottom: 0 !important;
    }

    .attendance-matrix-page .employee-col {
        min-width: 160px;
    }

    .attendance-matrix-page .date-col {
        min-width: 44px;
    }
}

/* Attendance admin selector (Index) */
.attendance-employee-selector {
    width: 250px;
}

@media (max-width: 575.98px) {
    .attendance-employee-selector {
        width: 100%;
    }

    .attendance-admin-view-tabs {
        margin-bottom: 0 !important;
    }
}


.btn-icon-dropdown.custom-icon-pd {
    padding: 12px 12px !important;
}

.dataTables_wrapper {
    border: 1px solid #a2a1a833;
}

.toggle-wrapper {
    padding: 6px 1rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

.zoho-checkin-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Base pill */
.zoho-check-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
}

/* Time text */
.zoho-time {
    min-width: 70px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Circular action icon */
.zoho-action {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Check-in (green like Zoho) */
.zoho-check-in {
    background: #00c26f;
}

#attendanceStatusMessage {
    color: #00c26f;
}

.task-grid.task-tracker-task-grid.employeeGrid {
    grid-template-columns: repeat(6, 1fr);
}

.template-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Card */
.template-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: #1f2937;
    transition: all 0.2s ease;
}

@media screen and (max-width: 767.98px){
    .template-card {
        flex-wrap: wrap;
    }
}

    /* Icon */
    .template-card .icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #ffffff;
        color: #f00e4b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px !important;
    }

    /* Text */
    .template-card .title {
        font-weight: 600;
        font-size: 15px;
    }

    .template-card .description {
        font-size: 13px;
        color: #6b7280;
    }




.zoho-check-in .zoho-action {
    color: #00c26f;
}

/* Check-out (red variant) */
.zoho-check-out {
    background: #ef4444;
}

    .zoho-check-out .zoho-action {
        color: #ef4444;
    }


.custom-toggle {
    position: relative;
    width: 53px;
    height: 30px;
    border-radius: 9999px;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .custom-toggle.active {
        background-color: #10b981;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    }


        .custom-toggle.active::before {
            content: none !important;
        }


.toggle-handle {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) !important;
}

.custom-toggle.active .toggle-handle {
    transform: translateX(1.5rem) translateY(-50%) !important;
}

.icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
    stroke: currentColor;
    fill: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .client-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .col-client-main,
    .col-info,
    .col-status,
    .col-financial,
    .col-actions {
        width: 100%;
        text-align: left;
        flex: none;
        margin-bottom: 0.5rem;
    }

    .header{
        padding: 10px;
    }

    li.nav-item.nav-profile {
        column-gap: 10px;
    }

    .col-actions {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    .col-financial {
        text-align: left;
    }

    .label-text {
        display: inline-block;
        /* Show labels on mobile for clarity */
        width: 100px;
    }
}

.timeline-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    position: relative;
}

    .timeline-row.today-row {
        border: 2px solid #007bff;
        background: #f8f9ff;
    }

.timeline-day-info {
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.day-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.today-badge {
    background: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.day-name {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-weight: 500;
}

.day-date {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.timeline-content {
    flex: 1;
    position: relative;
    height: 50px;
    margin: 0 16px;
}

.timeline-base-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    transform: translateY(-50%);
}

.timeline-work-time-indicator {
    position: absolute;
    top: 50%;
    width: 0;
    height: 30px;
    border-left: 1.5px dashed #cbd5e1;
    transform: translateY(-50%);
    z-index: 1;
}

    .timeline-work-time-indicator::after {
        content: attr(data-label);
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 9px;
        color: #94a3b8;
        white-space: nowrap;
        font-weight: 600;
        text-transform: uppercase;
    }

.timeline-worked-line {
    position: absolute;
    top: 50%;
    height: 4px;
    background-color: #28a745;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 2;
}

.timeline-leave-line {
    position: absolute;
    top: 50%;
    height: 4px;
    background-color: #dc3545;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 2;
}

.timeline-break-line {
    position: absolute;
    top: 50%;
    height: 4px;
    background-color: #dc3545;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.6;
}

.timeline-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.timeline-checkin {
    background-color: #28a745;
}

.timeline-checkout {
    background-color: #dc3545;
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    min-width: 200px;
    gap: 16px;
}

.timeline-label-left,
.timeline-label-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-label-right {
    text-align: right;
}

.check-in-time,
.check-out-time {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.late-indicator {
    font-size: 12px;
    color: #fd7e14;
    font-weight: 500;
}

.hours-worked {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.upcoming-row .timeline-base-line {
    opacity: 0.3;
}

.timeline-status-label {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    z-index: 4;
}

.clickable-timeline {
    cursor: pointer;
    transition: background-color 0.2s;
}

    .clickable-timeline:hover {
        background-color: rgba(0, 123, 255, 0.05);
        border-radius: 4px;
    }

.timeline-dot {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: #cbd5e1;
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border: 1px solid white;
}

.timeline-dot-start {
    left: 0;
    transform: translate(-50%, -50%);
}

.timeline-dot-end {
    right: 0;
    transform: translate(50%, -50%);
}

.timeline-dot.early-active {
    background-color: #28a745;
}

.timeline-dot.late-active {
    background-color: #28a745;
    /* Green for extra worked hours */
}

.timeline-range-labels {
    position: relative;
    height: 25px;
    margin-top: 15px;
    margin-left: calc(12px + 80px + 16px + 16px);
    /* Align exactly with timeline-content start */
    margin-right: calc(12px + 200px + 16px + 16px);
    /* Align exactly with timeline-content end */
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
}

.timeline-range-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
}

/* Right Sidebar Styles */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    animation: fadeIn 0.3s;
}

.right-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 1041;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

    .right-sidebar.open {
        right: 0;
    }

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .sidebar-header h5 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.sidebar-date-info {
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-date-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.sidebar-entry-item {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #f8f9fa;
}

    .sidebar-entry-item:last-child {
        margin-bottom: 0;
    }

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.entry-session-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}

.entry-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.entry-time-label {
    font-size: 12px;
    color: #666;
}

.entry-time-value {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.entry-hours {
    font-size: 12px;
    color: #28a745;
    font-weight: 500;
}

/* List view styles */
.status-green {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.status-red {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.status-yellow {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;
}

.status-orange {
    background-color: #ffe5d0;
    color: #8b4513;
    border-color: #ffcc99;
}

/* Push toastr down from top */
#toast-container.toast-top-right {
    top: 80px;
}

#toast-container.toast-top-left {
    top: 80px;
}

#toast-container.toast-top-center {
    top: 80px;
}

/* Hide labels on desktop where layout implies meaning, show on mobile */
@media (min-width: 769px) {
    .mobile-label {
        display: none;
    }
}

.btn-loading {
    opacity: 0.7;
    cursor: not-allowed !important;
}

.button-loader-spinner {
    display: inline-block;
    vertical-align: middle;
}

/* Ensure spinner aligns properly in zoho-check-btn buttons */
.zoho-check-btn .button-loader-spinner {
    margin-right: 8px;
}

@media screen and (max-width: 1600px) {
    .invoice-summary-grid_item .status-card h2 {
        font-size: 16px !IMPORTANT;
    }

    .invoice-summary-grid_item .status-card .status-card-content .count {
        font-size: 20px !important;
    }
}

.btn-loading {
    opacity: 0.7;
    cursor: not-allowed !important;
}

.button-loader-spinner {
    display: inline-block;
    vertical-align: middle;
}

/* Ensure spinner aligns properly in zoho-check-btn buttons */
.zoho-check-btn .button-loader-spinner {
    margin-right: 8px;
}

.calendar-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.calendar-day-header {
    text-align: center;
    font-weight: 700;
    padding: 10px;
    color: #4b5563;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

.calendar-day {
    min-height: 120px;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

    .calendar-day:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        border-color: #d1d5db;
    }

    .calendar-day.other-month {
        opacity: 0.3;
        background-color: #f9fafb;
    }

    .calendar-day.current-month {
        background-color: white;
    }

    .calendar-day.today {
        border: 2px solid #3b82f6;
        background-color: #eff6ff;
    }

.calendar-day-number {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #1f2937;
}

.calendar-day-status {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: auto;
    text-align: center;
    font-weight: 600;
    text-transform: capitalize;
}

.calendar-legend {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 15px;
    background: #f8fafc;
    border-radius: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

/* Status Colors */
.status-green {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.status-red {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-yellow {
    background-color: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.status-orange {
    background-color: #ffedd5;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.status-halfday {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.attendance-nav-container {
    gap: 5px;
    background: rgba(255, 255, 255, 0.5);
    padding: 5px 8px;
    border-radius: 4px;
}

    .attendance-nav-container.attendance-checkin {
        border: 1px solid rgb(0 194 111);
    }

    .attendance-nav-container.attendance-checkout {
        border: 1px solid #ef4444;
    }

.attendance-total-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #6b7280;
    line-height: 1;
    margin-bottom: 3px;
}

.attendance-total-value {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    font-family: 'Monaco', 'Consolas', monospace;
}

.btn-attendance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 30px;
    height: 30px;
}

@media screen and (max-width: 767.98px){
    .btn-attendance {
        width: 26px;
        height: 26px;
    }
}

.btn-checkin {
    background: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

    .btn-checkin:hover {
        background: #059669;
        transform: translateY(-1px);
        box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3);
    }

.btn-checkout {
    background: #ef4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

    .btn-checkout:hover {
        background: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3);
    }

.attendance-icon {
    display: flex;
    align-items: center;
    font-size: 11px;
}

.btn-attendance:active {
    transform: translateY(0);
}

.btn-attendance:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Fix for timeline vs calendar view overlap or sizing */
.employee-cards {
    overflow: visible;
}

/* Premium Attendance Header & Controls */
.attendance-controls-header {
    margin-top: -1px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.date-navigation-pill {
    background: #fdfdfd !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s;
}

    .btn-icon-sm:hover {
        background: rgba(0,0,0,0.05);
        color: #2563eb !important;
    }

.check-btn {
    min-width: 140px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .check-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 10px -1px rgba(0, 0, 0, 0.15);
    }

    .check-btn:active {
        transform: translateY(0);
    }

/* Responsive Timeline */
@@media (max-width: 992px) {
    .timeline-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .timeline-day-info {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-width: auto;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
    }

    .day-label {
        flex-direction: row;
        gap: 10px;
    }

    .timeline-labels {
        min-width: auto;
        width: 100%;
        border-top: 1px solid #f0f0f0;
        padding-top: 8px;
    }

    .timeline-content {
        margin: 15px 0;
        height: 40px;
    }

    .timeline-range-labels {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 576px) {
    .attendance-controls-header {
        flex-direction: column;
        align-items: center !important;
    }

    .action-buttons-group {
        width: 100%;
    }

    .check-btn {
        width: 100%;
    }
}

/* ===============================
   MOBILE ATTENDANCE – FINAL UI
   =============================== */

.attendance-mobile-view {
    display: none;
}

@media (max-width: 767.98px) {

    .attendance-desktop-view {
        display: none;
    }

    #commonRightSidebar {
        width: 100% !important;
        height: 100% !important;
        right: -100% !important;
        padding-bottom: 90px;
    }

    #commonRightSidebar.open{
        right: 0 !important;
    }

    .calendar-header {
        gap: 0;
    }

    .zoho-action {
        width: 20px;
        height: 20px;
    }

    .attendance-bottom-bar.hidden {
        display: none !important;
    }


    .attendance-mobile-view {
        display: block;
    }

    .mobile-attendance-row {
        position: relative;
        background: #ffffff;
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        color: #202020;
        border: 1px solid #e0e0e0;
    }

        .mobile-attendance-row.today {
            background: #c9f5e3;
            color: #000;
        }

    /* DATE */
    .mobile-date-box {
        text-align: center;
        width: 52px;
    }

    .mobile-date {
        font-size: 1.4rem;
        font-weight: 700;
    }

    .mobile-day {
        font-size: 0.7rem;
        opacity: 0.7;
    }

    /* TIMELINE */
    .mobile-timeline {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .mobile-time-row {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.85rem;
    }

    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .dot-in {
        background: #00e5a8;
    }

    .dot-out {
        background: #ff5f5f;
    }

    .mobile-line {
        width: 2px;
        height: 16px;
        background: #555;
        margin-left: 3px;
    }

    /* HOURS */
    .mobile-hours-box {
        text-align: right;
        min-width: 50px;
    }

    .hours {
        font-size: 1rem;
        font-weight: 700;
        margin: 20px 0 5px 0 !important;
    }

    .hrs-text {
        font-size: 0.7rem;
        opacity: 0.7;
    }

    /* STATUS */
    .mobile-status {
        position: absolute;
        right: 16px;
        top: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .calendar-container {
        padding: 12px;
    }

    /* Month navigation row */
    .calendar-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        font-weight: 600;
        font-size: 0.95rem;
        color: #111827;
    }

    /* Weekday header */
    .calendar-header {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-size: 0.65rem;
        font-weight: 600;
        color: #6b7280;
        margin: 10px 0;
    }

    /* Calendar grid */
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;
    }

    /* Day card */
    .calendar-day {
        background: #ffffff;
        border-radius: 14px;
        padding: 8px 6px 10px;
        min-height: 72px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        position: relative;
        cursor: pointer;
    }

        /* Other month days */
        .calendar-day.other-month {
            opacity: 0.35;
        }

    /* Hide text labels in calendar */
    .calendar-day-status {
        font-size: 0;
        padding: 0;
        margin-top: 9px;
    }

    /* Calendar day card */
    .calendar-day {
        background: #ffffff;
        border-radius: 8px;
        padding: 10px 6px;
        min-height: unset;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        position: relative;
        cursor: pointer;
    }


    /* Date number */
    .calendar-day-number {
        font-size: 0.9rem;
        font-weight: 700;
        color: #111827;
        z-index: 2;
        position: relative;
        margin-bottom: 0;
    }

    /* -------- Status Indicator Bar -------- */
    .calendar-day::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 4px;
        background: transparent;
    }

    /* Present */
    .calendar-day .status-green ~ .calendar-day::after,
    .calendar-day.status-green::after {
        background: #2563eb;
    }

    /* Absent */
    .calendar-day.status-red::after {
        background: #dc2626;
    }

    /* Weekend */
    .calendar-day.status-yellow::after {
        background: #f59e0b;
    }

    /* Leave */
    .calendar-day.status-orange::after {
        background: #ea580c;
    }

    /* Today */
    .calendar-day.today {
        background: #2563eb;
        color: #ffffff;
        box-shadow: none;
    }

        .calendar-day.today .calendar-day-number {
            color: #ffffff;
        }

    /* Other month days */
    .calendar-day.other-month {
        opacity: 0.35;
    }

    /* Tap feedback */
    .calendar-day:active {
        transform: scale(0.96);
    }
}
/* ===============================
   MOBILE HEADER (LIGHT MODE)
   =============================== */
@media (max-width: 991.98px) {

    .attendance-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        color: #1f2937;
        position: sticky;
        top: 62px;
        z-index: 100;
    }

    .body-pd.admin-pd{
        padding-top: 0 !important;
    }

    .main-section.attendance-main {
        padding-bottom: 140px;
    }

    .attendance-header-mobile .icon-btn {
        background: transparent;
        border: none;
        color: #374151; /* slate-700 */
        font-size: 1rem;
        padding: 6px;
        border-radius: 6px;
    }

            .attendance-header-mobile .icon-btn:active {
                background: #f3f4f6; /* subtle tap feedback */
            }

    .mobile-date-text {
        font-size: 0.9rem;
        font-weight: 600;
        color: #111827; /* slate-900 */
        text-align: center;
        flex: 1;
        min-width: 0;
        margin: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ===============================
       BOTTOM FIXED BAR (LIGHT MODE)
       =============================== */

    .attendance-bottom-bar {
        position: fixed;
        bottom: 78px;
        left: 0;
        right: 0;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid #e5e7eb; /* soft divider */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 999;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04); /* soft elevation */
    }

    .bottom-checkin {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bottom-total-hours {
        text-align: right;
        font-size: 0.75rem;
        color: #6b7280; /* slate-500 */
    }

        .bottom-total-hours strong {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            color: #111827; /* slate-900 */
        }
}
.leave-card {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border-radius: 0;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    text-decoration: none;
    color: #212529;
    transition: all 0.2s ease;
}

    .leave-card:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        transform: translateY(-2px);
    }

.leave-card-left {
    margin-right: 16px;
}

.leave-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.leave-card-body {
    flex-grow: 1;
}

.leave-count {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.leave-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 2px;
}

.leave-subtext {
    font-size: 0.8rem;
    color: #6c757d;
}

.leave-card-arrow {
    color: #adb5bd;
    font-size: 0.9rem;
}

/* Status Colors */
.leave-card.approved .leave-icon {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.leave-card.pending .leave-icon {
    background: rgba(255, 193, 7, 0.15);
    color: #d39e00;
}

.leave-card.rejected .leave-icon {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.leave-card.cancelled .leave-icon {
    background: rgba(108, 117, 125, 0.15);
    color: #495057;
}

/* Mobile polish */
@media (max-width: 575.98px) {
    .leave-count {
        font-size: 1.5rem;
    }
}

.leave-summary-wrapper .col-12:last-child .leave-card{
    border-bottom: 0 !important;
}

.dashboard-leave-request {
    overflow: hidden;
}

.employee-alert-card {
    margin: 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f2f2f2;
}

    .employee-alert-card h4 {
        max-width: 400px;
        margin: 0 auto;
        line-height: 1.3;
        font-weight: 400 !important;
        color: #3a3a3a;
        font-size: 20px;
    }

.no-data-message-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}

    .no-data-message-2 p {
        font-size: 16px !important;
    }

/* Inline Total Asset Value Pill */
.total-asset-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
}

    .total-asset-pill .icon {
        width: 28px;
        height: 28px;
        background: rgba(220, 53, 69, 0.1);
        color: #F00E4B;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .total-asset-pill .label {
        color: #6c757d;
        font-weight: 500;
    }

    .total-asset-pill .value {
        color: #F00E4B;
        font-weight: 700;
        font-size: 15px;
    }

.company-year-dropdown .dropdown-item.active {
    background: #ffffff;
}

    .company-year-dropdown .dropdown-item.active::before {
        content: none;
    }

@media screen and (max-width: 767.98px) {
    .total-summary-label {
        font-size: 12px !important;
        padding: 8px 12px !important;
        flex-grow: 1;
        text-align: center;
        white-space: nowrap;
    }

    .custom-primary-add {
        padding: 8px 12px !important;
        font-size: 12px !important;
        flex-grow: 1;
        justify-content: center;
    }
    
    .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .table-left, .table-left form, .search-bar {
        width: 100% !important;
        max-width: 100% !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
    }
    
    .table-right {

        width: 100%;
        justify-content: space-between;
        display: flex !important;
        flex-wrap: wrap;
    }

    .wfh-table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .wfh-filter-form, .wfh-date-inputs {
        width: 100% !important;
    }

    .wfh-date-inputs input {
        width: 50% !important;
    }

    .wfh-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 5px;
    }

    .employee-search-container {
        flex-grow: 1;
        min-width: 0;
    }

    /* Search / filter rows: stack on small screens */
    .search-bar form {
        flex-wrap: wrap !important;
    }

    .search-bar .form-select.ms-4,
    .search-bar .input-close.ms-4,
    .search-bar .ms-4.form-select {
        margin-left: 0 !important;
    }

    .search-bar form > .form-select,
    .search-bar form > .input-close,
    .search-bar form > .search-input {
        min-height: 38px;
    }

    .search-bar .btn-primary,
    .search-bar button[type="submit"] {
        flex: 0 0 auto !important;
        margin-top: 0;
    }

    /* Stacked filter tools (e.g. Invoice): full-width row for each control when only one per line */
    .search-bar form > * {
        max-width: 100%;
    }

    .custom-search-input-group {
        flex-wrap: wrap !important;
    }
}

/* Leave Request: ensure table can scroll horizontally on small screens */
.leave-request-page .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}


/* ============================================================
   COMMON MOBILE RESPONSIVE STYLES
   ============================================================ */

/* Mobile card list (hidden on desktop) */
.ems-card-list { display: none; }

@media (max-width: 767.98px) {
    /* Hide desktop elements, show mobile cards */
    .ems-desktop-only { display: none !important; }
    .ems-card-list { display: block; }

    /* Toolbar rows (WFH, etc.): inline search + button must shrink, not overflow */
    .employee-cards .table-top .d-flex.flex-wrap {
        min-width: 0;
        max-width: 100%;
    }

    .employee-cards .table-top .d-flex.gap-1:has(> input.form-control),
    .employee-cards .table-top .d-flex.gap-2:has(> input.form-control) {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .employee-cards .table-top .d-flex.gap-1 > input.form-control,
    .employee-cards .table-top .d-flex.gap-2 > input.form-control {
        min-width: 0;
        flex: 1 1 auto;
    }

    .employee-cards .table-top .d-flex.gap-1 > .btn,
    .employee-cards .table-top .d-flex.gap-2 > .btn {
        flex-shrink: 0;
    }

    .date-filter-form {
        flex-wrap: wrap !important;
        min-width: 0;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .date-filter-form input[type="date"] {
        min-width: 0;
        flex: 1 1 120px;
        max-width: 100%;
    }

    /* Each row becomes a card */
    .ems-card {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 0.85rem 1rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .ems-card:active {
        transform: scale(0.98);
        background-color: #fcfcfc;
    }

    .ems-card-avatar {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #f0f2f5;
        color: #495057;
        font-weight: 700;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e0e4e9;
    }

    .ems-card-body {
        flex: 1;
        min-width: 0;
    }

    .ems-card-title {
        font-weight: 600;
        font-size: 0.92rem;
        color: #1a1d21;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.2rem;
    }

    .ems-card-subtitle {
        font-size: 0.78rem;
        color: #6c757d;
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .ems-card-subtitle span { 
        display: inline-flex; 
        align-items: center; 
        gap: 0.25rem; 
    }

    .ems-card-right {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.4rem;
    }

    .ems-card-meta {
        font-size: 0.72rem;
        font-weight: 600;
        color: #495057;
    }

    /* Status badge adjustments for mobile cards */
    .ems-card .badge {
        padding: 0.35rem 0.6rem;
        font-size: 0.65rem;
        font-weight: 600;
        border-radius: 6px;
    }

    /* Top bar refinements for mobile */
    .ems-mobile-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        gap: 0.75rem;
    }
    
    /* Toolbar pills/filters in mobile */
    .date-picker-pill {
        display: flex;
        align-items: center;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        padding: 4px 8px;
        border-radius: 50px;
        gap: 8px;
    }
}

/* Secondary submenu level for bottom nav */
.bottom-sub-bar-2 {
    display: none;
    position: fixed;
    bottom: 154px; /* Above first level (74px + ~80px) */
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    z-index: 10001;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5rem;
    flex-wrap: nowrap;
}

.bottom-sub-bar-2.show {
    display: flex !important;
}

.bottom-sub-bar-2 .nav_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    min-width: 70px;
    font-size: 10px !important;
    gap: 4px;
}

.bottom-sub-bar-2 .nav_icon {
    font-size: 1.1rem !important;
}
@media (max-width: 576px) {
    .btn-primary {
        padding: 8px 14px !important;
        font-size: 13px;
    }
}
.add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .add-btn {
        width: 100%;
        justify-content: center;
        padding: 10px !important;
    }
    .table-top {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .client-right {
        width: 100%;
        justify-content: space-between;
    }
}