:root {
    --footer-height: 100px;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    width: 100%;
    max-width: 100%;
}

/* Add padding to body content to account for fixed header/footer */
.body-content {
    margin-top: 90px; /* Space for fixed navbar - increased to show breadcrumbs */
    padding-bottom: calc(var(--footer-height) + 24px);
    min-height: calc(100vh - 90px);
}

.form-check-inline .form-check {
    display: inline-block;
    margin-right: 10px; /* Adjust as needed */
}
    
h1 {
    font-family: 'Impact'; 
    color: rgb(227,20,33)
}

/* Header shadow and fixed position */
.navbar {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
}

/* Adjust navbar position when banner is present */
body:has(.environment-banner) .navbar {
    top: 40px; /* Position below the banner */
}

/* Footer shadow and fixed position */
footer {
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    width: 100%;
    min-height: var(--footer-height);
}

/* Sticky table headers for list pages */
.table-responsive {
    max-height: calc(100vh - 380px); /* Adjusted to account for pagination and footer */
    overflow-y: auto;
}

table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
}

table thead th {
    background-color: #fff;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

input[readonly] {
    background-color: #e9ecef;
}

/* Pagination footer */
.table-pagination-wrapper {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    padding: 15px 0;
    z-index: 10;
    margin-top: 10px;
}

/* Environment Banner */
.environment-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.environment-banner-test {
    background-color: #ff9800;
    color: #000;
}

.environment-banner-dev {
    background-color: #4caf50;
    color: #fff;
}

/* Adjust body content margin when banner is present */
body:has(.environment-banner) .body-content {
    margin-top: 130px; /* Space for fixed navbar + banner */
}