h2,
h1,
h3 {
    font-size: var(--font-lg);
    color: var(--text-main)
}

/* RESET */

body {
    margin: 0;
    background: var(--background-color);
    font-family: var(--font-family);
}

.auth-page {
    background-color: var(--background-color);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Common Button Style */
.btn-primary,
.btn-secondary {
    font-family: var(--font-family);
    font-size: var(--font-xs);
    padding: 6px 18px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Primary Button */
/* Primary Button */
.btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
}

/* ==========================
   PHOTO UPLOAD
========================== */

.auth-page .photo-box {
    width: 110px;
    height: 110px;

    border: 2px dashed var(--primary-color);
    border-radius: var(--radius-md);

    background: var(--container-bg);

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

    cursor: pointer;
    position: relative;
    overflow: hidden;

    margin-bottom: 10px;
    transition: 0.3s ease;
}

.auth-page .photo-box:hover {
    border-color: var(--primary-color);
}

.auth-page .photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.auth-page #addIcon {
    font-size: 40px;
    color: var(--icon-color);
    font-weight: 300;
}

/* ==========================
   CROP MODAL
========================== */

.auth-page .crop-modal {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.75);

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

    z-index: 9999;
    backdrop-filter: blur(4px);
}

.auth-page .crop-area {
    width: 500px;
    max-width: 90%;

    background: var(--diog-color);
    border: 1px solid var(--border-color);

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

    padding: var(--space-lg);
    box-shadow: var(--shadow-card);

    text-align: center;
}

.auth-page .crop-area img {
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

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

.auth-page .crop-buttons {
    margin-top: var(--space-md);

    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}

.auth-page .crop-save,
.auth-page .crop-cancel {
    border: none;
    cursor: pointer;

    padding: 7px 30px;
    border-radius: var(--radius-md);

    font-size: var(--font-sm);
    font-family: var(--font-family);

    transition: 0.3s ease;
}

/* Save Button */

.auth-page .crop-save {
    background: linear-gradient(90deg,
            var(--primary-color),
            var(--secondary-color));

    color: var(--button-text-color);
}

.auth-page .crop-save:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

/* Cancel Button */

.auth-page .crop-cancel {
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.auth-page .crop-cancel:hover {
    border-color: var(--primary-color);
}

/* Cropper Fix */

.auth-page .cropper-container.cropper-bg {
    max-width: 458px !important;
}

/* ==========================
   AUTH PAGE LOGIN
========================== */

.auth-page {
    min-height: 100vh;
    font-family: var(--font-family);
    color: var(--text-main);
}

.auth-page .login-container {
    display: flex;
    min-height: 100vh;
}

.submenu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.submenu-toggle i {
    margin-left: 0 !important;
    flex-shrink: 0;
}

.submenu-toggle i {
    transition: transform 0.3s ease;
}

/* open state */
.dropdown-submenu.active .submenu-toggle i {
    transform: rotate(-90deg);
}

/* ==========================
   LEFT SIDE
========================== */

.auth-page .login-left {
    width: 50%;
    padding: var(--space-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--background-color);
}

/* ==========================
   BUBBLES
========================== */

.auth-page .bubble {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg,
            var(--primary-color),
            var(--secondary-color));

    opacity: 0.35;
    filter: blur(80px);

    z-index: -1;
    pointer-events: none;

    animation: authFloat 10s infinite ease-in-out;
}

.auth-page .bubble1 {
    width: 350px;
    height: 350px;
    top: -120px;
    left: -120px;
}

.auth-page .bubble2 {
    width: 250px;
    height: 250px;
    bottom: -100px;
    right: -80px;
    animation-delay: 3s;
}

.dropdown-menu-wrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: none;

    -ms-overflow-style: none;

}


.dropdown-menu-wrapper::-webkit-scrollbar {
    display: none;
}

@keyframes authFloat {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -40px);
    }

    100% {
        transform: translate(0, 0);
    }
}

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

.auth-page .logo {
    position: absolute;
    top: 30px;
    left: 30px;
}

.auth-page .logo img {
    height: 40px;
}

/* ==========================
   CONTENT
========================== */

.auth-page .login-content {
    max-width: 550px;
    width: 100%;
    margin: auto;
}

.auth-page .login-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 3px;
}

.auth-page .login-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 13px;
}

/* ==========================
   FORM
========================== */

.auth-page .form-group {
    margin-bottom: var(--space-md);
}

.auth-page .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-sm);
    color: var(--text-main);
}

/* ==========================
   INPUT BOX
========================== */

.auth-page .input-box {
    position: relative;
}

.auth-page .left-icon {
    position: absolute;
    left: 14px;
    top: 56%;
    transform: translateY(-50%);
    width: var(--icon-md);
    height: var(--icon-md);
}

.auth-page .right-icon {
    position: absolute;
    right: 14px;
    top: 55%;
    transform: translateY(-50%);
    width: var(--icon-md);
    height: var(--icon-md);
    cursor: pointer;
}

.left-icon,
.right-icon {
    color: var(--text-main);
}

.auth-page .input-box input,
.auth-page .input-box select {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--text-field-border);

    background: var(--text-flid-bg-color);
    color: var(--text-main);

    font-size: 14px;
    font-family: var(--font-family);

    padding-left: 38px;
    padding-right: 50px;

    transition: 0.3s ease;
    box-shadow: var(--shadow-card);
}

.auth-page .input-box input::placeholder {
    color: var(--text-muted);
}

.auth-page .input-box input:focus,
.auth-page .input-box select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Autofill Fix */

.auth-page .input-box input:-webkit-autofill,
.auth-page .input-box input:-webkit-autofill:hover,
.auth-page .input-box input:-webkit-autofill:focus,
.auth-page .input-box input:-webkit-autofill:active {
    -webkit-box-shadow:
        0 0 0 30px var(--text-flid-bg-color) inset !important;

    -webkit-text-fill-color:
        var(--text-main) !important;
}

/* ==========================
   EXTRA OPTIONS
========================== */

.auth-page .form-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
}

.auth-page .forgot {
    text-decoration: none;
    color: var(--asset-color);
    transition: 0.3s;
}



.auth-page .remember-box {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-main);
}

/* Checkbox */

.auth-page .remember-box input {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--text-field-border);
    background: transparent;
    position: relative;
    cursor: pointer;
}

.auth-page .remember-box input:checked {
    background: var(--checkbox-fill);
    border-color: var(--checkbox-fill);
}

.auth-page .remember-box input:checked::after {
    content: "✓";
    color: var(--checkbox-check);
    font-size: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==========================
   BUTTON
========================== */
.submenu-dropdown.show {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0px;
}

.submenu-dropdown.show li {
    list-style: none;
}

.auth-page .login-btn {
    width: 100%;
    height: 48px;
    margin-top: var(--space-lg);

    border: none;
    border-radius: 30px;

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

    color: var(--button-text-color);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;

    transition: 0.3s ease;
}

.auth-page .login-btn:hover {
    transform: translateY(-2px);
    opacity: .95;
}

.auth-page .registar-company {
    text-align: center;
    margin-top: 10px;
}

.auth-page .registar-company a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--font-sm);
}

/* ==========================
   SUCCESS MODAL
========================== */

.auth-page .success-modal {
    background: var(--diog-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.auth-page .success-modal .modal-body {
    text-align: center;
    padding: 35px 25px;
}

/* Success Icon */

.auth-page .success-icon {
    width: 80px;
    height: 80px;

    margin: 0 auto 20px;

    border-radius: 50%;

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

    background: linear-gradient(135deg,
            var(--primary-color),
            var(--secondary-color));

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.auth-page .success-icon i {
    font-size: 38px;
    color: var(--button-text-color);
}

/* Title */

.auth-page .success-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 10px;
}

/* Text */

.auth-page .success-text {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Button */

.auth-page .success-btn {
    min-width: 160px;
    height: 48px;

    border: none;
    border-radius: var(--radius-md);

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

    color: var(--button-text-color);
    font-size: var(--font-sm);
    font-weight: 500;

    transition: 0.3s ease;
}

.auth-page .success-btn:hover {
    opacity: 0.95;
    transform: translateY(-2px);
}

/* Bootstrap Modal Fix */

.auth-page .modal-content {
    background: var(--card-bg);
    border: none;
}

.auth-page .modal-backdrop.show {
    opacity: 0.75;
    backdrop-filter: blur(4px);
}

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

.auth-page .login-right {
    width: 50%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.auth-page .login-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-page .login-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            #000000 8%,
            #000000b3 22%,
            #191E3C80 40%,
            transparent 65%);
    z-index: 1;
}

.auth-page .login-right img,
.auth-page .login-right video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================
   ALERT
========================== */

.auth-page .alert-danger,
.auth-page .alert-danger * {
    color: var(--error-color) !important;
}

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

@media (max-width: 768px) {

    .auth-page {
        overflow-y: auto;
    }

    .auth-page .login-container {
        flex-direction: column;
    }

    .auth-page .login-left {
        width: 100%;
        padding: 80px 25px 40px;
    }

    .auth-page .logo {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 30px;
        text-align: center;
    }

    .auth-page .logo img {
        margin: auto;
    }

    .auth-page .login-right {
        display: none;
    }
}

.app-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Icon Box */
.logo-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);

    background: linear-gradient(to bottom right,
            var(--background-gradient-start),
            var(--background-gradient-end));

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

    color: var(--button-text-color);
    font-size: 18px;
    font-weight: bold;

    box-shadow: var(--shadow-card);
}



/* Text */
.logo-text {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--font-family);
    letter-spacing: 2px !important;

    /* Gradient text */
    background: var(--text-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    letter-spacing: 0.5px;
}

/* Secondary Button */
.btn-secondary {
    background: var(--secondary-color);
    color: #fff;
    border: none;
}

/* Hover State */
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: var(--primary-color);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background: var(--secondary-color);
    color: #fff;
}

/* Remove blue outline on click */
.btn-primary:focus,
.btn-secondary:focus {
    outline: none;
    box-shadow: none;
}

/* HEADER */

.header {
    width: 100%;
    background: var(--appbar-color);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    position: sticky;
    top: 0px;
    z-index: 100;

}

/* NAVBAR */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}

/* LOGO */

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-main);
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
}

.logo-box {
    width: 36px;
    height: 36px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* MENU */

.menu {
    display: flex;
    gap: 36px;
    list-style: none;
    align-items: center;
    margin-bottom: 0px;
}

.menu-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: var(--font-sm);
    cursor: pointer;
    font-weight: var(--font-medium);
    gap: 5px;
}

.menu-link:hover {
    color: var(--primary-color);
}

.menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.menu-link.active {
    color: var(--primary-color);
    font-weight: 600;
}

/* Bottom Animated Border */
.menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 1.5px;
    border-radius: 20px;

    background: linear-gradient(90deg,
            transparent,
            var(--primary-color),
            transparent);
    background-size: 200% 100%;

    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;

    transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Active State */
.menu-link.active::after {
    transform: scaleX(1);
    opacity: 1;
    animation: borderMove 2s linear infinite;
}

/* Hover */
.menu-link:hover {
    transform: translateY(-1px);
}

/* Continuous Animation */
@keyframes borderMove {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.dropdown-menu a.active {
    color: var(--primary-color);
    font-weight: 600;
}

/* DROPDOWN */

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 32px;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: none;
    flex-direction: column;
    min-width: 180px;
    box-shadow: var(--shadow-card);

}



.dropdown-menu li a {
    padding: 8px 14px;
    display: block;
    color: var(--text-main);
    font-size: var(--font-xs);
}

.dropdown-menu li a:hover {
    background: var(--hover-bg);
}

.show-menu {
    display: block !important;
}

@media (max-width:768px) {

    .menu {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: var(--background-color);
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        display: none;
    }

    .dropdown-menu {
        position: relative;
        top: 0;
        border: none;
        box-shadow: none;
    }

}

/* RIGHT NAV */

.right-nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* SEARCH */



.search {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

/* Light mode */
[data-theme="light"] .search {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Dark mode */
[data-theme="dark"] .search {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}



.no-leave {
    color: var(--text-main);
    padding: 20px 0px;
}

.search input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-main);
    margin-left: 6px;
    font-size: var(--font-sm);
}

.search i {
    color: var(--text-muted);
}

/* ICON */

