/* CSS for Stays Page */
body {
    font-family: 'Open Sans', sans-serif;
}

.card-header.bg-primary {
    background-color: #004080 !important; /* Using a GIHR brand color */
}

.btn-primary {
    background-color: #F4931E; /* Primary button color from index */
    border-color: #F4931E;
}

.btn-primary:hover {
    background-color: #d98307; /* Darker shade for hover */
    border-color: #d98307;
}

.form-label {
    font-weight: 600;
    color: #333;
}

.form-control-lg {
    padding: .75rem 1rem;
    font-size: 1rem;
}

/* Style for the card containing the form */
.card.shadow-lg {
    border: none;
    border-radius: 0.5rem;
}

/* Datepicker styling - ensure it's above other elements if needed */
.daterangepicker {
    z-index: 3000 !important; 
}

/* Adjustments for responsiveness */
@media (max-width: 768px) {
    .card-body {
        padding: 1.5rem !important;
    }
    h2 {
        font-size: 1.75rem;
    }
}

/* Styles for Sign-In Form */
#signInCard .card-header.bg-secondary {
    background-color: #6c757d !important; /* Bootstrap secondary color or a custom one */
}

#signInCard h2 {
    color: white;
}

#signInCard .form-label {
    font-weight: 600;
}

#signInCard .btn-primary {
    background-color: #007bff; /* A slightly different shade or same as main form */
    border-color: #007bff;
}

#signInCard .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

#signInCard a {
    color: #007bff;
}

#signInCard a:hover {
    text-decoration: underline;
}

/* Ensure cards in the row maintain similar visual weight if desired */
/* This might need more specific adjustments based on content height */
.row .col-lg-7 .card, 
.row .col-lg-5 .card {
    display: flex;
    flex-direction: column;
}

.row .col-lg-7 .card-body,
.row .col-lg-5 .card-body {
    flex-grow: 1;
}