.options-container {
    background: var(--table-header);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Toggle Button & Title */
.options-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Vertically stacked form */
.options-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

/* Ensure form fields align properly */
.options-form .form-group {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Consistent label width */
.options-form .form-group label {
    width: 150px;  /* Adjust based on layout */
    text-align: right;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Input fields take up remaining space */
.options-form .form-group input,
.options-form .form-group select {
    flex-grow: 1;
}

/* Checkbox alignment */
.options-form .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* FILTER FORM */
.filter-container {
	background: var(--table-header);
	/* Dark Orange */
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.filter-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	flex-grow: 1;
	/* Allows form to fill remaining space */
}

/* Ensure form fields stay closer together */
.filter-form .form-group {
	display: flex;
	flex-direction: column;
	min-width: 180px;
	/* Prevents fields from stretching too much */
}

/* Toggle Button for Filters */
.filter-toggle {
	background: var(--accent-color);
	color: var(--text-light);
	border: none;
	font-size: 1.2rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.3s ease;
}

.filter-toggle:hover {
	background: var(--primary-color);
}

.filter-submit {
	display: flex;
	align-items: center;
	background: var(--accent-color);
	/* Dark Blue */
	color: var(--text-light);
	border: none;
	padding: 8px 15px;
	border-radius: 5px;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.3s ease;
}

.filter-submit i {
	margin-right: 5px;
}

.filter-submit:hover {
	background: var(--secondary-color);
	/* Lighter Blue */
}


/* Mobile Optimization */
@media (max-width: 600px) {
    .options-form .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .options-form .form-group label {
        width: auto;
        text-align: left;
    }


	.filter-form {
		flex-direction: column;
		align-items: stretch;
		/* Ensure full width */
	}

	.filter-form .form-group {
		width: 100%;
	}
}