.bell {
    position: relative;
    color: var(--button-text-color);
    cursor: pointer;
    background: linear-gradient(to bottom right,
            var(--background-gradient-start),
            var(--background-gradient-end));
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

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

.bell-count {
    position: absolute;
    top: -14px;
    right: -8px;
    width: 24px;
    height: 24px;

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

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    color: var(--text-main);
    background: var(--asset-color);
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    line-height: 1;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* =========================================
NOTIFICATION BELL
========================================= */

.notify-main-wrapper {
    position: relative;
}

.notify-bell-box {
    position: relative;
    color: var(--button-text-color);
    cursor: pointer;
    background: linear-gradient(to bottom right,
            var(--background-gradient-start),
            var(--background-gradient-end));
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}



.notify-bell-box i {
    font-size: 18px;
    color: var(--button-text-color)
}

.notify-badge-count {
    position: absolute;
    top: -14px;
    right: -8px;
    width: 24px;
    height: 24px;

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

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    color: var(--button-text-color);
    background: var(--primary-color);
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    line-height: 1;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* =========================================
MODAL OVERLAY
========================================= */

.notify-modal-overlay-main {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    display: flex;
    justify-content: flex-end;

    opacity: 0;
    visibility: hidden;

    transition: 0.3s ease;

    z-index: 999999;
}

.notify-modal-overlay-main.show-notify-modal {
    opacity: 1;
    visibility: visible;
}

/* =========================================
MODAL CONTAINER
========================================= */

.notify-modal-container {
    width: 100%;
    max-width: 420px;
    height: 100vh;

    background: var(--background-color);

    border-left: 1px solid var(--border-color);

    display: flex;
    flex-direction: column;

    transform: translateX(100%);

    transition: 0.35s ease;
}

.notify-modal-overlay-main.show-notify-modal .notify-modal-container {
    transform: translateX(0);
}

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

.notify-modal-header-area {
    position: sticky;
    top: 0;

    z-index: 10;

    background: var(--background-color);

    padding: 14px 16px;

    border-bottom: 1px solid var(--border-color);
}

.notify-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 6px;
}

.notify-modal-top h2 {
    margin: 0;

    font-size: 20px;
    font-weight: 600;

    color: var(--text-main);
}

.notify-close-modal-btn {
    width: 38px;
    height: 38px;

    border: none;
    background: transparent;

    border-radius: 50%;

    cursor: pointer;
}

.notify-close-modal-btn i {
    font-size: 24px;
    color: var(--text-muted);
}

.notify-header-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}



.notify-modal-body-area {
    flex: 1;

    overflow-y: auto;
}



.notify-single-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding: 12px;

    border-bottom: 1px solid var(--border-color);

    transition: 0.3s ease;
}

/* unseen */

.notify-unseen-item {
    background: rgba(59, 130, 246, 0.08);

    border-left: 2px solid var(--primary-color);
}

/* seen */

.notify-seen-item {
    background: transparent;

    opacity: 0.82;
}

.notify-single-item:hover {
    background: var(--container-bg);
}


.notify-item-left {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    flex: 1;
}

.notify-item-left img {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

/* =========================================
CONTENT
========================================= */

.notify-user-content {
    flex: 1;
}

.notify-user-content h4 {
    margin: 0 0 2px;

    font-size: 14px;
    font-weight: 600;

    color: var(--text-main);
}

.notify-user-content p {
    margin: 0;

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

    color: var(--text-main);
}

.notify-user-content span {
    display: block;

    margin-top: 2px;

    font-size: 11px;

    color: var(--text-muted);
}

/* seen text */

.notify-seen-item .notify-user-content p,
.notify-seen-item .notify-user-content span {
    color: var(--text-muted);
}

/* =========================================
DELETE BUTTON
========================================= */

.notify-delete-item-btn {
    border: none;
    background: transparent;

    cursor: pointer;

    padding-top: 6px;

    flex-shrink: 0;
}

.notify-delete-item-btn i {
    font-size: 18px;

    color: var(--text-muted);

    transition: 0.3s ease;
}



/* =========================================
SCROLLBAR
========================================= */

.notify-modal-body-area::-webkit-scrollbar {
    width: 5px;
}

.notify-modal-body-area::-webkit-scrollbar-thumb {
    background: var(--primary-color);

    border-radius: 50px;
}

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

@media (max-width: 600px) {

    .notify-modal-container {
        max-width: 100%;
    }

    .notify-modal-header-area {
        padding: 12px 14px;
    }

    .notify-single-item {
        padding: 16px;
    }

    .notify-item-left img {
        width: 50px;
        height: 50px;
    }

    .notify-user-content h4 {
        font-size: 14px;
    }

    .notify-user-content p {

        font-size: 12px;
    }

    .notify-clear-all-btn {
        padding: 10px 18px;
        font-size: 13px;
    }

}

/* AVATAR */

.profile-user img {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.profile-user i {
    color: var(--text-main);
}

/* MOBILE MENU */

.menu-btn {
    display: none;
    color: var(--text-main);
    font-size: 22px;
    cursor: pointer;
}

.dropdown-menu {
    color: var(--text-main);
    padding: 0px;
    z-index: 10;
}

/* RESPONSIVE */

@media(max-width:900px) {

    .menu-btn {
        display: block;
    }

    .menu {
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        background: var(--background-color);
        flex-direction: column;
        display: none;
        padding: 20px;
        gap: 18px;
        border-top: 1px solid var(--border-color);
        z-index: 10;
    }

    .menu-item {
        margin-bottom: 16px;
    }

    .menu.show {
        display: flex;
    }

    .dropdown-menu {
        position: relative;
        top: 0;
        border: none;
        box-shadow: none;
    }

    .search {
        width: 140px;
    }

}

/* DASHBOARD GRID */
.db-dashboard {
    display: grid;
    gap: 20px;

    grid-template-columns:
        minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 0.6fr) minmax(0, 1.5fr);

    grid-template-areas:
        "budget employee holiday graph"
        "budget projects leave graph";
}

/* CARDS FIX */
.db-dashboard>div {
    min-width: 0;
    width: 100%;
}

/* GRID AREAS */
.budget-card {
    grid-area: budget;
}

.employee-card {
    grid-area: employee;
}

.holiday-card {
    grid-area: holiday;
}

.projects-card {
    grid-area: projects;
}

.leave-card {
    grid-area: leave;
}

.graph-card {
    grid-area: graph;
}

/* =========================
   TABLET VIEW (≤1024px)
========================= */
@media (max-width:1024px) {
    .db-dashboard {
        grid-template-columns: 1fr 1fr;

        grid-template-areas:
            "budget budget"
            "employee holiday"
            "projects leave"
            "graph graph";
    }
}

/* =========================
   MOBILE VIEW (≤768px)
========================= */
@media (max-width:768px) {
    .db-dashboard {
        grid-template-columns: 1fr;

        grid-template-areas:
            "budget"
            "employee"
            "holiday"
            "projects"
            "leave"
            "graph";
    }
}

/* =========================
   SMALL MOBILE (≤480px)
========================= */
@media (max-width:480px) {
    .db-dashboard {
        gap: 15px;
        padding: 10px;
    }

    .db-dashboard>div {
        border-radius: 12px;
    }
}

.db-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 10px;
    position: relative;
    border: 1px solid var(--border-color);
    ;
}

.db-budget-card {
    grid-area: budget;
    position: relative;
    overflow: hidden;

    background: var(--card-bg);
    color: var(--text-main);

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

/* 🔵 Top Left Shape */
.db-budget-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    background: var(--primary-color);
    top: 20px;
    left: 20px;

    border-radius: 30% 70% 60% 40% / 40% 40% 60% 60%;
    opacity: 0.9;
}

/* 🔵 Bottom Right Shape */
.db-budget-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: var(--primary-color);
    bottom: 20px;
    right: 20px;

    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    opacity: 0.9;
}



/* Content always above */
.db-budget-card>* {
    position: relative;
    z-index: 1;
}

/* Content above bubbles */
.db-budget-card>* {
    position: relative;
    z-index: 1;
}

.db-budget-card::before,
.db-budget-card::after,
.db-budget-card .bubble {
    filter: blur(100px);
}

.db-budget-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-budget-header span {
    color: var(--text-main);
}

.db-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--button-text-color);
}

.db-progress-bar {
    height: 10px;
    background: var(--container-bg);
    border-radius: 20px;
    margin: 20px 0;
}

.db-progress {
    height: 100%;
    width: 70%;
    background: linear-gradient(to bottom right,
            var(--background-gradient-start),
            var(--background-gradient-end));
    border-radius: 20px;
}

.db-money-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.db-credit {
    color: var(--primary-color);
}

.db-debit {
    color: var(--asset-color);
}

.db-profit-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background-color);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.db-arrow {
    width: 40px;
    height: 40px;
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    border: none;
    border-radius: 10px;
    color: white;
}

/* EMPLOYEE */
.db-employee-card {
    grid-area: employee;
}

.db-card-title {
    color: var(--text-main);
}

.db-employee-number {
    font-size: var(--font-xl);
    margin-top: 10px;
    color: var(--text-main);
}

.db-badge {
    background: var(--accent-color);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--button-text-color);
}

.db-avatars {
    display: flex;
    margin-top: 15px;
}

.db-avatars img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: -13px;
    border: 2px solid var(--button-text-color);
    object-fit: cover;
}

.dropdown-menu-wrapper.show {
    list-style: none;
}

.dropdown-menu-wrapper.show::marker {
    display: none;
    content: "";
}

p {
    margin-bottom: 0px;
}

.db-more {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--highlight-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    color: var(--button-text-color);
}

/* HOLIDAY */
.db-holiday-card {
    grid-area: holiday;
    background: linear-gradient(to bottom right,
            var(--background-gradient-start),
            var(--background-gradient-end));
    display: flex;
    flex-direction: column;
    justify-content: space-between;


}

.db-holiday-card h1 {
    font-size: var(--font-xl);
    color: var(--button-text-color);
}

.holiday-info p,
.holiday-info span {
    color: var(--button-text-color)
}

/* PROJECT */
.db-project-card {
    grid-area: projects;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.db-project-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: var(--text-main);
}

.db-active {
    background: var(--asset-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--button-text-color);
}

.db-project-total {
    font-size: var(--font-xl);
    color: var(--text-main);
}

.db-project-total p {
    font-size: var(--font-md);
}

.db-arrow-circle {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 45px;
    height: 45px;
    border: 1px solid var(--text-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

/* LEAVE */
.db-leave-card {
    grid-area: leave;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-main);
}

.db-leave-card h2 {
    font-size: var(--font-xl);
}

/* GRAPH */
.db-graph-card {
    grid-area: graph;
    height: 340px !important;
}

.db-graph-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
}

.chart-graph {
    height: 270px !important;
}





