/* General Body and Typography */
body {
    font-family: 'Inter', sans-serif; /* Use Inter from Google Fonts */
    background: linear-gradient(to right bottom, #e0f2fe, #bbdefb); /* Light blue gradient background */
    min-height: 100vh; /* Ensure body takes full viewport height */
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll due to offcanvas */
}

/* Main Content Area */
#content {
    padding: 20px;
    background: #ffffff; /* White background for loaded content */
    border-radius: 12px; /* Slightly more rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
    margin-bottom: 20px; /* Space at the bottom */
    min-height: 80vh; /* Ensure content area has a decent height */
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for content shift */
}

/* Form Elements */
.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Bootstrap-like focus effect */
}

/* Pay Button Styling (from previous) */
.pay-button {
    width: 100%;
    background-color: #28a745; /* Green */
    border: none;
    padding: 12px;
    color: white;
    border-radius: 8px; /* Slightly more rounded */
    cursor: pointer;
    font-size: 1.1rem; /* Slightly larger text */
    transition: background-color 0.3s ease;
}
.pay-button:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Sidebar (Desktop) */
.sidebar-desktop {
    background: #212529 !important; /* Dark background for desktop sidebar */
    min-height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    padding-top: 0 !important; /* Reset default padding */
    position: sticky;
    top: 0;
    align-items: flex-start !important; /* Align content to start */
}
.sidebar-desktop .nav-link {
    color: #f8f9fa !important; /* Light text for links */
    padding: 15px 20px; /* More padding */
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 5px; /* Subtle rounding */
    margin-bottom: 5px; /* Spacing between links */
}
.sidebar-desktop .nav-link:hover,
.sidebar-desktop .nav-link.active {
    background: rgba(255, 255, 255, 0.15) !important; /* Light background on hover/active */
    color: #007bff !important; /* Blue text on hover/active */
    transform: translateX(5px); /* Slight hover effect */
}
.sidebar-desktop h4 {
    color: #f8f9fa; /* White text for portal title */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

/* Offcanvas Sidebar (Mobile) */
.offcanvas {
    background: #212529 !important; /* Dark background for offcanvas */
    color: #f8f9fa;
    width: 250px; /* Set a fixed width for the mobile sidebar */
}
.offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.offcanvas .offcanvas-title {
    color: #f8f9fa;
    font-weight: bold;
}
.offcanvas .btn-close {
    filter: invert(1); /* Make close button white */
}
.offcanvas .nav-link {
    color: #f8f9fa !important; /* Light text for links */
    padding: 15px 20px;
    transition: background-color 0.2s ease;
}
.offcanvas .nav-link:hover,
.offcanvas .nav-link.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #007bff !important;
}

/* Top Navbar for Mobile */
.navbar {
    background-color: #ffffff !important; /* White background for top navbar */
    border-bottom: 1px solid #dee2e6;
    padding-top: 10px;
    padding-bottom: 10px;
}
.navbar-brand {
    font-size: 1.5rem;
    color: #333 !important;
}
.navbar-toggler {
    color: #333 !important;
}


/* Responsive Adjustments */
@media (max-width: 767.98px) { /* Small devices (landscape phones, 576px and up) */
    .sidebar-desktop {
        display: none !important; /* Hide desktop sidebar */
    }
    #content {
        margin-left: 0 !important; /* Ensure content starts from left edge */
        padding-top: 15px; /* Adjust padding for top navbar */
    }
    .flex-nowrap {
        flex-wrap: wrap !important; /* Allow rows to wrap */
    }
    .col-md-3 { /* Adjust main content column width for small screens */
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) { /* Medium devices (tablets, 768px and up) */
    .navbar {
        display: none !important; /* Hide top mobile navbar on desktop */
    }
    /* Adjust content margin when sidebar is present */
    main#content {
        margin-left: -12px; /* Negative margin to pull content slightly left to align better with sidebar */
    }
}