/* --------------------------------------------------
   1. Container 
-------------------------------------------------- */
.container {
    max-width: 1200px;   /* adjust to taste */
    margin: 0 auto;      /* centers the whole container */
    padding: 20px;       /* optional, adds breathing room */
}

/* --------------------------------------------------
   2. Horizontal Layout (Instructions + Buttons + Table)
-------------------------------------------------- */
.horizontal-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: nowrap;

    max-width: 1200px;   /* NEW */
    margin: 0 auto;      /* NEW */
}

/* --------------------------------------------------
   3. Description (Instructions box)
-------------------------------------------------- */
.description {
    width: 380px;      /* matches your current inline width */
    flex-shrink: 0;    /* prevents collapsing */
}


/* --------------------------------------------------
   4. Buttons
-------------------------------------------------- */
.buttons-container {
    width: 160px;      /* fixed width */
    flex-shrink: 0;    /* prevents squeezing */
}

.btn {
    display: block;        /* forces one per line */
    width: 100%;           /* fills the 160px column */
    padding: 8px 0;
    font-size: 18px;
    text-align: center;
    text-decoration: none; /* removes underline */
    background-color: #007acc;
    color: #fff;
    margin-bottom: 6px;
    border-radius: 4px;
	}
}


.btn-close {
    background-color: #c62828;
    color: white;
}

.btn-cancel {
    background-color: #777;
    color: white;
}

/* --------------------------------------------------
   5. Table Container + Table
-------------------------------------------------- */
.table-container {
    flex: 1;
    min-width: 0;
    background-color: #FFFFE0;
    max-width: 380px; /* adjust as needed */
}

.volunteer-table {
    width: 100%;
    border-collapse: collapse;
}

.volunteer-table input {
    padding: 4px 6px;
    font-size: 14px;
}

.volunteer-table th,
.volunteer-table td {
    border: 1px solid #ccc;
    padding: 6px;
}

form:invalid {
    outline: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------
   6. set special red
-------------------------------------------------- */
.locked-cell {
    background-color: #ffe5e5; /* light red background */
}

.redtext {
    color: red;
    font-weight: bold;
}

/* --------------------------------------------------
   7. show save button
-------------------------------------------------- */

.table-footer {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.table-footer .btn {
    width: auto;
    padding: 0.5rem 1rem;
}