.custom-select {
    background-color: var(--container-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Hover */
.custom-select:hover {
    border-color: var(--primary-color);
}

/* Focus */
.custom-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

/* dropdown options */
.custom-select option {
    background: var(--container-bg);
    color: var(--text-main);
}

/* Bottom Section */
.bottom-section {
    display: grid;
    grid-template-columns: 1.2fr 2.8fr;
    gap: var(--space-lg);
    margin-top: 20px;
}

/* ===== Tablet View ===== */
@media (max-width: 1024px) {
    .bottom-section {
        grid-template-columns: 1fr 1.5fr;
        gap: var(--space-md);
    }
}

/* ===== Small Tablet ===== */
@media (max-width: 768px) {
    .bottom-section {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

/* ===== Mobile View ===== */
@media (max-width: 480px) {
    .bottom-section {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        margin-top: 15px;
    }
}

/* Section Headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.section-header h3 {
    font-size: 18px;
    font-weight: var(--font-bold);
    color: var(--text-main);
    letter-spacing: -0.4px;
    margin-bottom: 0px;
    font-weight: 600;
}

.see-all {
    font-size: var(--font-xs);
    background: var(--primary-color);
    color: var(--button-text-color);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.see-all:hover {
    background: var(--primary-color);
    color: var(--button-text-color);
    cursor: pointer;
}

/* Employee List */
.employee-list {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    isolation: isolate;
}

/* Gradient Shape Like Image */
.employee-list {
    position: relative;
    overflow: hidden;
}

/* Gradient Shape */
.employee-list::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(ellipse at bottom left,
            color-mix(in srgb, var(--primary-color) 70%, transparent) 0%,
            color-mix(in srgb, var(--secondary-color) 40%, transparent) 22%,
            color-mix(in srgb, var(--primary-color) 15%, transparent) 38%,
            transparent 58%);

    transform: scale(1.2);
    pointer-events: none;
}

/* Soft Glow */
.employee-list::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 220px;
    left: -120px;
    bottom: -100px;
    background: radial-gradient(ellipse,
            color-mix(in srgb, var(--secondary-color) 45%, transparent) 0%,
            transparent 70%);
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
}

/* Content upar rahe */
.employee-list>* {
    position: relative;
    z-index: 1;
}

/* Content upar rahe */
.employee-list>* {
    position: relative;
    z-index: 2;
}

.employee-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 400px;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.employee-items::-webkit-scrollbar {
    display: none;
}

.employee-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

.employee-item:hover {
    background: var(--hover-bg);
    transform: translateX(4px);
}

.emp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.employee-item:hover .emp-avatar {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.emp-info {
    flex: 1;
}

.emp-info h4 {
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    color: var(--text-main);
    margin-bottom: 4px;
}

.emp-info p {
    font-size: 13px;
    color: var(--text-muted);
}

.menu-dots {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.menu-dots:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}

/* Project Progress Table */
.project-progress {
    background: var(--card-bg);
    padding: 20px;
    border-radius: var(--radius-lg);
    /* box-shadow: var(--shadow-card); */
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.progress-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.progress-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
    background: linear-gradient(135deg,
            var(--primary-color) 0%,
            var(--secondary-color) 50%,
            var(--primary-color) 100%);
}

.progress-table thead th {
    text-align: left;
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    color: var(--button-text-color);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.progress-table tbody {
    display: block;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: none;
}

.progress-table tbody::-webkit-scrollbar {
    display: none;
}

.progress-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.progress-table tbody tr:hover {
    background: var(--hover-bg);
}

.progress-table tbody td {
    padding: 18px;
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-weight: var(--font-medium);
}

.progress-table tbody tr td:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: var(--font-bold);
    color: var(--text-main);
}

.progress-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle .percent {
    position: absolute;
    font-size: 12px;
    font-weight: var(--font-bold);
    color: var(--text-main);
}

.project-name {
    font-weight: var(--font-medium);
    color: var(--text-main);
    font-size: 14px;
}

/* Employee Table Wrapper */
.employee-table-wrapper {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;

    /* Horizontal Scroll */
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;

    /* Hide Scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    position: relative;
    /* IE & Edge */
}

.employee-table-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

/* Employee Table */
.employee-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

/* Table Header */
.employee-table thead {
    background: linear-gradient(135deg,
            var(--primary-color) 0%,
            var(--secondary-color) 50%,
            var(--primary-color) 100%);
    border-bottom: 1px solid var(--border-color);
}

.employee-table thead th {
    text-align: left;
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    color: var(--button-text-color);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

/* Sortable Header */
.employee-table thead th.sortable {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.sort-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* Table Body */
.employee-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.employee-table tbody tr:hover {
    background: var(--hover-bg);
}

.employee-table tbody td {
    padding: 16px 20px;
    font-size: var(--font-xs);
    color: var(--text-main);
    vertical-align: middle;
    white-space: nowrap;
    /* One line data */
}

/* Employee Cell */
.employee-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.employee-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.employee-name {
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.employee-email {
    font-size: 13px;
    color: var(--text-muted);
}

/* Action Dots */
.action-dots {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.action-dots:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}

.menu-container {
    position: relative;
    display: inline-block;
}

/* 3 dots button */
.menu-dots {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: 0.2s;
}

.menu-dots:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}

/* Popup menu */
.menu-popup {
    position: absolute;
    right: 0px;
    top: 25px;
    width: 190px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: none;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}

/* LAST 2 ROWS -> OPEN UPWARD (BOTTOM TABLE) */
.employee-table-wrapper .employee-table tbody tr:last-child .menu-popup,
.employee-table-wrapper .employee-table tbody tr:nth-last-child(2) .menu-popup {
    top: auto !important;
    bottom: -20px !important;
    right: 20px;

}

/* Popup buttons */
.menu-popup button,
.menu-popup a {
    background: none;
    border: none;
    color: var(--text-main);
    text-align: left;
    padding: 8px 14px 6px 14px;
    font-size: var(--font-xs);
    cursor: pointer;
    transition: 0.2s;
}

.menu-popup button:hover {
    background: var(--hover-bg);
}

.heading-table h2 {
    font-size: var(--font-md);
    margin-bottom: 0px;
}

.btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    min-width: fit-content;

    background: linear-gradient(to bottom right,
            var(--background-gradient-start),
            var(--background-gradient-end));

    color: var(--button-text-color);
    border: none;
    border-radius: var(--radius-sm);

    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    font-family: var(--font-family);

    cursor: pointer;
    transition: all 0.2s ease;

    white-space: nowrap;
    /* Text niche nahi jayega */
    flex-wrap: nowrap;
}

.plus-icon {
    flex-shrink: 0;
    line-height: 1;
}

.heading-table-right {
    display: flex;
    align-items: center;
    gap: 10px;
    /* flex-wrap: wrap; */
}

.heading-table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* Pagination Wrapper */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1px;
}

/* Rows Select */
.rows-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    font-family: var(--font-family);

    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-weight: 500;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Common Button */
.page-btn {
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--container-bg);
    color: var(--text-main);

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

    font-size: var(--font-sm);
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Active */
.page-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Hover */
.page-btn:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* Icon Buttons */
.icon-btn {
    position: relative;
}

/* LEFT ARROW */
.icon-btn.prev::before {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--icon-color);
    border-bottom: 2px solid var(--icon-color);
    transform: rotate(45deg);
}

/* RIGHT ARROW */
.icon-btn.next::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--icon-color);
    border-top: 2px solid var(--icon-color);
    transform: rotate(45deg);
}

/* Hover icon color */


.checkout-container {
    padding: 0px;
    background: var(--background-color);
}

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

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

.checkout-header .page-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-main);
    margin: 0px;
}

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

/* ===============================
   FILTERS
================================= */

.checkout-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}




/* ===============================
   STATUS LEGEND
================================= */

.status-legend {
    display: flex;
    gap: 24px;
    padding: 10px;
    background: var(--card-bg);
    border-radius: var(--radius-md);

    border: 1px solid var(--border-color);
    max-width: 390px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.legend-dot.present {
    background: var(--primary-color);
}

.legend-dot.present {
    background: #22c55e;
}

.legend-dot.late {
    background: #f59e0b;
}

.legend-dot.absent {
    background: #ef4444;
}

.legend-dot.weekoff {
    background: #64748b;
}

.legend-label {
    font-size: 14px;
    color: var(--text-muted);
}

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

.attendance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

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

.attendance-card {
    background: color-mix(in srgb, var(--card-bg) 60%, transparent);
    border: 1px solid var(--border-color);
    padding: 15px;
    transition: 0.2s;
    border-radius: 12px;
}

.attendance-card:hover {
    box-shadow: var(--shadow-card);
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.card-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0px;
}

/* ===============================
   BADGES
================================= */

.badge-status {
    background: var(--text-main);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* Common Dot */
.badge-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}

/* Present */
.badge-present::before {
    background: #22c55e;
}

/* Late */
.badge-late::before {
    background: #f59e0b;
}

/* Absent */
.badge-absent::before {
    background: #ef4444;
}

/* Week Off */
.badge-weekoff::before {
    background: #64748b;
}

/* ===============================
   TIME ENTRIES
================================= */

.time-entries {
    margin-bottom: 12px;
}

/* remove border from last row */
.employee-table tbody tr:last-child td,
.employee-table tbody tr:last-child th {
    border-bottom: 0 !important;
}

.employee-table tbody tr:last-child {
    border-bottom: 0 !important;
}

.employee-table tbody tr:last-child td::after {
    display: none !important;
}

.time-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 8px 0;
    text-align: center;
}

.time-row:first-child {
    border-bottom: 1px solid var(--border-color);
}

.time-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.time-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

/* ===============================
   TOTAL HOURS
================================= */

.total-hours-1 {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.total-hours-1 span {
    color: var(--text-main);
    font-weight: 700;
}

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

@media (max-width: 1200px) {
    .attendance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .checkout-container {
        padding: 16px;
    }

    .checkout-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .checkout-filters {
        flex-direction: column;
        width: 100%;
    }

    .filter-select {
        width: 100%;
    }

    .status-legend {
        flex-direction: column;
    }

    .attendance-grid {
        grid-template-columns: 1fr;
    }
}

.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* profile section */
.profile-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.profile-user img {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    object-fit: cover;
}

.profile-user i {
    font-size: var(--icon-sm);
    color: var(--icon-color);
}

/* dropdown */
.dropdown-menu-wrapper {
    position: absolute;
    right: 0;
    top: 45px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: none;
    flex-direction: column;
    min-width: 180px;
    padding: var(--space-xs) 0;
    z-index: 100;
}

/* dropdown links */
.dropdown-menu-wrapper a {
    padding: 11px 12px;
    font-size: var(--font-xs);
    color: var(--text-main);
    text-decoration: none;
    display: block;
    transition: 0.2s;
}

.dropdown-menu-wrapper a:hover,
.dropdown-menu-wrapper a.active-submenu {
    background: var(--container-bg) !important;
    color: var(--primary-color) !important;
    border-radius: 0px;
}

.dropdown-submenu.active-parent>.submenu-toggle {
    color: var(--primary-color) !important;
}

/* active class */
.dropdown-menu-wrapper.show {
    display: block;
    padding: 0px;
}

.mp-pricing-wrapper {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    flex-wrap: wrap;
}

/* Card */

.mp-price-card {
    width: 320px;
    background: var(--card-bg);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    position: relative;
    text-align: center;
    transition: 0.3s;
    box-shadow: var(--shadow-card);
}

.mp-price-card:hover {
    transform: translateY(-8px);
}

/* Title */

.mp-plan-title {
    font-size: var(--font-lg);
    margin-bottom: 6px;
}

/* Subtitle */

.mp-plan-sub {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

/* Old price */

.mp-old-price {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.mp-old-price span {
    background: var(--primary-color);
    padding: 3px 8px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    margin-left: 6px;
    color: #fff;
}

/* Main price */

.mp-main-price {
    font-size: 48px;
    font-weight: bold;
    margin: 10px 0;
    color: var(--primary-color);
}

.mp-main-price small {
    font-size: 18px;
    color: var(--text-muted);
}

/* Free text */

.mp-free {
    color: var(--text-main);
    font-size: var(--font-xs);
    margin-bottom: var(--space-md);
}

/* Button */

.mp-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    color: #fff;
    font-size: var(--font-sm);
    cursor: pointer;
    margin-bottom: var(--space-sm);
    transition: 0.3s;
}

.mp-btn:hover {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
}

/* Renew text */

.mp-renew {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

/* Feature list */

.mp-feature-list {
    list-style: none;
    padding: 0;
    text-align: left;
}

.mp-feature-list li {
    margin: 10px 0;
    padding-left: 20px;
    position: relative;
    font-size: var(--font-sm);
}

.mp-feature-list li:before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* Popular Card */

.mp-popular {
    background: var(--container-bg);
    border: 1px solid var(--primary-color);
    transform: scale(1.05);
}

.mp-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* Tablet */

@media (max-width:1024px) {

    .mp-pricing-wrapper {
        gap: var(--space-md);
    }

    .mp-price-card {
        width: 280px;
        padding: var(--space-md);
    }

    .mp-main-price {
        font-size: 42px;
    }

}

/* Mobile */

@media (max-width:768px) {

    .mp-pricing-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .mp-price-card {
        width: 100%;
        max-width: 380px;
    }

    .mp-popular {
        transform: scale(1);
    }

}

/* Small Mobile */

@media (max-width:480px) {

    .mp-main-price {
        font-size: 36px;
    }

    .mp-plan-title {
        font-size: 20px;
    }

    .mp-feature-list li {
        font-size: 13px;
    }

}

.dropdown-menu li a {
    text-decoration: none;
}

.filter-select {
    padding: 6px 26px 5px 12px;
    font-size: var(--font-xs);
    font-family: var(--font-family);
    color: var(--text-main);

    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5z'/%3E%3C/svg%3E") no-repeat right 12px center;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: all 0.2s ease;
}

/* Light mode */
[data-theme="light"] .filter-select {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Dark mode */
[data-theme="dark"] .filter-select {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}



/* Option */

.filter-select option {
    background: var(--container-bg);
    color: var(--text-main);
}

.emp-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-md);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.employee-table thead th:first-child {
    border-top-left-radius: 12px;
}

.employee-table thead th:last-child {
    border-top-right-radius: 12px;
}

.emp-title {
    font-size: var(--font-lg);
    color: var(--text-main);
    margin: 0;
    font-weight: 600;
}

.btn-close {
    opacity: 1 !important;
    background-size: 14px !important;
    filter: none !important;
    box-shadow: none !important;

    /* Neutral gray icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23888888' d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") !important;
}

.emp-modal-box {
    background: var(--container-bg);
    border-radius: var(--radius-lg);
}



.emp-field {
    margin-bottom: 15px;
}

.emp-field label,
.emp-field p {
    font-size: var(--font-xs);
    color: var(--text-main);
    display: block;
    margin-bottom: 6px;
}

.emp-field input,
.emp-field textarea,
.emp-field select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-main);
    outline: none;
    font-size: var(--font-xs);
}

#editor {
    width: 100%;
    min-height: 300px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    overflow: hidden;
}

#editor .ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--card-bg);
    padding: 10px;
}

#editor .ql-toolbar.ql-snow .ql-formats {
    margin-right: 12px;
}

#editor .ql-toolbar button {
    border-radius: 6px;
    transition: 0.2s ease;
}

#editor .ql-toolbar button:hover {
    background: var(--hover-bg);
}

#editor .ql-toolbar button.ql-active {
    background: var(--hover-bg);
}

#editor .ql-toolbar button svg {
    width: 18px;
    height: 18px;
}

#editor .ql-toolbar button .ql-stroke {
    stroke: var(--text-main);
}

#editor .ql-toolbar button .ql-fill {
    fill: var(--text-main);
}

#editor .ql-toolbar .ql-picker {
    color: var(--text-main);
}

#editor .ql-toolbar .ql-picker-label {
    border-radius: 6px;
    color: var(--text-main);
}

#editor .ql-container.ql-snow {
    border: none !important;
    font-size: var(--font-xs);
    background: var(--card-bg);
    color: var(--text-main);
    min-height: 240px;
}

#editor .ql-editor {
    min-height: 240px;
    color: var(--text-main);
    padding: 14px;
    line-height: 1.6;
}

.ql-toolbar.ql-snow {
    border: 1px solid var(--border-color) !important;
    color: var(--text-main);
}

#editor .ql-editor.ql-blank::before {
    color: #999;
    font-style: normal;
}

.emp-field input:focus,
.emp-field select:focus {
    border-color: var(--primary-color);
}

/* Upload */

.emp-img-upload {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.emp-upload-box {
    width: 130px;
    height: 130px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.emp-upload-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emp-upload-icon {
    font-size: 30px;
    color: var(--text-muted);
}

/* Submit */

.emp-submit-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--font-sm);
    cursor: pointer;
}

.emp-submit-btn:hover {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
}

.emp-date-field {
    position: relative;
}

.emp-date-input {
    width: 100%;
    padding: 12px 40px 12px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-main);
}

.emp-date-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Calendar Icon */

.emp-date-icon {
    position: absolute;
    right: 12px;
    top: 42px;
    font-size: 16px;
    color: var(--icon-color);
    pointer-events: none;
}

/* modal background */

.modal {
    background: rgba(0, 0, 0, 0.45);
}


/* card */

.block-confirm-card {
    background: var(--card-bg);
    border: none;
    border-radius: var(--radius-lg);
    padding: 05px;
    text-align: center;
    box-shadow: var(--shadow-card);
    position: relative;
}


/* close icon */

.block-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    border: none;
    background: none;
    font-size: 26px;
    color: var(--text-muted);
    cursor: pointer;
}


/* body */

.block-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}


/* icon circle */

.block-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* icon */

.block-icon i {
    font-size: 55px;
    color: var(--primary-color);
}


/* text */

.block-text {
    font-size: var(--font-xs);
    color: var(--text-main);
    max-width: 420px;
}


/* button */

.block-btn {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    border: none;
    padding: 6px 28px;
    border-radius: var(--radius-md);
    font-size: var(--font-lg);
    color: #fff;
    cursor: pointer;
    transition: .3s;
    font-size: var(--font-sm);
}

.block-btn i {
    color: var(--primary-color);
}

.block-btn:hover {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
}

.color-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-group input[type="color"] {
    width: 45px;
    height: 40px;
    border: none;
    cursor: pointer;
    background: none;
}

.color-group input[type="text"] {
    flex: 1;
    padding: 8px;
    border-radius: var(--radius-sm);
}

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

.leave-container {

    background: var(--background-color);
    font-family: var(--font-family);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

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

.leave-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.page-title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-main);
}

