.pagination {
    display: flex !important;              /* Force flex display */
    justify-content: flex-end !important;  /* Align to right */
    flex-wrap: wrap;
    padding: 1rem 0;
    gap: 6px;
    list-style: none;
    margin: 0;                              /* Reset margin */
}


.pagination li {
    display: inline-block;
}

.pagination li a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    background: linear-gradient(135deg, #8e2de2, #4a00e0); /* Purple → Indigo */
    color: white;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
}

.pagination li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.pagination li.active a {
    background: linear-gradient(135deg, #3700ff, #120078); /* Deep blue → navy */
    font-weight: bold;
    pointer-events: none;
    cursor: default;
}

.pagination li.disabled a {
    background: #ddd;
    color: #aaa;
    box-shadow: none;
    pointer-events: none;
}
div.dataTables_paginate {
    display: flex !important;
    justify-content: flex-end !important;
}



.form-control:focus {
    box-shadow:
        var(--bs-box-shadow-inset),
        0 3px 6px rgba(165, 85, 247, 0.5),
        0 6px 12px rgba(168, 85, 247, 0.3),
        0 9px 18px rgba(181, 85, 247, 0.2) !important;
    border-color: #a555f7 !important; /* Optional: match border color */
}

.bg-purple-blue {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff !important;
    border: none;
    padding: 0.15em 0.35em;
    font-size: 0.65rem;
    border-radius: 0.35rem;
    display: inline-block;
}

.btn-purple-blue {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff;
    border: none;
    border-radius: 0.35rem;
    transition: 0.3s;
}

.btn-purple-blue:hover {
    background: linear-gradient(135deg, #5b0dcc, #1f65ec);
    color: #fff;
}

.sidebar-brand {
  background-color: #333D79FF;
}

.sidebar-wrapper {
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
}

.btn-gradient {
    color: #fff !important;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0.375rem;
    display: inline-block;
    cursor: pointer;
    transition: background 0.3s ease-in-out, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Primary - Purple to Blue */
.btn-gradient-primary {
    color:white;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
}
.btn-gradient-primary:hover {
    background: linear-gradient(135deg, #5b0ecb, #1f65fc);
}

/* Success - Green to Lime */
.btn-gradient-success {
    color:white;
    background: linear-gradient(135deg, #00b09b, #96c93d);
}
.btn-gradient-success:hover {
    color:white;
    background: linear-gradient(135deg, #00a18d, #88b935);
}

/* Danger - Red to Orange */
.btn-gradient-danger {
    color:white;
    background: linear-gradient(135deg, #ff4141, #d52bff);
}
.btn-gradient-danger:hover {
    color:white;
    background: linear-gradient(135deg, #e83e63, #e2451f);
}

/* Warning - Orange to Yellow */
.btn-gradient-warning {
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color:white;
}
.btn-gradient-warning:hover {
    background: linear-gradient(135deg, #f68c0c, #f7c600);
}

/* Info - Sky Blue to Blue */
.btn-gradient-info {
    color:white;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
}
.btn-gradient-info:hover {
    background: linear-gradient(135deg, #00b5ef, #0064e6);
}

.btn-gradient-primary {
    color: white;
    background: linear-gradient(135deg, #6a11cb, #2575fc); /* deep purple to deep blue */
    border: none;
    font-size: 15px;
    font-weight: 700;
}

.btn-gradient-primary:hover {
    color: white;
    background: linear-gradient(135deg, #580fa8, #1f63d4); /* even deeper on hover */
}