body {
    background-color: #121212;
    color: #ffffff;
}

.navbar {
    background-color: #1f1f1f;
}

.card {
    background-color: #1e1e1e;
    color: #ffffff;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff; 
}
.card-title a {
color: #ffffff; /* Ensure the link color stays white */
}

.text-primary {
--bs-text-opacity: 1;
color: #ffffff !important; /* Set the text color to white */
}

.btn {
    background-color: #2d2d2d;
    color: #ffffff;
    border: none;
}

.btn:hover {
    background-color: #3e3e3e;
}

.form-control {
    background-color: #1e1e1e;
    color: #ffffff;
    border: 1px solid #3e3e3e;
}

.form-control::placeholder {
    color: #b1b1b1;
}

.alert {
    background-color: #2a2a2a;
    color: #ffffff;
    border-color: #444444;
}

.alert-success {
    background-color: #285e28;
}

.alert-danger {
    background-color: #5e2828;
}

.alert-warning {
    background-color: #5e5e28;
}

/* Table Styling Overrides */
.table-dark {
    background-color: #1e1e1e;
    color: #ffffff;
}

.table-dark th,
.table-dark td {
    border-color: #3e3e3e;
}

/* Hover effect for cards */
.transition-transform:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Ensure SVGs are properly sized and styled */
.svg-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: invert(1) brightness(2); /* Invert and brighten to make black icons white */
}

/* Icon container styling */
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

/* Text container styling */
.text-container {
    flex-grow: 1; /* Ensure text takes up remaining space */
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .card-text {
        font-size: 0.9rem;
    }
}

    /* Styling the pagination */
    .pagination .page-link {
        color: #ffffff;
        background-color: #2d2d2d;
        border: 1px solid #444444;
    }

    .pagination .page-link:hover {
        background-color: #3e3e3e;
        color: #ffffff;
    }

    .pagination .page-item.active .page-link {
        background-color: #bb86fc;
        border-color: #bb86fc;
        color: #000000;
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d;
        background-color: #2d2d2d;
        border-color: #444444;
        cursor: not-allowed;
    }

    /* Optional: Style for ellipsis */
    .pagination .page-item.disabled .page-link {
        background-color: #2d2d2d;
        color: #ffffff;
    }