.leave-header-right {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* ================= SEARCH ================= */

.search-box-leave {
    position: relative;
}

.search-icon-leave {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted-icon);
}

.search-input-leave {
    border: none;
    border-radius: var(--radius-sm);
    background: var(--container-bg);
    font-size: 12px;
    color: var(--text-main);
    outline: none;
    width: 180px;
}

.search-input-leave:focus {
    border-color: var(--secondary-color);
}

/* ================= FILTER ================= */

.filter-select-leave {
    padding: 6px 28px 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    font-size: 12px;
    color: var(--text-main);
    cursor: pointer;
    outline: none;
}

.filter-select-leave:hover {
    border-color: var(--accent-color);
}

.filter-select-leave:focus {
    border-color: var(--secondary-color);
}

/* ================= LAYOUT ================= */
/* ================= LAYOUT ================= */
/* ========================= LEAVE PAGE ========================= */

.leave-content-layout {
    display: grid;
    grid-template-columns: 370px 1fr;
    gap: 18px;
    align-items: start;
    min-height: 0;
    height: 100%;
}

.leave-list-section {
    height: calc(100vh - 180px);
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leave-list-section::-webkit-scrollbar {
    width: 5px;
}

.leave-list-section::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 20px;
}

.leave-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    transition: 0.25s ease;
    cursor: pointer;
    position: relative;
}

.leave-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.leave-card.active-leave {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--card-bg));
    border-color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
}

.leave-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.leave-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leave-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.leave-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leave-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.leave-type-text {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.leave-type-value {
    color: var(--text-main);
    font-weight: 600;
}

.leave-date-1 {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.leave-date-badge,
.detail-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 30px;
    background: var(--container-bg);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-main);
    margin-top: 4px;
}

.pendingBox-1,
.pendingBox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 30px;
    background: var(--container-bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
}

.pendingIcon-pending,
.pendingIcon-approved,
.pendingIcon-cancelled {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.pendingIcon-pending {
    background: #f59e0b;
}

.pendingIcon-approved {
    background: #10b981;
}

.pendingIcon-cancelled {
    background: #ef4444;
}

.pendingLabel,
.pendingLabe-1 {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
}


.leave-detail-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;

    height: auto;
    max-height: unset;

    overflow: visible;
}

.leave-detail-section::-webkit-scrollbar {
    width: 5px;
}

.leave-detail-section::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 20px;
}

.leave-detail-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.leave-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.detail-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.detail-user-name,
#detail-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.detail-leave-type {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.btn-punch-in,
.btn-punch-out {
    border: none;
    padding: 6px 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Default */


.employee-empty p {
    color: var(--text-main);
}

.btn-punch-in {
    background: var(--primary-color);
    color: #fff;
}

.btn-punch-in:hover {
    background: var(--primary-hover);
}

.btn-punch-out {
    background: var(--secondary-color);
    color: #fff;
}

.btn-punch-out:hover {
    opacity: 0.9;
}

.to-cc-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.to-cc-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.to-cc-label {
    min-width: 40px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 5px;
}

.to-cc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.to-cc-chip {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.to-chip {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
}

.cc-chip {
    background: color-mix(in srgb, var(--asset-color) 18%, transparent);
    color: var(--asset-color);
}

.leave-subject-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.subject-label {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.subject-value {
    color: var(--text-main);
    font-weight: 600;
}

.leave-message-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.leave-detail-message {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-main);
    margin: 0;
}

.leave-regards {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0;
}

.admin-reply-box {
    margin-top: 18px !important;
    padding: 16px !important;
    border-radius: 14px !important;
    background: var(--container-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.admin-reply-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-reply-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-reply-info {
    display: flex;
    flex-direction: column;
}

.admin-reply-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.admin-reply-message {
    padding: 12px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-main);
}


@media (max-width: 992px) {

    .leave-content-layout {
        grid-template-columns: 1fr;
    }

    .leave-list-section,
    .leave-detail-section {
        height: auto;
        max-height: unset;
    }
}

@media (max-width: 600px) {

    .leave-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .leave-subject-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .to-cc-row {
        flex-direction: column;
        gap: 8px;
    }

    .leave-user-avatar {
        width: 38px;
        height: 38px;
    }

    .detail-user-avatar {
        width: 44px;
        height: 44px;
    }

    .btn-punch-in,
    .btn-punch-out {
        width: 100%;
        margin-top: 8px;
    }
}

/* ================= OPTIONAL SCROLL HIDE ================= */

.scroll-present::-webkit-scrollbar {
    display: none;
}

/* Wrapper */
.x-menu-wrap {
    display: flex;
    flex-direction: column;
}

/* Item */
.x-menu-item {
    position: relative;
    color: var(--text-main);
    cursor: pointer;
    transition: 0.2s ease;
}

/* Hover text */
.x-menu-item:hover {
    color: var(--primary-color);
}

/* Text */
.x-menu-text {
    pointer-events: none;
}

/* Tooltip */
.x-hover-box {
    position: absolute;
    top: 140%;
    left: 65%;
    transform: translateX(-50%) scale(0.95);

    width: 250px;
    padding: var(--space-sm);

    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

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

    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;

    pointer-events: none;
    z-index: 999;
}

/* Show */
.x-menu-item:hover .x-hover-box {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Title */
.x-box-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: var(--space-xs);
}

/* Actions */
.x-box-actions {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

/* Badge */
.x-badge {
    font-size: var(--font-xs);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* Colors (theme-based) */
.x-view {
    background: color-mix(in srgb, var(--asset-color) 15%, transparent);
    color: var(--asset-color);
}

.x-edit {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-color);
}

.x-delete {
    background: color-mix(in srgb, var(--highlight-color) 15%, transparent);
    color: var(--highlight-color);
}

/* Submenu */
.x-sub-box {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-xs);
}

.x-sub-title {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Div list */
.x-sub-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.x-sub-item {
    font-size: var(--font-xs);
    color: var(--text-muted);
    transition: 0.2s;
}

.x-sub-item:hover {
    color: var(--primary-color);
}

/* Empty */
.x-empty {
    padding: var(--space-xs);
    color: var(--text-muted);
}

/* Main Container */
.punch-link-card {
    background: linear-gradient(to bottom right,
            var(--background-gradient-start),
            var(--background-gradient-end));
    border-radius: 20px;
    padding: 25px;
    color: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Top Section */
.punch-link-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* User Info */
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.user-details__name {
    font-size: 18px;
    font-weight: 600;
}

.user-details__role {
    font-size: 14px;
    opacity: 0.8;
}

/* Action Section */
.action-panel {
    text-align: right;
}

.action-button {
    background: var(--highlight-color);
    border: none;
    padding: 7px 16px;
    border-radius: 7px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-size: var(--font-xs);
}


.live-time {
    margin-top: 4px;
    font-size: var(--font-xs);
    opacity: 0.9;
}

/* Status Section */
.status-container {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-info__label {
    font-size: var(--font-sm);
    opacity: 0.9;
}

.status-info__hours {
    font-size: var(--font-md);
    font-weight: 600;
    margin-top: 5px;
}

.status-date {
    background: #f1e5c9;
    color: #000;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 600px) {
    .attendance-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 20px;
    }

    .status-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .status-info__hours {
        font-size: 30px;
    }
}

/* ===============================
   ATTENDANCE MODULE
================================= */

.attendance-container {
    padding: var(--space-md);
    background: var(--background-color);
    font-family: var(--font-family);
}

/* ===============================
   FILTERS
================================= */

.attendance-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.left-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-dropdown {
    background: var(--container-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    min-width: 180px;
    outline: none;
    font-size: var(--font-sm);
    font-family: var(--font-family);
    transition: 0.2s;
}

.filter-dropdown:hover {
    border-color: var(--primary-color);
}

.filter-dropdown:focus {
    border-color: var(--primary-color);
    box-shadow: none;
}

/* ===============================
   TABLE WRAPPER
================================= */

.table-wrapper {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;

    border: 1px solid var(--border-color);
}

/* ===============================
   ATTENDANCE TABLE
================================= */

.attendance-table {
    width: 100%;
    border-collapse: collapse;
}

.attendance-table thead {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--primary-color) 100%);
    border-bottom: 1px solid var(--border-color);
}

.attendance-table th {
    color: var(--button-text-color);
    padding: 16px;
    font-size: var(--font-xs);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.attendance-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: var(--font-xs);
    vertical-align: middle;
}

.attendance-table tbody tr {
    background: var(--card-bg);
    transition: 0.3s;
}

.attendance-table tbody tr:hover {
    background: var(--hover-bg);
}

/* ===============================
   STATUS BADGES
================================= */

.status-badge {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;

    display: inline-block;
    border: none;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-main);
}


/* Common Dot */
.status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}

/* Present */
/* Present */
.status-badge.present::before {
    background: #22c55e;
}

/* Absent */
.status-badge.absent::before {
    background: #ef4444;
}

/* Half Day */
.status-badge.half-day::before {
    background: #f59e0b;
}

/* Short Leave */
.status-badge.short-leave::before {
    background: #8b5cf6;
}

/* Weekend */
.status-badge.weekend::before {
    background: #64748b;
}

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

.btn {
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    font-family: var(--font-family);
}

.btn-warning {
    background: var(--secondary-color);
    color: #fff;
}

.btn-warning:hover {
    background: var(--secondary-color);
    color: #fff;
}

/* Click / Active */
.btn-warning:active,
.btn-warning.active {
    background: var(--secondary-color) !important;
    color: #fff;
}

/* Focus (outline remove + same color) */
.btn-warning:focus {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: none;
}

.btn-warning:hover {
    opacity: 0.9;
}

.btn-success {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    color: #fff;
}

.btn-success:hover {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
}

/* ===============================
   MODAL
================================= */

.modal {
    background: rgba(0, 0, 0, 0.45);
}

.modal-content {
    background: var(--card-bg);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}

.modal-header h4 {
    margin: 0;
    font-size: var(--font-sm);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

/* ===============================
   FORM CONTROLS
================================= */

.form-control {
    background: var(--container-bg);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: var(--font-sm);
    font-family: var(--font-family);
    border: 0.5px solid var(--border-color);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: none;
    background: var(--container-bg);
    color: var(--text-main);
}

.border.p-2.mb-2 {
    border: 0.5px solid var(--border-color) !important;
}

/* ===============================
   TABLE FOOTER
================================= */

.table-footer-1 {
    margin-top: 20px;
}

/* ===============================
   SUMMARY BAR
================================= */

.attendance-summary-bar {
    display: flex;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 15px;
}

.summary-item {
    background: var(--card-bg);
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    max-width: 420px;
    transition: 0.2s;
    width: 100%;
    text-align: center;
}

.summary-item:hover {
    background: var(--hover-bg);
}

.summary-label {
    color: var(--text-muted);
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
}

.summary-value {
    color: var(--text-main);
    font-size: 20px;
    font-weight: 700;
}

/* ===============================
   ALERT
================================= */

.alert-success {
    background: rgba(22, 163, 74, 0.15);
    border: 1px solid rgba(22, 163, 74, 0.4);
    color: #22c55e;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: var(--font-sm);
}

/* ===============================
   FLATPICKR
================================= */

.flatpickr-calendar {
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-card) !important;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    border: 1px solid var(--border-color) !important;
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--border-color) !important;
}

.flatpickr-day {
    color: var(--text-main);
}

.flatpickr-day.selected {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

@media(max-width:768px) {

    .attendance-container {
        padding: var(--space-md);
    }

    .attendance-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .left-filters {
        flex-direction: column;
        width: 100%;
    }

    .filter-dropdown {
        width: 100%;
    }

    .attendance-summary-bar {
        flex-direction: column;
    }

    .summary-item {
        width: 100%;
    }

    .attendance-table {
        min-width: 700px;
    }

    .table-wrapper {
        overflow-x: auto;
    }
}

@media(max-width:480px) {

    .attendance-container {
        padding: var(--space-sm);
    }

    .attendance-table th,
    .attendance-table td {
        padding: 12px;
        font-size: 11px;
    }

    .summary-value {
        font-size: 18px;
    }

    .btn {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ===== COMMON BUTTON ===== */
.task-start-btn,
.task-end-btn {
    padding: 6px 15px;
    font-size: var(--font-xs);
    font-family: var(--font-family);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: 0.2s ease;
    margin-right: var(--space-sm);
    /* optional spacing */
}

/* ===== START BUTTON ===== */
.task-start-btn {
    background: var(--accent-color);
    color: #fff;
}

/* ===== END BUTTON ===== */
.task-end-btn {
    background: var(--asset-color);
    color: #fff;
}

/* ===== CLICK EFFECT ONLY ===== */
.task-start-btn:active,
.task-end-btn:active {
    transform: scale(0.95);
}

/* ===== FOCUS STATE ===== */
.task-start-btn:focus,
.task-end-btn:focus {
    outline: none;

}

/* ===== WRAPPER ===== */
.suggestions-form-wrapper {
    max-width: 1200px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
}

/* ===== FORM ===== */
.suggestions-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    font-family: var(--font-family);
}

/* ===== FORM GROUP ===== */
.suggestions-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* ===== LABEL ===== */
.suggestions-form label {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* ===== INPUT / TEXTAREA ===== */
.suggestions-form input,
.suggestions-form textarea,
.suggestions-form select {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--container-bg);
    color: var(--text-main);
    font-size: var(--font-sm);
    outline: none;
    transition: 0.3s ease;
}

/* Focus */
.suggestions-form input:focus,
.suggestions-form textarea:focus,
.suggestions-form select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* ===== BUTTON ===== */
.suggestions-form .btn-submit {
    padding: 8px 20px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    letter-spacing: 0.5px;
}

/* Hover */


.error-text {
    font-size: var(--font-xs);
    color: var(--error-color);
}

.fraction-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 10px;
}


.fraction-inputs select,
.fraction-inputs input,
.fraction-inputs button {
    height: 38px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: var(--font-xs);
    outline: none;
}


.employee-select {
    flex: 2;
    min-width: 0;
    background: var(--container-bg);
    color: var(--text-main);
}


.hour-input {
    flex: 1;
    min-width: 0;
    background: var(--container-bg);
    color: var(--text-main);
}


.add-fraction-btn,
.remove-fraction-btn {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    color: #fff;
    transition: 0.3s ease;

}


.add-fraction-btn {
    background: var(--primary-color);
}




.remove-fraction-btn {
    background: var(--accent-color);
}


.fraction-inputs input:focus,
.fraction-inputs select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}


@media (max-width: 576px) {
    .fraction-inputs {
        flex-wrap: wrap;
    }

    .add-fraction-btn,
    .remove-fraction-btn {
        width: 100%;
    }
}

.emp-field {
    width: 100%;
    margin-bottom: var(--space-md);
    position: relative;
    z-index: 1;
}

.emp-field:focus-within {
    z-index: 1000;
}

.emp-field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.modal,
.modal-content,
.modal-body {
    overflow: scroll !important;
}

.toUserContainer,
.ccUserContainer {
    position: relative;
}

.toUserList,
.ccUserList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 48px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--container-bg);
    cursor: text;
}

