/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap");

* {
    font-family: "Roboto", sans-serif;
}

/* ===== THEME VARIABLES ===== */
:root {
    --color-primary: #1daa61;
    --color-primary-light: #cbf2dc;
    --color-primary-hover: #137241;
    --color-primary-content: #000000bf;

    --color-secondary: #e1e1e4;
    --color-secondary-content: #ffffff;

    --color-accent: #e5e7eb;
    --color-neutral: #f3f4f6;

    --color-base-100: #f7f5f3;
    --color-base-200: #ffffff;
    --color-base-300: #f2efed;

    --color-success: #4caf50;
    --color-error: #fb2c36e8;
}

/* ===== BASE ===== */
body {
    background-color: var(--color-base-100);
}

/* ===== UTILITIES (TAILWIND REPLACEMENTS) ===== */
.bg-base-100 {
    background: var(--color-base-100);
}
.bg-base-200 {
    background: var(--color-base-200);
}
.bg-base-300 {
    background: var(--color-base-300);
}

.bg-primary {
    background: var(--color-primary);
}
.hover\:bg-primary-hover:hover {
    background: var(--color-primary-hover);
}

.hover\:bg-primary-light:hover {
    background-color: var(--color-primary-light);
}

.bg-neutral {
    background: var(--color-neutral);
}
.hover\:bg-neutral:hover {
    background: var(--color-neutral);
}

.text-primary-content {
    color: var(--color-primary-content);
}

.border-primary {
    border-color: var(--color-primary);
}
.border-accent {
    border-color: var(--color-accent);
}
.bg-primary-light {
    background-color: var(--color-primary-light);
}

/* ===== TABLE SIZE BUTTON ===== */
.tableSizeBtn {
    min-width: 55px;
    height: 45px;
    border-radius: 8px;
    background-color: var(--color-primary-light);
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* ACTIVE */
.tableSizeBtn.active {
    background-color: var(--color-primary);
    color: #fff;
}

.active-ticket {
    background-color: #f0f2f3 !important;
}

/* HOVER */
.tableSizeBtn:hover {
    background-color: var(--color-primary);
    color: white;
}
/* ===== NAVBAR ===== */
.navbar {
    background-color: var(--color-base-200);
    border-bottom: 1px solid #ddd;
}

.nav-item {
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
    color: #333;
    transition: 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.nav-item:not(.nav-active):hover {
    background-color: var(--color-primary-light);
}

.nav-active {
    background-color: var(--color-primary);
    color: white;
}

/* Smooth dropdown */
.group:hover .group-hover\:flex {
    display: flex;
}

#statusMenu div:not(.bg-primary):hover {
    background-color: var(--color-primary-light);
}

/* Optional animation */
/* .group:hover > div {
    animation: fadeIn 0.2s ease-in-out;
} */

/* divider line */
.menu-divider {
    border-bottom: 2px solid var(--color-accent);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item {
    transition: 0.2s;
}

/* HOVER = primary light */
.menu-item:hover {
    background: var(--color-primary-light);
}

/* ACTIVE (selected tab) */
.active-tab {
    background: var(--color-primary-light);
}

.submenu-item:hover {
    background: var(--color-primary-light);
}

.group:hover > a {
    background: var(--color-primary-light);
}

.group:hover > a.nav-active {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* SELECT2 SEARCH INPUT (INSIDE DROPDOWN) */
.select2-container .select2-search__field {
    outline: none !important;
    padding: 6px 10px;
    border-radius: 4px;
    width: 100%;
}

/* REMOVE DEFAULT BORDER */
.select2-container--default .select2-selection--single {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* REMOVE SEARCH FIELD BORDER */
.select2-container .select2-search__field {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* FOCUS EFFECT (ONLY GLOW, NO BORDER) */
.select2-container .select2-search__field:focus {
    border: none !important;
    box-shadow: 0 0 0 2px var(--color-primary) !important;
}

/* SELECT BOX FOCUS */
.select2-container--default.select2-container--focus
.select2-selection--single {
    border: none !important;
    box-shadow: 0 0 0 2px var(--color-primary-light) !important;
}

/* OPTIONAL: HOVER */
.select2-container .select2-search__field:hover {
    border-color: var(--color-primary);
}

/* SELECT2 DROPDOWN OPTION HOVER */
.select2-container .select2-results__option--highlighted {
    background-color: var(--color-primary-light) !important;
    color: #000 !important;
}

/* SELECTED OPTION */
.select2-container .select2-results__option[aria-selected="true"] {
    background-color: var(--color-primary-light) !important;
    color: #000 !important;
}

/* SELECT2 MAIN BOX */
.select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: 4px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    background-color: #fff;
}

/* TEXT */
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #333;
    line-height: normal !important;
    padding-left: 0 !important;
}

/* ARROW ALIGN */
.select2-selection__arrow {
    height: 100% !important;
    right: 8px !important;
}



/* FULL WIDTH FIX */
.select2-container {
    width: 100% !important;
}

/* ===== ICON ===== */
.nav-icon {
    font-size: 20px;
    color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

/* ===== BUTTONS ===== */
.btn {
    background-color: var(--color-primary);
    color: white;
    border: none;
}

.btn-active {
    background-color: var(--color-primary);
    color: white;
}

.btn:hover {
    background-color: var(--color-success);
    color: white !important;
}

.btn-cancel {
    background-color: var(--color-error);
    color: var(--color-error-content);
    border: none;
}

.btn-cancel:hover {
    background-color: #d11f28;
}

.inputClass {
    width: 100%;
    height: 40px;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.5rem;
    background: white;
    transition: box-shadow 0.2s ease;
}

.inputClass:focus {
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--color-primary) !important;
}

/* ===== LABEL ===== */
.labelClass {
    font-weight: 600;
    color: var(--color-primary-content);
}

/* ===== LINK ===== */
.linkClass {
    color: #5b5bfd;
    font-weight: 700;
}

.linkClass:hover {
    text-decoration: underline;
}

/* HOVER TEXT → AFFECT CHECKBOX */
.module-click:hover .custom-checkbox {
    border-color: var(--color-primary);
}

/* ===== TABLE ===== */
table {
    border-collapse: separate;
}

th,
td {
    border: 1px solid var(--color-accent);
}

/* hover only if NOT selected */
#pageSizeDropdown div:not(.bg-primary):hover {
    background-color: var(--color-primary-light);
}

/* ===== CARD ===== */
.card-hover {
    transition: box-shadow 0.3s ease;
}

/* Tabs */
.tab-btn {
    transition: all 0.2s ease;
}

/* default */
.tab-btn {
    color: #333;
}

/* hover (only if NOT active) */
.tab-btn:not(.active):hover {
    background-color: var(--color-primary-light);
    color: #000;
}

.hover-primary-light:hover {
    background-color: var(--color-primary-light) !important;
    color: #000;
}

/* active */
.tab-btn.active {
    background-color: var(--color-primary);
    color: white !important;
}

/* ===== CUSTOM TABLE CHECKBOX (FIXED - NO SHIFT) ===== */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;

    border: 2px solid #d1d5db;
    border-radius: 4px;

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

    cursor: pointer;
    background-color: #fff;

    box-sizing: border-box;

    position: relative; /* IMPORTANT */
    font-size: 0; /* PREVENT TEXT SHIFT */

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

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

/* checked state */
.custom-checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* check icon base */
.custom-checkbox::after {
    content: "";
    position: absolute; /* PREVENT LAYOUT SHIFT */
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
}

/* check icon visible */
.custom-checkbox:checked::after {
    content: "✔";
    color: white;
    opacity: 1;
}

/* ===== ANIMATION ===== */
.slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

#passwordBtn {
    background-color: var(--color-primary-light);
    color: #000;
}

#passwordBtn.btn-active {
    background-color: var(--color-primary);
    color: #fff;
}

