/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/*================================================================================
	BTI Custom Styles
================================================================================*/

/* Brand Logo Styling */
.main-menu .navbar-header .navbar-brand .brand-logo {
    background: url('../../app-assets/images/logo/bti logo 2.png') no-repeat center center;
    background-size: contain;
    object-fit: cover;
    height: 55px;
    width: 55px;
    border-radius: 8px;
}

/* Brand Text Styling */
.main-menu .navbar-header .navbar-brand .brand-text {
    color: #e67a1c !important;
    font-weight: 800;
    font-size: 14px;
}

/* Brand Container Styling */
.main-menu .navbar-header .navbar-brand {
    display: flex;
    align-items: center;
}

/* Keep brand and toggle inline and vertically centered */
.main-menu .navbar-header .nav-toggle .nav-link {
    display: flex;
    align-items: center;
}

/* Ensure the header row centers items regardless of logo height */
.main-menu .navbar-header .nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* keep all items in one row */

/*================================================================================
    Custom Pagination Styles - Life Quran Theme
================================================================================*/

/* Pagination Container */
.pagination {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0.25rem;
}

/* Pagination Items */
.pagination .page-item {
    margin: 0;
}

.pagination .page-item.disabled {
    opacity: 0.6;
}

/* Pagination Links */
.pagination .page-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    margin: 0;
    color: #6c757d;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.pagination .page-link:hover {
    color: #495057;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    z-index: 2;
}

.pagination .page-link:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(230, 122, 28, 0.25);
    z-index: 3;
}

/* Active Page */
.pagination .page-item.active .page-link {
    color: #fff;
    background-color: #7367f0;
    border-color: #7367f0;
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.25);
}

/* Previous/Next Buttons */
.pagination .page-link i {
    font-size: 0.75rem;
    margin: 0 0.125rem;
}

.pagination .page-link span {
    font-size: 0.875rem;
}

/* Info Text */
.pagination-info {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.125rem;
    }

    .pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    .pagination-info {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        width: 100%;
        text-align: center;
    }
}

/* Add slight spacing between logo and text */
.main-menu .navbar-header .navbar-brand { gap: 10px; }

/* Ensure the entire header doesn’t wrap */
.main-menu .navbar-header { display: block; }

/* Logo for other contexts (if needed) */
.brand-logo-custom {
    background: url('../../app-assets/images/logo/bti logo 2.png') no-repeat center center;
    background-size: contain;
    height: 32px;
    width: 32px;
    display: inline-block;
    border-radius: 6px;
}