.toUserInput,
.ccUserInput {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    background: transparent;
    color: var(--text-main);
    font-size: var(--font-sm);
}

/* DROPDOWN */
.toUserDropdown,
.ccUserDropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 114px;
    overflow-y: auto;
    background: var(--card-bg);

    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 99999;
}

/* ITEMS */
.toUserDropdown label,
.ccUserDropdown label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;

    cursor: pointer;
}

.border.p-2.mb-2 h6 {
    color: var(--text-main);
}

.toUserDropdown label:last-child,
.ccUserDropdown label:last-child {
    border-bottom: none;
}

.toUserDropdown label:hover,
.ccUserDropdown label:hover {
    background: var(--background-color);
}

/* TEXT */
.toUserDropdown span,
.ccUserDropdown span {
    font-size: var(--font-xs);
    color: var(--text-main);
}

/* CHECKBOX */
.toUserDropdown input[type="checkbox"],
.ccUserDropdown input[type="checkbox"] {
    margin-left: 10px;
    width: 16px;
    height: 16px;
    accent-color: var(--checkbox-fill);
    cursor: pointer;
}

/* CHECKED STATE */
.toUserDropdown label:has(input:checked) span,
.ccUserDropdown label:has(input:checked) span {
    color: var(--primary-color);
    font-weight: 500;
}

/* SCROLL */
.toUserDropdown::-webkit-scrollbar,
.ccUserDropdown::-webkit-scrollbar {
    width: 5px;
}

.toUserDropdown::-webkit-scrollbar-thumb,
.ccUserDropdown::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

/* ============================= */
/* BUG BOARD */
/* ============================= */

.bug-board-container {
    padding: var(--space-md);
    background: var(--background-color);
    min-height: 100vh;
}

.board-container {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: var(--space-sm);
    width: 100%;
    height: calc(100vh - 120px);
}

.board-column {
    background: var(--container-bg);
    width: calc(20% - 12px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}

.column-title {
    font-size: 18px;
    font-weight: 700;
    padding: 12px;

    position: sticky;
    top: 0;
    z-index: 5;
}

.column-title.bug-Milestone {
    background: var(--1-color)
}

.column-title.bug-Project.Summary {
    background: var(--2-color)
}

.column-title.bug-pending {
    background: var(--3-color)
}



.column-title.bug-inprogress {
    background: #3498DB;
}

.column-title.bug-completed {
    background: #1ABC9C;

}

.column-title.bug-assign {
    background: #FF6B6B;
}

.column-title.bug-blocked {
    background: #E74C3C;

}

.column-title.bug-deleted {
    background: #95A5A6;

}

.column-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 4px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

label {
    color: var(--text-main);
}

.card.p-3.mb-3 {
    background: var(--background-color);
    padding: 12px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    cursor: grab;
    transition: 0.2s ease;
    border: 1px solid var(--border-color);
}


.card:active {
    cursor: grabbing;
    transform: scale(0.98);
}


.text-muted {
    color: var(--text-muted) !important;
}

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

.button-container {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}


.plus-icon {
    margin-right: 5px;
    font-weight: bold;
}

/* ============================= */
/* PROGRESS */
/* ============================= */

.progress-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-circle-box {
    position: relative;
    width: 70px;
    height: 70px;
}

.progress-bg-circle {
    stroke: #e6e6e6;
    stroke-width: 10;
    fill: none;
}

.progress-active-circle {
    stroke-width: 10;
    fill: none;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset .6s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
}

/* ============================= */
/* MODAL */
/* ============================= */

.emp-modal-box {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: none;
    overflow: hidden;
}

.emp-header {
    background: var(--container-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}

.emp-title {
    margin: 0;
    color: var(--text-main);
    font-size: var(--font-lg);
    font-weight: 700;
}

.emp-body {
    padding: 20px;
    background: var(--card-bg);
}

/* ============================= */
/* SCROLLBAR */
/* ============================= */

.column-list::-webkit-scrollbar {
    width: 6px;
}

.column-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

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

@media (max-width:1024px) {

    .board-column {
        width: calc(50% - 12px);
    }

}

@media (max-width:600px) {

    .board-container {
        flex-direction: column;
        overflow-y: auto;
        height: auto;
    }

    .board-column {
        width: 100%;
        max-height: 70vh;
    }

    .button-container {
        flex-direction: column;
        align-items: stretch;
    }


}

/* =========================
   GLOBAL BOARD UI
========================= */

.board-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px;
    background: var(--background-color);
    color: var(--text-main);
}

.board-column {
    min-width: 300px;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 0px;
    box-shadow: var(--shadow-card);
}

/* COLUMN HEADER */
.column-title {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--button-text-color);
}

.title-count,
.title-counts {
    background: #fff;
    color: #000000;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 12px;
}

/* TASK CARD */
.task-box {
    background: var(--container-bg);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-card);
    color: var(--text-main);
    border: 0.7px solid var(--border-color);
}



/* TASK TEXT */
.task-title {
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
}

.task-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* BADGE */
.badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
}

/* ACTION MENU */
.card-action-menu {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* DROPDOWN */
.card-dropdown {
    display: none;
    position: absolute;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 120px;
    z-index: 999;
}

.card-dropdown a {
    display: block;
    padding: 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-main);
}

.card-dropdown a:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* EMPLOYEE SELECT */
#employeeInput,
#employeeInput_edit {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;

    color: var(--text-main);
}

/* DROPDOWN */
#employeeDropdown,
#employeeDropdown_edit {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    z-index: 1000;
}

/* EMPLOYEE ROW */
.employee-item,
.employee-item-edit {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.employee-item:hover,
.employee-item-edit:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* SELECTED TAGS */
#selectedEmployees div,
#selectedEmployees_edit div {
    display: inline-flex;
    align-items: center;
    background: var(--primary-color);
    color: #fff;
    padding: 6px 10px;
    margin: 4px;
    border-radius: 20px;
    font-size: 13px;
}



/* ===== MAIN CONTAINER ===== */
.checkout-container {

    padding: 10px 0px;
}

/* ===== TASK CARD ===== */
.taskShellBox {
    background: var(--container-bg);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
}

/* ===== TOP ROW ===== */
.taskTopRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== USER SECTION ===== */
.userAssignGroup {
    display: flex;
    align-items: center;
    gap: 10px;
}

.userFaceStack {
    display: flex;
}

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

/* ===== USER NAME ===== */
.assignInfoText span {
    font-weight: 500;
    font-size: var(--font-sm);
    color: var(--text-main);
}

/* ===== RIGHT META ===== */
.taskMetaBlock {
    text-align: right;
}

.taskTimeLabel {
    font-size: var(--font-xs);
    color: var(--asset-color);
    font-weight: 500;
}

/* ===== PRIORITY ===== */
.taskPriorityRow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: var(--font-sm);
    color: var(--text-main);
}

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

.priority-dot.high {
    background: var(--error-color);
}

.priority-dot.medium {
    background: var(--accent-color);
}