/* ===== NOTIFICATION HOVER EFFECT ===== */
.notif-item {
    transition: background 0.2s ease;
}

/* hover background (theme based) */
.notif-item:hover {
    background-color: var(--color-primary-light);
}

/* hide dot on hover */
.notif-item:hover .notif-dot {
    display: none;
}

/* show red cross on hover */
.notif-item:hover .notif-close {
    display: block;
}

/* smooth appearance */
.notif-close {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* stronger red hover */
.notif-close:hover {
    transform: scale(1.1);
    color: #dc2626; /* stronger red */
}

/* ===== PROFILE DROPDOWN HOVER ===== */
.profile-item {
    transition: all 0.2s ease;
}

.profile-item:hover {
    background-color: var(--color-primary-light);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.employee-card {
    background: var(--color-base-200);
    border: 1px solid var(--color-accent);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    transition: 0.3s;
}

.employee-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Highlight card (right one) */
.employee-card.highlight {
    background: var(--color-primary-light);
}

/* Header */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Status badge */
.status-badge {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 600;
}

/* Menu button */
.menu-btn {
    background: var(--color-base-200);
    border: 1px solid var(--color-accent);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
}

/* Profile */
.profile-img {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    object-fit: cover;
    margin: auto;
}

/* Name */
.name {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-content);
}

/* Role */
.role {
    font-size: 14px;
    color: #6366f1;
    margin-top: 3px;
}

/* Info box */
.info-box {
    background: var(--color-base-300);
    border-radius: 12px;
    padding: 15px;
    margin-top: 18px;
}

/* Info row */
.info-row {
    display: flex;
    justify-content: space-between;
}

/* Labels */
.label {
    font-size: 13px;
    color: #6b7280;
}

/* Values */
.value {
    font-weight: 600;
    color: var(--color-primary-content);
}

/* Divider */
.info-box hr {
    margin: 12px 0;
    border-color: var(--color-accent);
}

/* Contact */
.contact p {
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

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

/* CARD */
.job-card {
    background: var(--color-base-200);
    border: 1px solid var(--color-accent);
    border-radius: 18px;
    padding: 20px;
    max-width: 420px;
    transition: 0.3s;
}

.job-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* HEADER */
.job-header {
    margin-bottom: 18px;
}

.job-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* LOGO */
.job-logo {
    width: 50px;
    height: 50px;
    background: var(--color-base-300);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-logo img {
    width: 28px;
}

/* TITLE */
.job-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-content);
}

.job-meta {
    font-size: 14px;
    color: #6b7280;
    margin-top: 2px;
}

/* STATS */
.job-stats {
    background: var(--color-base-300);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.stat {
    text-align: center;
    flex: 1;
}

.stat h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary-content);
}

