/* General Layout Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

/* Sidebar Styling */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16rem;
    padding: 2rem 1rem;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

/* EC Logo */
.ec-logo {
    max-width: 100px;
    margin-bottom: 1rem;
}

/* Page Content Styling */
.content {
    margin-left: 18rem;
    padding: 2rem 1rem;
}

/* Active NavLink */
.sidebar .nav-link.active {
    font-weight: bold;
    color: #0d6efd;
}

/* KPI Card Styling */
.kpi-card {
    border-left-width: 5px;
    border-radius: .25rem;
}
.kpi-card .card-title {
    font-size: 2rem;
    font-weight: bold;
}
.kpi-card .card-text {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
}

/* Chatbot Popover */
#chatbot-popover {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050; /* Ensure it's above other content */
}

.recent-tickets-container {
    height: 350px; /* Or adjust to your preference */
    overflow-y: hidden;
    position: relative;
}

/* Keyframe animation for the new ticket */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Class to apply the animation to the new ticket */
.new-ticket-fade-in {
    animation: fadeInDown 0.75s ease-out;
}


/* Custom class to make text on progress bars dark and bold for readability */
.progress-bar-text-dark .progress-bar {
    color: #212529 !important; /* A dark color */
    font-weight: bold;
}