.priority-dot.low {
    background: var(--asset-color);
}

/* ===== DIVIDER ===== */
.softLineBreak {
    height: 1px;
    background: var(--border-color);
    margin: 15px 0;
}

/* ===== TITLE ===== */
.taskHeadline {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

/* ===== DESCRIPTION ===== */
.taskDescriptionText {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

/* ===== LINK ===== */
.bug-link {
    color: var(--link-color);
    font-size: var(--font-sm);
    text-decoration: underline;
}

/* ===== BUTTONS ===== */
button.btn-link {
    color: var(--accent-color);
    text-decoration: underline;
    font-size: var(--font-sm);
    background: transparent;
    border: none;
    cursor: pointer;
}



/* ===== COMMENT INPUT ===== */
.msgComposerWrap {
    margin-top: 20px;
    display: flex;
    align-items: center;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 8px 8px 8px 15px;
}

.msgComposerField {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--font-sm);
    color: var(--text-main);
    resize: none;
}

/* ===== SEND BUTTON ===== */
.msgSendTrigger {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ===== COMMENTS ===== */
.feedbackRow {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.feedbackAvatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

/* ===== COMMENT BODY ===== */
.feedbackBody {
    width: 100%;
}

/* ===== COMMENT TEXT ===== */
.feedbackMessage {
    font-size: var(--font-sm);
    color: var(--text-main);
}

.feedbackUserName {
    font-weight: 600;
    margin-right: 5px;
}

/* ===== TIMESTAMP ===== */
.feedbackTimestamp {
    font-size: var(--font-xs);
    color: var(--asset-color);
    margin-top: 3px;
}

/* ===== MENTION DROPDOWN ===== */
.mention-box {
    position: absolute;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 5px;
    width: 250px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 999;
}

.mention-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--text-main);
}

/* ===== MODAL ===== */
.modal-content {
    background: var(--container-bg);
    color: var(--text-main);
    border-radius: var(--radius-lg);
}

/* ===== TIMER BOX ===== */
.modal-body .border {
    border-color: var(--border-color) !important;
    background: var(--background-color);
}

.task-label {

    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Dates */
.task-date {
    font-weight: 400;
    font-size: var(--font-xs);
}

.start-date {
    color: var(--asset-color);
}

.due-date {
    color: var(--accent-color);
}

/* Overdue */
.task-overdue {
    color: var(--error-color);
    font-size: var(--font-xs);
    margin-top: 6px;
    font-weight: 600;
}

/* Admin Comment */
.task-admin-comment {
    margin-top: 8px;
    font-size: var(--font-xs);
    color: #000;
    background: #FFFCEB;
    padding: 6px 8px;
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
}

/* Status */
.task-status {
    font-size: var(--font-xs);
    margin-top: 6px;
    margin-bottom: 10px;
}

/* Variants */
.task-status.completed {
    color: var(--primary-color);
}

.task-status.cancelled {
    color: var(--accent-color);
}

.task-status.progress {
    color: var(--secondary-color);
}

.task-status.pending {
    color: var(--text-muted);
    margin-bottom: 3px;
}

.taskProgress {
    position: relative;
    width: 50px;
    height: 50px;
}

/* SVG */
.taskProgress svg {
    width: 100%;
    height: 100%;
}

/* Background circle (theme border color) */
.progress-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 4;
}

/* Active progress */
.progress-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Center text */
.progressValue {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: var(--font-xs);
    font-weight: 600;

    line-height: 1;
    text-align: center;
}

.more-btn {
    border: none;
    background: none;
    outline: none;
    cursor: pointer;

    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    color: var(--icon-color);
    transition: all 0.2s ease;
}


.more-btn svg {
    fill: currentColor;
}



.more-btn:active {
    transform: scale(0.95);
}

.more-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-btn svg {
    fill: currentColor;
}

.actionTooltip-99 {
    display: none;
    position: absolute;
    right: 0;
    top: 35px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    z-index: 999;
}

.actionTooltip-99.show {
    display: block;
}

.pending-dropdown {
    position: absolute;
    right: 0px;
    top: 0px;
}

.actionTooltip-99 {
    position: absolute;
    right: 0;
    top: 38px;

    min-width: 160px;

    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

    padding: 6px;

    display: none;
    flex-direction: column;

    z-index: 999;

    animation: dropdownFade 0.15s ease-in-out;
}

/* show class */
.actionTooltip-99.show {
    display: flex;
}

/* =========================
   ANIMATION
========================= */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* =========================
   ACTION BUTTONS
========================= */
.actionItem-11 {
    width: 100%;
    text-align: left;

    padding: 10px 12px;
    border: none;
    background: transparent;

    font-size: 13px;
    font-weight: 500;

    color: var(--text-color);

    border-radius: 8px;

    cursor: pointer;

    transition: 0.2s ease;
}

/* hover */
.actionItem-11:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

/* delete special */
.deleteAct:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger-color);
}

/* restore special */
=========================*/ .task-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;

    padding: 12px 14px;
    margin-top: 10px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* LABEL ROW */
.task-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    gap: 6px;
    display: flex;

    align-items: center;
}

.active-timer.task-small-date {
    color: var(--asset-color);
}

/* VALUE BASE */
.task-value {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
}

/* TOTAL HOURS STYLE */
.total-hours {
    color: var(--asset-color);
    background: rgba(37, 99, 235, 0.08);
}

/* CONSUMED HOURS STYLE */
.consumed-hours {
    color: var(--primary-color);
    background: rgba(22, 163, 74, 0.08);
}

.task-content,
.task-content * {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

a {
    text-decoration: none !important;
}

/* ===== CARD CONTAINER ===== */
.taskShellBox {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
    position: relative;
    transition: 0.3s ease;
    border: 1px solid var(--border-color);
}

.taskShellBox:hover {
    transform: translateY(-4px);
}

/* ===== USER AVATAR GROUP ===== */
.img-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.userImageWrapper {
    display: flex;
    align-items: center;
}

.userImageBox {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
}



.userImageBox span {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* ===== HEADER ===== */
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}



/* ===== PRIORITY ===== */
.task-priority {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-xs);
    color: var(--text-main);
}

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

/* Dynamic Priority Colors */
.priority-dot.low {
    background: #2ecc71;
}

.priority-dot.medium {
    background: #f39c12;
}

.priority-dot.high {
    background: #e74c3c;
}

/* ===== TIMER ===== */
.task-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.task-small-date {
    font-size: var(--font-xs);
    font-weight: 500;
}




.btn-danger {
    background: var(--error-color);
    color: #fff;
}

/* ===== CONTENT ===== */
.task-content {
    margin-top: var(--space-xs);
    line-height: 19px;
}

.task-title {

    margin-bottom: 4px;
}

.task-desc {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* ===== LINK OVERLAY ===== */
.stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ===== ACTIVE TIMER STYLE ===== */
.active-timer {
    color: var(--error-color);
    font-weight: 600;
}

/* ===== EXTRA: BADGE STYLE ===== */
.task-small-date {
    display: inline-block;
    margin-top: 4px;
}

span.task-small-date {
    color: var(--primary-color);
}

/* Active / important time */
.active-timer {
    color: var(--primary-color);
    font-weight: 600;
}

/* ===== INPUT BOX ===== */
#userTagList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

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

    min-height: 44px;
}

/* INPUT ALWAYS FIRST LINE */
.userTagInput {
    flex: 1 1 100%;
    order: -1;
    border: none;
    outline: none;
    font-size: var(--font-sm);
    background: transparent;
    color: var(--text-main);
}

/* ===== CHIPS (FORCE NEW LINE = NICHE EFFECT) ===== */
.userTagChip {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: var(--font-xs);
}

/* REMOVE BUTTON */
.userTagChip span {
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    opacity: 0.8;
}

.userTagChip span:hover {
    opacity: 1;
}

/* ===== FAKE SEPARATION (INPUT VS CHIPS) ===== */
#userTagList::after {
    content: "";
    flex-basis: 100%;
    height: 1px;
}

/* ===== DROPDOWN ===== */
.userDropdownMenu {
    position: relative;
    display: flex;

    flex-direction: column;

    width: 100%;
    margin-top: 6px;

    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);

    max-height: 220px;
    overflow-y: auto;
    z-index: 1;

}

/* ITEM */
.userDropdownMenu label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: var(--font-xs);
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
}

.userDropdownMenu label:last-child {
    border-bottom: none;
}

.userDropdownMenu label:hover {
    background: var(--container-bg);
}

/* CHECKBOX */
.userDropdownMenu input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--checkbox-border);
    cursor: pointer;
    position: relative;
}

/* CHECKED */
.userDropdownMenu input[type="checkbox"]:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* TICK */
.userDropdownMenu input[type="checkbox"]:checked::after {
    content: "✔";
    position: absolute;
    font-size: 12px;
    color: #fff;
    left: 3px;
    top: -1px;
}

/* TEXT */
.userDropdownMenu input[type="checkbox"]:checked+span {
    color: var(--primary-color);
    font-weight: 600;
}

/* Modal fix (VERY IMPORTANT) */
.modal-content,
.modal-body {
    overflow: visible !important;
}

/* Wrapper */
.employee-wrapper {
    position: relative;
}

/* Input (design disturb na ho) */
#employeeInput {
    cursor: pointer;
    /* bas ye hi rakho */
}

/* Dropdown */
.employee-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;

    z-index: 1060;
    /* bootstrap modal se upar */

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;

    max-height: 140px;
    overflow-y: auto;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* Item */
.employee-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.employee-item:last-child {
    border-bottom: none;
}

.employee-item:hover {
    background: rgba(99, 102, 241, 0.15);
}

/* Checkbox */
.employee-item input {
    accent-color: var(--primary);
    width: 14px;
    height: 14px;
}

/* Selected tags */
.selected-employees {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Tag */
.selected-tag {
    background: var(--primary);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.selected-tag span {
    cursor: pointer;
}

/* Scrollbar (optional UI polish) */
.employee-dropdown::-webkit-scrollbar {
    width: 5px;
}

.employee-dropdown::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

/* TASK CARD */
.task-box {
    position: relative;
    overflow: visible !important;
}

/* USER IMAGE WRAPPER */
.userImageWrapper {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    overflow: visible !important;
}

/* SINGLE USER IMAGE */
.userImageBox {
    position: relative;
    margin-left: -28px;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 2;
}

.userImageBox:first-child {
    margin-left: 0;
}

.userImageBox:hover {
    transform: scale(1.08);
    z-index: 20;
}

/* USER IMAGE */
.userImageBox img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--shadow-card);
    display: block;
    background: var(--card-bg);
}

/* TOOLTIP */
.userTooltip {
    position: absolute;
    left: 130%;
    top: calc(100% - 4px);

    transform: translateX(-50%);
    background: var(--container-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);

    padding: 6px 10px;
    font-size: 12px;

    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-transform: capitalize;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;

    z-index: 100;
    box-shadow: var(--shadow-card);
}

/* SHOW TOOLTIP */
.userImageBox:hover .userTooltip {
    opacity: 1;
    visibility: visible;
    top: calc(100% - 4px);
}

/* TOOLTIP ARROW */
.userTooltip::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--container-bg);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: translateX(-50%) rotate(45deg);
}

/* SHOW TOOLTIP */
.userImageBox:hover .userTooltip {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 12px);
}

/* STRETCHED LINK FIX */
.stretched-link {
    z-index: 1 !important;
}

/* KEEP IMAGE CLICKABLE */
.userImageWrapper,
.userImageBox,
.img-header {
    position: relative;
    z-index: 5;
}

/* ===== Comment Input ===== */

.msgComposerField {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
}

.msgSendTrigger {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--asset-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.flatpickr-calendar {
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

.flatpickr-time input {
    color: var(--text-main) !important;
}

.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--background-color) !important;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: transparent !important;
    box-shadow: none !important;
}

.flatpickr-time input:hover {
    background: var(--background-color) !important;
    color: #fff !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    height: inherit;
    float: left;
    line-height: inherit;
    color: var(--text-main) !important;

    font-weight: 600;

    width: auto;
    padding: 0 6px;

    user-select: none;
    align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
    color: var(--text-main) !important;
    width: auto !important;
    padding: 0 8px;

    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;

    transition: all 0.2s ease;
}

.flatpickr-time .flatpickr-am-pm :hover {
    background: var(--background-color) !important;
}

.employee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-: var(--space-lg);
    gap: var(--space-md);
}

.employee-header h1 {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}



/* Tree Items */
.hr-item {
    /* border-left: 2px solid var(--border-color);
    margin-left: 10px;
    padding-left: 15px; */
    margin-bottom: var(--space-md);
}

/* Clickable Header */
.hr-head {
    background: var(--container-bg);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.hr-head:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
}

/* Toggle Icon */
.hr-icon {
    font-size: var(--font-md);
    font-weight: bold;
    color: var(--icon-color);
}