.stat p {
    font-size: 14px;
    color: #6366f1;
    margin-top: 4px;
}

/* DIVIDER */
.divider {
    width: 1px;
    height: 40px;
    background: var(--color-accent);
}

/* INFO */
.job-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.label {
    font-size: 13px;
    color: #6b7280;
}

.value {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary-content);
}

/* BUTTON */
.job-btn {
    width: 100%;
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

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

/* WRAPPER */
.projects-wrapper {
    background: var(--color-base-200);
    padding: 20px;
    border-radius: 16px;
}

/* TITLE */
.projects-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary-content);
    margin-bottom: 18px;
}

/* GRID */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

/* CARD */
.project-card {
    background: var(--color-base-300);
    border-radius: 14px;
    padding: 20px;
    transition: 0.3s;
}

.project-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* TOP CONTENT */
.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TEXT */
.card-label {
    font-size: 15px;
    color: #6b7280;
}

.card-value {
    font-size: 32px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--color-primary-content);
}

/* ICON CIRCLE */
.icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
}

/* ICON COLORS */
.icon.blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.icon.orange {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.icon.cyan {
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
}

/* FOOTER */
.card-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #6b7280;
}

/* BADGES */
.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
}

/* SUCCESS */
.badge.success {
    border: 1px solid #22c55e;
    color: #22c55e;
    background: #dcfce7;
}

/* DANGER */
.badge.danger {
    border: 1px solid #ef4444;
    color: #ef4444;
    background: #fee2e2;
}

/* AVATARS */
.avatars {
    display: flex;
    align-items: center;
}

.avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -8px;
}

.avatars img:first-child {
    margin-left: 0;
}

/* +MORE */
.more {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #6366f1;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
}

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

/* Tablet */
@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .card-value {
        font-size: 26px;
    }

    .icon {
        width: 55px;
        height: 55px;
        font-size: 18px;
    }
}

/* LAYOUT */
.dashboard-top {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 20px;
}

/* ================= WELCOME CARD ================= */
.welcome-card {
    background: linear-gradient(135deg, #6a5acd, #4f46e5);
    border-radius: 16px;
    padding: 20px;
    color: white;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

/* TEXT */
.welcome-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 5px;
}

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

.date {
    font-size: 13px;
    opacity: 0.8;
}

.achievement {
    margin-top: 15px;
    font-size: 14px;
}

/* IMAGE */
.welcome-img {
    width: 140px;
    object-fit: contain;
}

/* ================= PROGRESS ================= */
.progress-circle {
    margin-top: 15px;
}

.circle {
    width: 120px;
    height: 60px;
    border-radius: 120px 120px 0 0;
    background: conic-gradient(#22c55e 0% 98%, rgba(255, 255, 255, 0.2) 98%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circle span {
    position: absolute;
    bottom: -10px;
    font-weight: 700;
}

/* ================= STATS ================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.stat-card {
    background: var(--color-base-200);
    border-radius: 14px;
    padding: 18px;
    position: relative;
}

/* TITLE */
.stat-title {
    font-size: 14px;
    color: #6b7280;
}

.stat-card h3 {
    font-size: 26px;
    margin-top: 6px;
    font-weight: 700;
    color: var(--color-primary-content);
}

/* ICON */
.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-base-300);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
    font-size: 22px;
    color: var(--color-primary);
}

/* CHANGE TEXT */
.stat-change {
    font-size: 13px;
    text-align: center;
}

.stat-change.success {
    color: #22c55e;
}

.stat-change.danger {
    color: #ef4444;
}

.notif-item.read p:first-child {
    font-weight: 400;
}

.notif-item.read .notif-dot {
    display: none;
}

.notif-item.unread p:first-child {
    font-weight: 600;
}

.dropdown-anim {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: all 0.22s ease;
    pointer-events: none;
}

.dropdown-anim.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

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

/* Tablet */
@media (max-width: 1024px) {
    .dashboard-top {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .welcome-card {
        flex-direction: column;
        gap: 15px;
    }

    .welcome-img {
        width: 100px;
        align-self: center;
    }
}
✅
/* ===== FOOTER ===== */
.footer-text {
    color: #9ca3af;
}