/* ===============================
   🔹 HEADER STYLING (BLUE TILE)
   =============================== */
.header-container {
    background-color: #007bff; /* Blue background */
    border-radius: 15px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Spacing between buttons */
    width: 90%;
    max-width: 1100px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); /* Header shadow */
    flex-wrap: wrap; /* Ensures buttons stay horizontal */
}

/* ===============================
   🔹 HEADER BUTTONS (MODERN STYLE)
   =============================== */
.btn-header {
    background-color: white;
    color: black;
    border: 2px solid black;
    padding: 12px 20px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */
    text-align: center;
    transition: all 0.3s ease;
    display: inline-block;
    min-width: 120px; /* Ensures buttons don’t shrink */
    text-align: center;
}
.btn-header:hover {
    background-color: #f8f9fa;
}

/* ===============================
   🔹 LOGOUT BUTTON (RED MODERN STYLE)
   =============================== */
.btn-logout {
    background-color: #dc3545;
    color: white;
    border: 2px solid #dc3545;
    padding: 12px 20px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: all 0.3s ease;
    display: inline-block;
    min-width: 120px; /* Ensures consistent button size */
}
.btn-logout:hover {
    background-color: #c82333;
}

/* ===============================
   🔹 MOBILE-FRIENDLY HEADER
   =============================== */
@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    .btn-header, .btn-logout {
        flex: 1; /* Allows buttons to fill space evenly */
        text-align: center;
    }
}