/* Hidden Body */
.hr-body {
    display: none;
    padding: 10px 10px 5px;
}

/* Options Row */
.hr-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--space-sm);
}

/* Checkbox Label */
.hr-label {
    background: var(--card-bg);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-main);
    font-size: var(--font-sm);
}

.hr-label:hover {
    background: rgba(79, 70, 229, 0.08);
    border-color: var(--primary-color);
}

/* Checkbox */
.hr-label input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--primary-color);
}

.hr-active input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--primary-color);
}

.card.p-3.mb-3 h5 {
    color: var(--text-main);
}

.emp-pro-dashboard {
    padding: 10px;
    min-height: 100vh;


    font-family: var(--font-family);
    color: var(--text-main);
}


.emp-pro-header {
    margin-bottom: 20px;
}

.emp-pro-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.emp-pro-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

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

.emp-pro-profile-card {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 22px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;

    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);



    backdrop-filter: blur(16px);
    align-items: center;
}

.emp-pro-profile-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--primary-color) 16%, transparent),
            transparent 35%);

    pointer-events: none;
}

.emp-pro-left {
    flex-shrink: 0;
}

/* =========================================================
   IMAGE BOX
========================================================= */

.emp-pro-image-box {
    width: 170px;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;

    background: var(--container-bg);

    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);

    box-shadow: var(--shadow-card);
}

.emp-pro-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emp-pro-camera-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;

    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;

    background: color-mix(in srgb, var(--card-bg) 90%, #000 10%);
    color: var(--button-text-color);

    font-size: 14px;
    cursor: pointer;
    transition: 0.3s ease;
}

.emp-pro-camera-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.05);
}

/* =========================================================
   PROFILE RIGHT
========================================================= */

.emp-pro-right {
    flex: 1;
}

.emp-pro-top h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
}

.emp-pro-top h3 span {
    color: var(--primary-color);
    font-size: 15px;
}

.emp-pro-role-wrap {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 10px;
    margin-bottom: 22px;
}

.emp-pro-role {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.emp-pro-id {
    background:
        color-mix(in srgb, var(--container-bg) 88%, #fff 12%);

    padding: 6px 12px;
    border-radius: 10px;

    font-size: 12px;
    color: var(--text-main);
    font-weight: 600;

    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* =========================================================
   DETAILS
========================================================= */

.emp-pro-details-grid {
    display: flex;
    gap: 24px;
}

.emp-pro-detail-column {
    flex: 1;
}

.emp-pro-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.emp-pro-detail-item {
    display: grid;
    grid-template-columns: 20px 180px 1fr;
    align-items: center;
    gap: 04px;
    margin-bottom: 16px;
}

.emp-pro-detail-item i {
    color: var(--muted-icon);
    font-size: 14px;
}

.emp-pro-detail-item span {
    color: var(--text-muted);
    font-size: 13px;
}

.emp-pro-detail-item strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

/* =========================================================
   STATS GRID
========================================================= */

.emp-pro-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.emp-pro-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 18px;
    border-radius: 16px;

    transition: 0.3s ease;

    background: var(--card-bg);

    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);

    box-shadow: var(--shadow-card);
}

.emp-pro-stat-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.emp-pro-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;

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

    font-size: 20px;
}

/* ===== Dynamic Theme Colors ===== */

.emp-pro-stat-card.green .emp-pro-stat-icon {
    background: var(--container-bg);

    color: var(--primary-color);
}

.emp-pro-stat-card.orange .emp-pro-stat-icon {
    background: var(--container-bg);

    color: var(--asset-color);
}

.emp-pro-stat-card.purple .emp-pro-stat-icon {
    background: var(--container-bg);

    color: var(--highlight-color);
}

.emp-pro-stat-card.blue .emp-pro-stat-icon {
    background: var(--container-bg);
    color: var(--asset-color);
}

.emp-pro-stat-card h4 {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.emp-pro-stat-card h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    color: var(--text-main);
}

.emp-pro-stat-card p {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 11px;
}

/* =========================================================
   BOTTOM GRID
========================================================= */

.emp-pro-bottom-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

/* =========================================================
   COMMON CARDS
========================================================= */

.emp-pro-attendance-card,
.emp-pro-project-card,
.emp-pro-task-card {
    background: var(--card-bg);

    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);

    border-radius: 18px;
    padding: 18px;

    box-shadow: var(--shadow-card);
}

.emp-pro-project-list {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE & Edge */
}

.emp-pro-project-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.emp-pro-project-card {
    height: 300px;
    /* vertical height */
    display: flex;
    flex-direction: column;
}

.emp-pro-project-list {
    overflow-y: auto;
    flex: 1;
}

.emp-pro-section-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

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

.emp-pro-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.emp-pro-section-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.emp-pro-view-btn {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

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

.emp-pro-attendance-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.emp-pro-att-mini-card {
    background: var(--container-bg);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 14px;
    padding: 14px;
}

.emp-pro-att-mini-card h5 {
    margin: 0 0 14px;

    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.emp-pro-att-value {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 14px;
    font-weight: 500;

    color: var(--text-main);
}

.emp-pro-att-value i {
    font-size: 12px;
    opacity: 0.7;
}

.emp-pro-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: var(--highlight-color);
    display: inline-block;
}

.emp-pro-attendance-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 18px;
}

.emp-pro-att-stat {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.emp-pro-att-stat:last-child {
    border-right: none;
}

.emp-pro-att-stat h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.emp-pro-att-stat span {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
}

/* =========================================================
   PROJECTS
========================================================= */

.emp-pro-project-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.emp-pro-project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.emp-pro-project-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.emp-pro-project-icon {
    width: 42px;
    height: 42px;

    border-radius: 12px;

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

    font-size: 14px;
    font-weight: 700;

    border: 1px solid rgba(255, 255, 255, 0.08);
}

.emp-pro-project-icon.green {
    color: #22C55E;

    background: rgba(34, 197, 94, 0.16);

    border: 1px solid rgba(34, 197, 94, 0.25);

    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.18);
}

.emp-pro-project-icon.blue {
    color: #7C3AED;

    background: rgba(124, 58, 237, 0.16);

    border: 1px solid rgba(124, 58, 237, 0.25);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.18);
}


.emp-pro-project-icon.purple {
    color: #A855F7;

    background: rgba(168, 85, 247, 0.16);

    border: 1px solid rgba(168, 85, 247, 0.24);

    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.18);
}

.emp-pro-project-left h4 {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.emp-pro-project-left p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.emp-pro-status-badge {
    padding: 7px 12px;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 600;
}

.emp-pro-status-badge.success {
    background:
        color-mix(in srgb, var(--primary-color) 15%, transparent);

    color: var(--primary-color);
}

.emp-pro-status-badge.warning {
    background: rgba(255, 174, 0, 0.14);
    color: #ffbe4d;
}

/* =========================================================
   TASKS
========================================================= */

.emp-pro-task-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.emp-pro-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.emp-pro-task-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.emp-pro-task-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.35);
}

.emp-pro-task-left p {
    margin: 0;
    font-size: 14px;
    color: var(--text-main);
}

.emp-pro-priority {
    padding: 6px 12px;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 600;
}

.emp-pro-priority.danger {
    background:
        color-mix(in srgb, var(--highlight-color) 14%, transparent);

    color: var(--highlight-color);
}

.emp-pro-priority.warning {
    background:
        color-mix(in srgb, var(--asset-color) 14%, transparent);

    color: var(--asset-color);
}

.emp-pro-priority.success {
    background:
        color-mix(in srgb, var(--primary-color) 14%, transparent);

    color: var(--primary-color);
}

/* =========================================================
   COMMON COLORS
========================================================= */

.emp-green {
    color: var(--text-main);
}

.emp-orange {
    color: var(--asset-color);
}

.emp-red {
    color: var(--highlight-color);
}

.emp-blue {
    color: var(--secondary-color);
}

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

@media(max-width:1200px) {

    .emp-pro-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .emp-pro-bottom-grid {
        grid-template-columns: 1fr;
    }

    .emp-pro-details-grid {
        flex-direction: column;
    }

    .emp-pro-divider {
        display: none;
    }
}

@media(max-width:768px) {

    .emp-pro-profile-card {
        flex-direction: column;
    }

    .emp-pro-image-box {
        width: 100%;
        height: 280px;
    }

    .emp-pro-stats-grid {
        grid-template-columns: 1fr;
    }

    .emp-pro-attendance-top {
        grid-template-columns: 1fr 1fr;
    }

    .emp-pro-attendance-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .emp-pro-detail-item {
        grid-template-columns: 18px 100px 1fr;
        gap: 10px;
    }
}

@media(max-width:540px) {

    .emp-pro-dashboard {
        padding: 7px;
    }

    .emp-pro-attendance-top {
        grid-template-columns: 1fr;
    }

    .emp-pro-attendance-bottom {
        grid-template-columns: 1fr;
    }

    .emp-pro-top h3 {
        font-size: 18px;
    }

    .emp-pro-role {
        font-size: 13px;
    }

    .emp-pro-stat-card h2 {
        font-size: 22px;
    }
}

/* =========================
   PROJECT PERFORMANCE PAGE
========================= */

.attendance-container {

    background: var(--background-color);
    min-height: 100vh;
}

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

.project-performance-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.back-link {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: var(--shadow-card);
}

.back-link i {
    font-size: 18px;
    color: var(--text-main);
    transition: 0.3s ease;
}

.back-link:hover {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    transform: translateY(-2px);
}

.back-link:hover i {
    color: #fff;
}

.project-performance-title {
    margin: 0;
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--text-main);
}

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

.project-performance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

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

.project-performance-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 18px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: 0.3s ease;
}

.project-performance-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-color),
            var(--secondary-color));
}

.project-performance-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

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

.project-perf-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
}

.project-perf-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-perf-circle svg {

    transform: rotate(-90deg);
}

.project-perf-circle circle:first-child {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 5;
}

.project-perf-circle circle:last-child {
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2));
}

.project-perf-percent {
    position: absolute;
    top: 56%;
    left: 44%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
    white-space: nowrap;
}

.project-perf-name {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.5;
    word-break: break-word;
}

/* ================= DETAIL BUTTON ================= */

.project-detail-link {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.project-detail-link img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.project-detail-link:hover {
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* ================= INFO SECTION ================= */

.project-perf-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}

.project-perf-label {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.project-perf-value {
    color: var(--text-main);
    font-weight: 700;
    text-align: right;
}

/* ================= PAGINATION ================= */

.table-footer {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination .page-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.pagination .page-link:hover {
    background: var(--primary-color);
    color: #fff;
}

.pagination .active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

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

@media (max-width: 1400px) {

    .project-performance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 1100px) {

    .project-performance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {

    .attendance-container {
        padding: 16px;
    }

    .project-performance-grid {
        grid-template-columns: 1fr;
    }

    .project-performance-title {
        font-size: 20px;
    }

    .project-performance-card {
        padding: 16px;
    }

    .project-perf-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .project-perf-value {
        text-align: left;
    }

}

@media (max-width: 480px) {

    .project-perf-header {
        gap: 6px;
    }

    .project-perf-circle {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .project-perf-circle svg {
        width: 64px;
        height: 64px;
    }

    .project-perf-name {
        font-size: 15px;
    }

    .project-performance-title {
        font-size: 16px;
    }

}

.performance-employee {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.performance-circle {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.performance-circle svg {
    width: 50px;
    height: 50px;
}

.performance-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
}

.employee-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}

.search-filter {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
}

/* Date Field */
.date-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.date-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    margin-left: 2px;
    line-height: 1;
}

/* Input Box */
.date-input-box {
    position: relative;
    width: 150px;
    height: 38px;
    overflow: hidden;
}

.date-input-box i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--primary-color);
    pointer-events: none;
    z-index: 2;
}

/* Date Input */
.date-input-box input {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 12px 0 34px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    background: var(--card-bg);
    outline: none;
    box-sizing: border-box;
    transition: all 0.25s ease;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Focus */
.date-input-box input:focus {
    border-color: var(--primary-color);

}

/* Hide Default Calendar Icon but keep functionality */
.date-input-box input::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Buttons */


/* Responsive */
@media (max-width: 768px) {

    .search-filter {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }

    .date-field {
        width: calc(50% - 5px);
    }

    .date-input-box {
        width: 100%;
    }

    .btn-add,
    #clear-filter {
        flex: 1;
        width: 100%;
    }
}

@media (max-width: 480px) {

    .date-field {
        width: 100%;
    }
}

.mail-list-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    border-top: 1px solid var(--border-color);
    background: var(--container-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mail-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    cursor: pointer;
    transition: 0.2s ease;
}

.mail-row-item:hover {
    background: var(--background-color);
}

.mail-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mail-send-icon {
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
}

.mail-text-box {
    display: flex;
    align-items: center;
    gap: 80px;
    min-width: 0;
}

.mail-to-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    flex-shrink: 0;
}

.mail-subject-text {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.mail-date-text {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 20px;
}

.project-history-title {
    color: var(--text-main);
    margin-bottom: 0px;
}

.mailui-wrapper {
    margin-top: 30px;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    max-width: 1100px;
}

.mailui-header {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    justify-content: space-between;
}

.mailui-header-sub {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mailui-sender-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.mailui-sender-email {
    font-size: 13px;
    color: var(--text-muted);
}

.mailui-arrow {
    width: 18px;
    height: 18px;
    cursor: pointer;
    fill: var(--muted-icon);
    transition: 0.2s ease;
}

.mailui-arrow:hover {
    fill: var(--icon-color);
}

.mailui-dropdown {
    position: absolute;
    top: 52px;
    left: 0;
    width: 420px;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
    display: none;
    z-index: 99;
}

.mailui-row {
    display: grid;
    grid-template-columns: 75px 1fr;
    font-size: 13px;
    line-height: 1.8;
}

.mailui-label {
    color: var(--text-muted);
}

.mailui-value {
    color: var(--text-main);
}

.mailui-value strong {
    font-weight: 600;
}

.mailui-subject {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.mailui-body {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-main);
}

.mailui-body ul {
    padding-left: 18px;
    margin: 10px 0;
}

.mailui-body li {
    margin-bottom: 8px;
}

.mailui-sender-img {
    height: 60px;
    width: 60px;
    border-radius: 100%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.mailui-time-wrapper {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}

.mailui-time-ago {
    color: var(--accent-color);
    margin-left: 4px;
}

.emp-grid-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media(max-width:1100px) {
    .emp-grid-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:700px) {
    .emp-grid-wrap {
        grid-template-columns: 1fr;
    }
}

.emp-work-card {
    background: color-mix(in srgb, var(--card-bg) 20%, transparent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.emp-head-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border-color);
}

.emp-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.emp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.emp-name {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-main);
}

.emp-role {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.emp-progress {
    position: relative;
    width: 42px;
    height: 42px;
}

.emp-progress svg {
    width: 42px;
    height: 42px;
}

.emp-ring-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 3;
}

.emp-ring-fill {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-linecap: round;
}

.emp-progress span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.emp-month-row {
    display: flex;
    align-items: center;
    padding: 16px 9px 9px 9px;
    border-bottom: 1px solid var(--border-color);
    gap: 9px;
    background: color-mix(in srgb, var(--card-bg) 10%, transparent);
}

.emp-month-row:last-child {
    border-bottom: none;
}

.emp-month {

    font-weight: 500;
    color: var(--text-main);
    font-size: var(--font-xs);
}

.emp-week-box {
    min-width: 40px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 600;
    height: 48px;
    width: 48px;
    display: flex;
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* .purple-1,
.color-1 {
    background: rgba(122, 80, 255, 0.12);
    color: #7a50ff;
}

.green-1,
.color-2 {
    background: rgba(46, 159, 97, 0.12);
    color: #2e9f61;
}

.orange-1,
.color-3 {
    background: rgba(255, 123, 0, 0.12);
    color: #ff7b00;
}

.red-1,
.color-4 {
    background: rgba(255, 59, 74, 0.12);
    color: #ff3b4a;
}

.blue-1,
.color-5 {
    background: rgba(47, 109, 255, 0.12);
    color: #2f6dff;
} */

.emp-total {
    margin-left: auto;
    font-size: var(--font-sm);
    color: var(--text-main);
}

.emp-small-progress {
    position: relative;
    width: 46px;
    height: 46px;
    margin-left: 10px;
}

.emp-small-progress svg {
    width: 46px;
    height: 46px;
}

.small-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 3;
}

.small-fill {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 3;
    stroke-linecap: round;
}

.emp-small-progress span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

@media(max-width:600px) {

    .emp-month-row {
        overflow-x: auto;
        gap: 6px;
    }

    .emp-month {
        width: 70px;
    }

    .emp-total {
        width: 100%;
        margin-left: 0;
        font-size: var(--font-xs);
    }

}

/* Credit Badge */
.credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.credit-badge .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.credit-badge .status-text {
    color: #22c55e;
    font-weight: 600;
    font-size: 13px;
}


/* Debit Badge */
.debit-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.debit-badge .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.debit-badge .status-text {
    color: #ef4444;
    font-weight: 600;
    font-size: 13px;
}

.budget-summary-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.budget-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.budget-summary-card:hover {
    transform: translateY(-2px);
}

.summary-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.amount-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.2;
}

.amount-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}



.credit-card .summary-icon {
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
}



.debit-card .summary-icon {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}



.profit-card .summary-icon {
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
}


.loss-card .summary-icon {
    background: rgba(249, 115, 22, 0.14);
    color: #f97316;
}

@media(max-width:768px) {

    .budget-summary-wrapper {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .budget-summary-card {
        padding: 12px 14px;
    }

    .summary-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 14px;
    }

    .amount-value {
        font-size: 16px;
    }

    .amount-label {
        font-size: 12px;
    }

}


/* ==================== SETTINGS PAGE ==================== */

.settings-page {
    padding: var(--space-lg);
    background: var(--background-color);
    min-height: 100vh;
    font-family: var(--font-family);
}

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

.settings-page .setting-header {
    margin-bottom: var(--space-lg);
}

.settings-page .setting-header .page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

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

.settings-page .settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

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

.settings-page .setting-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.settings-page .setting-card-wide {
    grid-column: span 2;
}

.settings-page .setting-card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-main);
    margin: 0 0 var(--space-md);
    line-height: 1.6;
}

/* ==================== FORM ==================== */

.settings-page .setting-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.settings-page .setting-form-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.settings-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-page .form-group-full {
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
}

.settings-page .form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
}

/* ==================== INPUTS ==================== */

.settings-page .form-input {
    width: 100%;
    padding: 8px 12px;
    font-size: var(--font-sm);
    font-family: var(--font-family);
    color: var(--text-main);
    background: var(--container-bg);
    border: 1px solid var(--text-field-border);
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
}

.settings-page .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--container-bg);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.settings-page .form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.settings-page .form-input[type="password"] {
    letter-spacing: 2px;
}

/* ==================== SELECT ==================== */

.settings-page select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
}

/* ==================== BUTTON ==================== */

.settings-page .btn-submit-setting {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--button-text-color);
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    align-self: flex-start;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.settings-page .btn-submit-setting:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.settings-page .btn-submit-setting:active {
    transform: translateY(0);
}

/* ==================== PASSWORD ==================== */

.settings-page .password-wrapper {
    position: relative;
}

.settings-page .toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: var(--icon-color);
}

/* ==================== COLOR PICKER ==================== */

.settings-page .color-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-page .color-wrapper input[type="color"] {
    width: 44px;
    height: 44px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.settings-page .color-wrapper input[type="text"] {
    flex: 1;
}

/* ==================== DAYS GRID ==================== */

.settings-page .days-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.settings-page .day-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: 0.2s ease;
}

.settings-page .day-checkbox:hover {
    border-color: var(--primary-color);
}

.settings-page .day-checkbox span {
    font-size: var(--font-sm);
    color: var(--text-main);
}

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

.settings-page .photo-upload {
    display: flex;
    justify-content: center;
}

.settings-page .photo-circle {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border-color);
    background: var(--container-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-page .photo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== CROP MODAL ==================== */

.settings-page .crop-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.settings-page .crop-box {
    background: var(--card-bg);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    width: 420px;
    max-width: 95%;
}

.settings-page .crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: var(--space-md);
}

/* ==================== ERROR ==================== */

.settings-page .error,
.settings-page .text-danger {
    color: var(--error-color);
    font-size: var(--font-xs);
}

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

@media (max-width: 1200px) {
    .settings-page .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .settings-page {
        padding: var(--space-md);
    }

    .settings-page .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-page .setting-form-two-col {
        grid-template-columns: 1fr;
    }

    .settings-page .form-group-full {
        grid-column: span 1;
    }

    .settings-page .days-grid {
        grid-template-columns: 1fr;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--container-bg) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
}

/* USER IMAGE WRAPPERS */
.userImageWrappers {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    overflow: visible !important;
}

/* SINGLE USER IMAGE */
.userImageBoxs {
    position: relative;
    margin-left: -18px;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 2;
}

.userImageBoxs:first-child {
    margin-left: 0;
}

.userImageBoxs:hover {
    transform: scale(1.08);
    z-index: 20;
}

/* USER IMAGE */
.userImageBoxs img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--shadow-card);
    display: block;
    background: var(--card-bg);
}

/* TOOLTIP */
.userTooltips {
    position: absolute;
    left: 130%;
    top: calc(100% - 4px);

    transform: translateX(-50%);
    background: var(--container-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);

    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-transform: capitalize;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;

    z-index: 100;
    box-shadow: var(--shadow-card);
}

/* SHOW TOOLTIP */
.userImageBoxs:hover .userTooltips {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 12px);
}

/* TOOLTIP ARROW */
.userTooltips::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--container-bg);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: translateX(-50%) rotate(45deg);
}

/* STRETCHED LINK FIX */
.stretched-links {
    z-index: 1 !important;
}

/* KEEP IMAGE CLICKABLE */
.userImageWrappers,
.userImageBoxs,
.img-headers {
    position: relative;
    z-index: 5;
}

/* MORE COUNT */
.db-mores {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--highlight-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -20px;
    position: relative;
    z-index: 15;
    color: var(--button-text-color);
}

.heading-table.mt-3 {
    color: var(--text-main);
}

.text-success {
    color: var(--primary-color) !important;
}

.page-icon {
    width: 18px;
    height: 18px;
    color: var(--text-main);
}

.attendance-container {
    padding: var(--space-md);
    background: var(--background-color);
    color: var(--text-main);
    font-family: var(--font-family);
}

/* Tabs */
.hr-tabs__container {
    display: flex;
    align-items: center;
    gap: 16px !important;
    padding-bottom: 3px;
}

.day-checkbox input[type="checkbox"] {
    accent-color: var(--primary-color);
}

.hr-tab {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 10px 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.hr-tab--active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}


/* Table */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

.leaveMainTable {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
}

.leaveHeaderRow th {
    background: var(--table-heading);
    color: var(--text-main);
    padding: 18px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.leaveHeaderRow .nameCol {
    text-align: left;
    min-width: 220px;
}

.leaveDataRow td {
    border-bottom: 1px solid var(--border-color);
    padding: 18px 14px;
}

.leaveNameCell {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.leaveCenterCell {
    text-align: center;
}

/* Leave Box */
.leaveValueBox {
    width: 92px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    position: relative;
    margin: auto;
}

.leaveValueBox::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 7px;
    width: 3px;
    height: 20px;
    border-radius: 20px;
}

/* colors */
.greenLeave {
    background: rgba(34, 197, 94, 0.08);
    color: #1E8E3E;
}

.greenLeave::before {
    background: #1E8E3E;
}

.yellowLeave {
    background: rgba(251, 191, 36, 0.08);
    color: #D97706;
}

.yellowLeave::before {
    background: #D97706;
}

.redLeave {
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
}

.redLeave::before {
    background: #EF4444;
}

/* Single employee */
.attendance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.panel-leave-summary {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    transition: .3s;
}

.panel-leave-summary:hover {
    transform: translateY(-2px);
}

.ls-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ls-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

.ls-info {
    flex: 1;
}

.ls-info h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.ls-email {
    font-size: 12px;
    color: var(--text-muted);
}

.ls-badge-month {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ls-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

.ls-divider {
    height: 1px;
    background: var(--border-color);
    margin: 14px 0;
}

.ls-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--container-bg);
    border-radius: 8px;
    overflow: hidden;
}

.ls-metric {
    padding: 18px 10px;
    text-align: center;
}

.ls-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.ls-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.ls-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.ls-total {
    font-size: 14px;
    font-weight: 600;
}

.ls-sub {
    color: var(--text-muted);
}

/* Tab Content Hide/Show */
.hr-tabs__content {
    width: 100%;
}

.hr-tabs__pane {
    display: none;
}

.hr-tabs__pane--active {
    display: block;
}

/* Responsive */
@media(max-width:1200px) {
    .attendance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.emp-field input::placeholder,
.emp-field textarea::placeholder,
.emp-field select,
.form-control::placeholder {
    color: var(--text-main) !important;
    opacity: 0.7;
}

@media(max-width:768px) {
    .attendance-grid {
        grid-template-columns: 1fr;
    }

    .hr-tabs__container {
        flex-wrap: wrap;
    }
}

.emp-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}

.emp-field input[type="date"] {
    position: relative;
    cursor: pointer;
}